From ee56384f189258c2e32918dfd268045e136c49bd Mon Sep 17 00:00:00 2001
From: camperbot <dev@freecodecamp.org>
Date: Wed, 1 Jan 2025 13:33:41 +0000
Subject: [PATCH] chore(i18n,learn): processed translations

---
 ...thms-and-data-structures-certification.yml |    2 +-
 ...s-and-data-structures-certification-v8.yml |    2 +-
 .../add-a-negative-margin-to-an-element.md    |    4 +-
 .../add-borders-around-your-elements.md       |   25 +-
 ...rent-margins-to-each-side-of-an-element.md |   16 +-
 ...rent-padding-to-each-side-of-an-element.md |   16 +-
 .../add-rounded-corners-with-border-radius.md |   19 +-
 .../adjust-the-margin-of-an-element.md        |    4 +-
 .../adjust-the-padding-of-an-element.md       |    4 +-
 ...tach-a-fallback-value-to-a-css-variable.md |   12 +-
 .../change-a-variable-for-a-specific-area.md  |    8 +-
 .../basic-css/change-the-color-of-text.md     |    6 +-
 .../change-the-font-size-of-an-element.md     |    2 +-
 .../basic-css/create-a-custom-css-variable.md |    4 +-
 ...ive-a-background-color-to-a-div-element.md |    8 +-
 .../basic-css/import-a-google-font.md         |   24 +-
 ...ve-compatibility-with-browser-fallbacks.md |   10 +-
 .../basic-css/inherit-css-variables.md        |    5 +-
 .../inherit-styles-from-the-body-element.md   |   44 +-
 ...ke-circular-images-with-a-border-radius.md |    6 +-
 ...ide-all-other-styles-by-using-important.md |   18 +-
 ...s-declarations-by-styling-id-attributes.md |   16 +-
 ...e-class-declarations-with-inline-styles.md |   12 +-
 .../override-styles-in-subsequent-css.md      |   10 +-
 .../prioritize-one-style-over-another.md      |    8 +-
 .../set-the-font-family-of-an-element.md      |    9 +-
 .../basic-css/set-the-id-of-an-element.md     |    2 +-
 .../basic-css/size-your-images.md             |   15 +-
 .../specify-how-fonts-should-degrade.md       |   18 +-
 ...tyle-multiple-elements-with-a-css-class.md |   24 +-
 .../basic-css/style-the-html-body-element.md  |   13 +-
 ...derstand-absolute-versus-relative-units.md |   15 +-
 .../use-a-css-class-to-style-an-element.md    |   10 +-
 .../basic-css/use-a-custom-css-variable.md    |   24 +-
 .../use-a-media-query-to-change-a-variable.md |   12 +-
 .../basic-css/use-abbreviated-hex-code.md     |   24 +-
 ...use-an-id-attribute-to-style-an-element.md |   15 +-
 ...e-attribute-selectors-to-style-elements.md |   40 +-
 ...ion-to-specify-the-margin-of-an-element.md |   23 +-
 ...on-to-specify-the-padding-of-an-element.md |   23 +-
 .../use-css-selectors-to-style-elements.md    |   25 +-
 ...bles-to-change-several-elements-at-once.md |   12 +-
 .../use-hex-code-for-specific-colors.md       |   10 +-
 .../basic-css/use-hex-code-to-mix-colors.md   |   25 +-
 .../basic-css/use-rgb-to-mix-colors.md        |   40 +-
 .../use-rgb-values-to-color-elements.md       |    6 +-
 .../add-a-submit-button-to-a-form.md          |   21 +-
 .../add-images-to-your-website.md             |   15 +-
 .../add-placeholder-text-to-a-text-field.md   |   17 +-
 ...radio-buttons-and-checkboxes-by-default.md |    4 +-
 .../basic-html-and-html5/comment-out-html.md  |   16 +-
 .../create-a-bulleted-unordered-list.md       |   22 +-
 .../create-a-form-element.md                  |   18 +-
 .../create-a-set-of-checkboxes.md             |   18 +-
 .../create-a-set-of-radio-buttons.md          |   33 +-
 .../create-a-text-field.md                    |    2 +-
 .../create-an-ordered-list.md                 |   42 +-
 ...declare-the-doctype-of-an-html-document.md |    6 +-
 ...e-the-head-and-body-of-an-html-document.md |   14 +-
 .../delete-html-elements.md                   |    7 +-
 ...fill-in-the-blank-with-placeholder-text.md |    2 +-
 .../headline-with-the-h2-element.md           |   14 +-
 .../inform-with-the-paragraph-element.md      |   10 +-
 .../introduction-to-html5-elements.md         |   20 +-
 ...-to-external-pages-with-anchor-elements.md |   10 +-
 ...sections-of-a-page-with-anchor-elements.md |   20 +-
 .../make-dead-links-using-the-hash-symbol.md  |    2 +-
 ...st-an-anchor-element-within-a-paragraph.md |   51 +-
 ...ny-elements-within-a-single-div-element.md |   18 +-
 .../say-hello-to-html-elements.md             |    2 +-
 .../turn-an-image-into-a-link.md              |   16 +-
 .../basic-html-and-html5/uncomment-html.md    |   10 +-
 .../use-html5-to-require-a-field.md           |    2 +-
 ...ibute-with-radio-buttons-and-checkboxes.md |   33 +-
 ...add-flex-superpowers-to-the-tweet-embed.md |   74 +-
 ...elements-using-the-align-items-property.md |    4 +-
 ...ents-using-the-justify-content-property.md |    5 +-
 ...y-to-create-a-column-in-the-tweet-embed.md |   63 +-
 ...perty-to-create-rows-in-the-tweet-embed.md |   57 +-
 .../use-display-flex-to-position-two-boxes.md |    4 +-
 ...align-items-property-in-the-tweet-embed.md |   63 +-
 .../use-the-align-self-property.md            |    8 +-
 ...erty-to-set-the-initial-size-of-an-item.md |   12 +-
 ...lex-direction-property-to-make-a-column.md |    4 +-
 ...e-flex-direction-property-to-make-a-row.md |    4 +-
 ...-the-flex-grow-property-to-expand-items.md |    8 +-
 .../use-the-flex-shorthand-property.md        |   28 +-
 ...he-flex-shrink-property-to-shrink-items.md |    8 +-
 ...x-wrap-property-to-wrap-a-row-or-column.md |    4 +-
 ...ify-content-property-in-the-tweet-embed.md |   66 +-
 ...e-the-order-property-to-rearrange-items.md |    8 +-
 .../add-columns-with-grid-template-columns.md |   31 +-
 .../css-grid/add-gaps-faster-with-grid-gap.md |   33 +-
 .../add-rows-with-grid-template-rows.md       |   33 +-
 ...-items-horizontally-using-justify-items.md |   33 +-
 ...-all-items-vertically-using-align-items.md |   31 +-
 ...an-item-horizontally-using-justify-self.md |   27 +-
 ...ign-an-item-vertically-using-align-self.md |   24 +-
 ...eate-a-column-gap-using-grid-column-gap.md |   33 +-
 .../create-a-row-gap-using-grid-row-gap.md    |   31 +-
 ...create-flexible-layouts-using-auto-fill.md |   47 +-
 .../create-flexible-layouts-using-auto-fit.md |   36 +-
 .../css-grid/create-grids-within-grids.md     |   23 +-
 .../css-grid/create-your-first-css-grid.md    |   28 +-
 .../divide-the-grid-into-an-area-template.md  |   67 +-
 ...mit-item-size-using-the-minmax-function.md |   33 +-
 ...grid-areas-using-the-grid-area-property.md |   35 +-
 ...ce-repetition-using-the-repeat-function.md |   33 +-
 ...-to-change-the-size-of-columns-and-rows.md |   33 +-
 ...area-without-creating-an-areas-template.md |   36 +-
 .../use-grid-column-to-control-spacing.md     |   47 +-
 .../use-grid-row-to-control-spacing.md        |   45 +-
 ...ia-queries-to-create-responsive-layouts.md |   65 +-
 .../create-a-media-query.md                   |   45 +-
 .../make-an-image-responsive.md               |   42 +-
 .../make-typography-responsive.md             |   40 +-
 ...na-image-for-higher-resolution-displays.md |   31 +-
 .../build-a-25-5-clock.md                     |    2 +-
 .../build-a-drum-machine.md                   |    2 +-
 .../build-a-javascript-calculator.md          |    2 +-
 .../build-a-markdown-previewer.md             |    2 +-
 .../build-a-random-quote-machine.md           |    2 +-
 ...t-json-with-the-javascript-fetch-method.md |    2 +
 .../exercise-tracker.md                       |   64 +-
 .../build-a-budget-app-project/budget-app.md  |  352 ++++
 .../build-a-personal-portfolio-webpage.md     |   75 +-
 .../build-a-product-landing-page.md           |    2 +-
 .../build-a-survey-form.md                    |  240 +--
 .../build-a-technical-documentation-page.md   |  170 +-
 .../build-a-tribute-page.md                   |  104 +-
 .../613e2546d0594208229ada50.md               |    4 +-
 .../613e275749ebd008e74bb62e.md               |    2 +-
 .../614202874ca576084fca625f.md               |   30 +-
 .../614394fb41985e0d2012a93e.md               |    2 +-
 .../6145e8b5080a5f06bb0223d0.md               |   38 +-
 .../6145fc3707fc3310c277f5c8.md               |    2 +-
 .../614796cb8086be482d60e0ac.md               |    2 +-
 .../614878f7a412310647873015.md               |   12 +-
 .../614883b6fa720e09fb167de9.md               |   12 +-
 .../6148dfab9b54c110577de165.md               |   16 +-
 .../5f332b23c2045fb843337579.md               |   10 +-
 .../5f344fad8bf01691e71a30eb.md               |   10 +-
 .../5f35e5c44359872a137bd98f.md               |    2 +-
 .../5f3c866d0fc037f7311b4ac8.md               |    2 +-
 .../5f3c866d28d7ad0de6470505.md               |    2 +-
 .../5f3cade99dda4e6071a85dfd.md               |    8 +-
 .../5f3ef6e01f288a026d709587.md               |    4 +-
 .../5f3ef6e03d719d5ac4738993.md               |    2 +-
 .../5f3ef6e050279c7a4a7101d3.md               |    2 +-
 .../5f3ef6e056bdde6ae6892ba2.md               |    8 +-
 .../5f3ef6e0f8c230bdd2349716.md               |   14 +-
 .../5f46e36e745ead58487aabf2.md               |    2 +-
 .../5f4701b942c824109626c3d8.md               |    6 +-
 .../5f76967fad478126d6552b0d.md               |    2 +-
 .../6140cbeec34e970dfe75e710.md               |    8 +-
 .../617ace7d831f9c16a569b38a.md               |    2 +-
 .../616d47bc9eedc4bc7f621bec.md               |   10 +-
 .../61764f7e5240eb7ccc7f6a0a.md               |    6 +-
 .../617b65579ce424bf5f02ca73.md               |    2 +-
 .../617b8b38f32bf2080a140675.md               |    4 +-
 .../617bb5624a75e86463b7e638.md               |    6 +-
 .../618a16873520a8d088ffdf44.md               |    2 +-
 .../61adc60b69cd4b87739d2174.md               |    2 +-
 .../61b092eb9e7fc020b43b1bb2.md               |    4 +-
 .../61b09f739aa6572d2064f9b8.md               |    4 +-
 .../61b0a1b2af494934b7ec1a72.md               |    4 +-
 .../61b3183655ec10efd8c0bb07.md               |    8 +-
 .../61537d86bdc3dd343688fceb.md               |   20 +-
 .../6153893900438b4643590367.md               |    2 +-
 .../6153938dce8b294ff8f5a4e9.md               |    4 +-
 .../6143a778bffc206ac6b1dbe3.md               |    6 +-
 .../6144de308591ec10e27d5383.md               |    4 +-
 .../6148d94fdf6a5d6899f8ff15.md               |    4 +-
 .../614e0e588f0e8a772a8a81a6.md               |    4 +-
 .../6199429802b7c10dc79ff871.md               |    8 +-
 .../619c155df0063a0a3fec0e32.md               |   14 +-
 .../619d05c54dabca0b10058235.md               |    2 +-
 .../619d1e7a8e81a61c5a819dc4.md               |    4 +-
 .../619d333b738e3c2b5d58b095.md               |    2 +-
 .../5d822fd413a79914d39e98ca.md               |   14 +-
 .../5d822fd413a79914d39e98d7.md               |    8 +-
 .../5d822fd413a79914d39e98dc.md               |    8 +-
 .../5d822fd413a79914d39e98e3.md               |    2 +-
 .../5d822fd413a79914d39e98e9.md               |   12 +-
 .../5d822fd413a79914d39e98ee.md               |    6 +-
 .../5d822fd413a79914d39e98f0.md               |   12 +-
 .../5d822fd413a79914d39e98f5.md               |    2 +-
 .../5d822fd413a79914d39e98fa.md               |    2 +-
 .../5d822fd413a79914d39e9903.md               |    2 +-
 .../5d822fd413a79914d39e9915.md               |    6 +-
 .../5d822fd413a79914d39e991a.md               |    8 +-
 .../5d822fd413a79914d39e9927.md               |    4 +-
 .../5d822fd413a79914d39e992c.md               |    6 +-
 .../5d822fd413a79914d39e9939.md               |    2 +-
 .../5d822fd413a79914d39e993e.md               |   12 +-
 .../5dc174fcf86c76b9248c6eb2.md               |    8 +-
 .../671141d8e32fe934c26fa1be.md               |    6 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../60f027c87bc98f050395c139.md               |    6 +-
 .../60f8618d191b940d62038513.md               |    6 +-
 .../60fac4095512d3066053d73c.md               |    8 +-
 .../60fc219d333e37046f474a6e.md               |    6 +-
 .../60ffefd6479a3d084fb77cbc.md               |    2 +-
 .../646c48df8674cf2b91020ecc.md               |    2 +-
 .../646ceb843412c74edee27a79.md               |   16 +-
 .../646dec359bef3b7811fba5a6.md               |    2 +-
 .../646f107abb89d00bb99f387a.md               |    2 +-
 .../61fd9ad665a4a282c8106be3.md               |    2 +-
 .../61fd9b7285bde783ad5b8aac.md               |   22 +-
 .../61fdac1e31692f9a9ad97295.md               |    2 +-
 .../61fdb04d9939f0a26ca51c2b.md               |    2 +-
 .../612e813b3ba67633222cbe54.md               |   14 +-
 .../612e8279827a28352ce83a72.md               |    8 +-
 .../612e9f1e7e5ccd4fa9ada0be.md               |    4 +-
 .../60a3e3396c7b40068ad6996b.md               |   16 +-
 .../60a3e3396c7b40068ad69973.md               |    4 +-
 .../60a3e3396c7b40068ad69978.md               |    8 +-
 .../60a3e3396c7b40068ad6997d.md               |    6 +-
 .../60a3e3396c7b40068ad69984.md               |    2 +-
 .../60a3e3396c7b40068ad6998a.md               |    4 +-
 .../60a3e3396c7b40068ad6998f.md               |    6 +-
 .../60a3e3396c7b40068ad69991.md               |    4 +-
 .../60a3e3396c7b40068ad69997.md               |    6 +-
 .../615f3e1b7233ee5c7595771f.md               |    2 +-
 .../615f7e7281626a92bbd62da8.md               |   10 +-
 .../615f887466db4ba14b5342cc.md               |    8 +-
 .../615f89e055040ba294719d2f.md               |    2 +-
 .../build-a-palindrome-checker.md             |    8 +-
 .../6352fcb156834128001ea945.md               |    6 +
 .../65aac0678d51b3f1a0cb8061.md               |    2 +-
 .../644b6d20eabd7e0149383254.md               |    2 +-
 .../660ae8ad1475698da3c3c37d.md               |   37 +
 .../660aea8782242e8f4bcc42d8.md               |   39 +
 .../63c9e8fe3a6f022a05a04675.md               |  162 +-
 .../64496d80bc174a158c973080.md               |   51 +-
 .../660f280dda5040f707c76b4a.md               |    6 +
 .../64fad9cd2eeb1e7ca2ca8c8b.md               |    4 +-
 .../64ff04cc33779427a6412449.md               |    2 +-
 .../657e230500602983e01fff6e.md               |   42 +-
 ...lem-462-permutation-of-3-smooth-numbers.md |    4 +-
 .../657b05367b59300bcb5f18ef.md               |    5 +-
 .../657b068e28a3bd135ced0042.md               |    8 +-
 .../657b190c4e736f5c4005b132.md               |    2 +-
 .../657b1ae0c2fb4c64071ade7a.md               |    2 +-
 .../657b23ad0df43588a6eadfa4.md               |    6 +-
 .../657b24e5edd7708e93549565.md               |    2 +-
 .../657b69e10d6606a0185d4d4f.md               |   12 +-
 .../657b6f641e5c3ab1afc6efc1.md               |    2 +-
 .../657b70cc934e0ab83cab4dbe.md               |    2 +-
 .../657b92b25858f24caf6894aa.md               |    6 +-
 .../657cb68bf15f349a744b5fba.md               |    4 +-
 .../657cd962b45f48127c183d7b.md               |   12 +-
 .../657cdc5a8e30191d1abec8b7.md               |    2 +-
 .../657ce061cda4a42a99c65d89.md               |    2 +-
 .../657cfeeeabb34d946d437dc7.md               |    2 +-
 .../657cff86dd812f98672e2649.md               |    2 +-
 .../657dc1d18a0a6f25302badba.md               |    2 +-
 .../657dc50830f9be380105f1ee.md               |    2 +-
 .../657dc568fe84e53acc962fc3.md               |    2 +-
 .../657dc9946a177a5938ad3854.md               |    2 +-
 .../657dca763bc23c5fc3398d95.md               |    6 +-
 .../657dce8ff35869721311a5e3.md               |    4 +-
 .../657dcee413423174ca3747f5.md               |    4 +-
 .../657dd047e755e37d58f5084f.md               |    4 +-
 .../657ddaaf8d89b4a56e3fdf78.md               |    4 +-
 .../657ddd7d4fc512b03741d9a3.md               |    6 +-
 .../656cd6a37495961c5f242c5d.md               |    2 +-
 .../657b1dfec76149836ea5c7d0.md               |    7 +-
 .../657b30e1b9f035e7e656fd01.md               |    2 +-
 .../65f3a5111de04c216a38d998.md               |    2 +-
 .../65f3a5733a199c21ca589173.md               |    2 +-
 .../65f52f761f23715bce60f9ce.md               |    2 +-
 .../66415d2fc70cf753ed0723a4.md               |    2 +-
 .../664274a516894a70a9111cb6.md               |    2 +-
 .../6642914bd5def3734c59b763.md               |    2 +-
 .../655b76340ecb8285060ab6d5.md               |    2 +-
 .../655bdc7e9c4116509df13f34.md               |    6 +-
 .../655c9a89818e18606c18ca4b.md               |    4 +-
 .../655c9bcb5bedb4620acb6f18.md               |    2 +-
 .../656a44b06bea9443b8ff45bd.md               |    2 +-
 .../656a456b46b4b04437f2d3e9.md               |    2 +-
 .../656a4ac4529e0f49ab900c3b.md               |    2 +-
 .../656a4d1943d8f24c030ded74.md               |    2 +-
 .../65fe10ef733aebd257f0677d.md               |    2 +-
 .../65ff086669d84512c7d132f1.md               |    2 +-
 .../6617e75a204e044552675f58.md               |    2 +-
 .../661ed01f09114567cc8fa939.md               |    2 +-
 .../661edda6df434c6f2161bea5.md               |    2 +-
 .../661ee1436ecb9271c66be82c.md               |    2 +-
 .../661eea69ca8a5177320d5e90.md               |    2 +-
 .../65b22d1aeb5ecf1d590d30bf.md               |    2 +-
 .../65b22e5388370c209a6b0b73.md               |    2 +-
 .../65b25b541262654062a21e74.md               |    4 +-
 .../65b25bcc98b00d41d06d2a2b.md               |    2 +-
 .../65d86e08994c4a0436d92766.md               |    2 +-
 .../65d89562dff69551e7683df3.md               |    2 +-
 .../65daa8143ae77767ad914ba4.md               |    4 +-
 .../65daa8cce1b9206995e4aec3.md               |    4 +-
 .../65daab9b713d3e6e6272c8bf.md               |    4 +-
 .../65dab1186529467ee5e463a7.md               |    2 +-
 .../65dad153fd675cb51e8423b0.md               |    2 +-
 .../6636f834a7b32443a43fa4e0.md               |    2 +-
 .../663855865f5d53510f9cd9a5.md               |    4 +-
 .../6638994f7dbcb3548e458202.md               |    2 +-
 .../66389a37bc8a4b5539eab451.md               |    2 +-
 .../66389e09cec2fa569567b15a.md               |    2 +-
 .../6556bc95e6ce5d850d37dd07.md               |    3 +-
 .../6556be93f9fcb88ac9e88b0d.md               |    7 +-
 .../655792631f21afaa40c611e1.md               |    5 +-
 .../6557985a95ab6db1c4a31b6c.md               |    5 +-
 .../6557995f0d97e1b2837a3081.md               |    4 +-
 .../65579a0e1613d5b31a034ee5.md               |    4 +-
 .../6557aee56ed7dcb5506a66d6.md               |    3 +-
 .../6557d6a229e541bfde2c560d.md               |    3 +-
 .../6557d782bc7613c06aa7dafd.md               |    3 +-
 .../6557db51366bf6c15a966fb0.md               |    8 +-
 .../6557dc1aa6be93c1eb4e9efb.md               |    5 +-
 .../6557dea8c258c1c2a767deb7.md               |    5 +-
 .../6557e0adbee371c3ac455a01.md               |    3 +-
 .../6557e5c6a854bfcad48808c4.md               |    4 +-
 .../655a235215bab7fa2a2e4bb7.md               |    3 +-
 .../655a33bb8f2009ff7a7abfaa.md               |    4 +-
 .../655a367638e3f401eb0235ea.md               |    2 +-
 .../655a3789069fc902eb2aaa4b.md               |    5 +-
 .../655a39242197c9040ddedef2.md               |    7 +-
 .../655a3cc030fb970687d6444d.md               |    5 +-
 .../655a4a5af997350c187bd779.md               |    5 +-
 .../655a4fc35818d90f73f63ba0.md               |    5 +-
 .../655a51cff12fb7117aa611f9.md               |    5 +-
 .../655a54506b259313b2d59577.md               |    2 +-
 .../655a5bfadf47e1199f9b65eb.md               |    8 +-
 .../655a5e76ca6f8d1b1a88e0f1.md               |   10 +-
 .../655a78fdfac0e22b0c400e72.md               |    2 +-
 .../655a79e595bd202b4cd5e2d2.md               |    3 +-
 .../655a7c5211e5252cf8a4ed01.md               |   12 +-
 .../655a7d752ffc542e5874af0b.md               |    7 +-
 .../655a896f31ca6a32913d1106.md               |    5 +-
 .../655a8c9d2a0ea136a0fd3631.md               |    5 +-
 .../655b266c2ea5495f43b97ea5.md               |    2 +-
 .../655b2b5cc4ea3062f9811dec.md               |    5 +-
 .../655b3197bb31ca670081f6d7.md               |    2 +-
 .../655b363149b5ba6b15434574.md               |    2 +-
 .../65e46524078f872c3a871f9f.md               |    2 +-
 .../661757150c7a75961a574a39.md               |    2 +-
 .../66175792ec93b19771c55c62.md               |    2 +-
 .../661772551b64ddd40c834b1e.md               |    2 +-
 .../661796e4635cd3eb1c8c78a4.md               |    4 +-
 .../661797b505f2d3ed4b170d74.md               |    2 +-
 .../66179829f664e3ee9b42ce5f.md               |    2 +-
 .../6617994636fa13f16060b12b.md               |    4 +-
 .../6617aea9ccdd68f7088368d1.md               |    2 +-
 .../6617af3ab73475f87b53a59d.md               |    2 +-
 .../6617b500a7049808f3a2a593.md               |    4 +-
 .../6617b53e5eda8e09c6c67d28.md               |    2 +-
 .../6617b674eb480b0c8d3d6031.md               |    2 +-
 .../6617b81046e7b11287a7bef8.md               |    4 +-
 .../658157d104bbc92a95147e45.md               |    2 +-
 .../65fc9a04edb4d56c8390bc3a.md               |    4 +-
 .../65fc9ab3635ebc6d167f86e6.md               |    2 +-
 .../656bd968e52c34220164de8d.md               |    2 +-
 .../65a84dad1595bbbc2e9cd895.md               |    4 +-
 .../65a84e922382a7bd112057ad.md               |    2 +-
 .../65a85090914872be8ca97793.md               |    2 +-
 .../65a9457392dfd7d564bc940e.md               |    2 +-
 .../65b28bbe803df52c4e76dd15.md               |    2 +-
 .../65b28f840a0d962f2240e800.md               |    4 +-
 .../65b2af1545e34334b7573de9.md               |    2 +-
 .../65b2b2781c59e837a5e0beb2.md               |    2 +-
 .../65b2bb073ac8d03dfe507810.md               |    2 +-
 .../6620e51c36d18c137b887081.md               |    4 +-
 .../6622346c798d906ee4d31846.md               |    2 +-
 .../65fd5f2abfdbc510942d76f8.md               |    2 +-
 .../661005bbe1801e14c303a57a.md               |    4 +-
 .../66100646290700150caff732.md               |    2 +-
 .../661216bbf6d9a51b409172a8.md               |    2 +-
 .../661256fe823f142fb9858beb.md               |    2 +-
 .../66126744e24b0a31255718a7.md               |    2 +-
 .../6579cf81a9cec6d21f872959.md               |    2 +-
 .../6579d002683211d5c7d13ef3.md               |    2 +-
 .../6579d4ca0578b4e95f1df60e.md               |    2 +-
 .../6579d539b1e5c2ec64484e49.md               |    2 +-
 .../6579d827ebd50afcacb829fe.md               |    2 +-
 .../6579dbf6a3e8a5161a592169.md               |    4 +-
 .../6579ddc94db61d2463022da3.md               |    2 +-
 .../6579de040244fb274179f001.md               |    2 +-
 .../6579e17ff05c5d451c2e4f35.md               |    4 +-
 .../657e0868da73165e32763679.md               |    2 +-
 .../657e15f175ecdf90b583ed01.md               |    4 +-
 .../657e1c10bc3f2ea8e1c1d7f7.md               |    2 +-
 .../657e31b82090130535456f65.md               |    2 +-
 .../657e358a40dd95143df6fe26.md               |    2 +-
 .../657e3dfda31b534042d06e39.md               |    2 +-
 .../657e4a245cc71782126b3316.md               |    2 +-
 .../657e4e482e3a38992b212c6f.md               |    2 +-
 .../657e50576597e0a65cd97e24.md               |    2 +-
 .../657e50dd1f6ff2a9873f9ff0.md               |    2 +-
 .../657e5c296bdba2ea26c67ca0.md               |    2 +-
 .../657e5d8f7f2274f2b1a8efcc.md               |    4 +-
 .../657e76356b6af6c07fe338c1.md               |    2 +-
 .../657e786b51f7eac240e92bcc.md               |    2 +-
 .../657fff7dabba2ff23993b08c.md               |    2 +-
 .../658010478daa16fe79d8113a.md               |    2 +-
 .../6613d3fe6615374be0d10008.md               |    2 +-
 .../6613d46936e9374c24cfaaab.md               |    2 +-
 .../6613d550a08c194cd27607ec.md               |    2 +-
 .../6613d6c3e74a984d6fcbd013.md               |    2 +-
 .../6614ad58c102e15df06c96d5.md               |    4 +-
 .../6614ae3e02cc465ebee68851.md               |    4 +-
 .../6614b1f8ee220c5f79df89b8.md               |    2 +-
 .../6614b3e52a6aca60bc3417fb.md               |    2 +-
 .../6629ce1a4f6581a7266d6ca9.md               |    2 +-
 .../662a2779b2aeb80c10508bf2.md               |    4 +-
 .../662a2b1f0c9314142ae87955.md               |    2 +-
 .../662a304552f2631d63aa7cab.md               |    2 +-
 .../662b74055c06e60af4f9b976.md               |    4 +-
 .../662b8975b11107146a49ec58.md               |    4 +-
 .../662f074021418e2b24937af7.md               |    2 +-
 .../662f0d350c37f42de48847fe.md               |    2 +-
 .../662f2e4b96f60636d44eb7db.md               |    2 +-
 .../662f31024608f337c0bf53a9.md               |    8 +-
 .../662f3450de7c2139809fb72b.md               |    2 +-
 .../657b400653813a1caa228aca.md               |    2 +-
 .../657b68caf6debb2975503948.md               |   10 +-
 .../657ca50a95d1c3828ee5a991.md               |    2 +-
 .../657caa4012f1cf846dcaa619.md               |    2 +-
 .../657cad90d6745e85569cdc06.md               |    2 +-
 .../657caec5163c6c85e5b31284.md               |    2 +-
 .../657cafc142a867006734c3ed.md               |    2 +-
 .../657ccfa7eeb47305177d4a45.md               |    2 +-
 .../657cd816f3caf509f85e4d4a.md               |    2 +-
 .../657ce387f809d60eb54f06d6.md               |    4 +-
 .../657ce691d6c57c107e650c5e.md               |    2 +-
 .../657daa5ab8505427a5b99cd2.md               |    2 +-
 .../657dab674b9de728828aa020.md               |    2 +-
 .../657dadfc7d21eb294c9f057e.md               |    2 +-
 .../657daf702ed04a29ee42de69.md               |    2 +-
 .../657df21cc45b1f66112fb8fc.md               |    2 +-
 .../657df2b22d7649667734d71e.md               |    2 +-
 .../657df5d14291b56887825276.md               |    4 +-
 .../657df6018a70e468f5dc016a.md               |    2 +-
 .../657e4b7d381d567e8d97967c.md               |    2 +-
 .../657e4c1f0bd3e97ef2d46644.md               |    2 +-
 .../657e4cd7f87d4f7f6954446d.md               |    2 +-
 .../657e4db2e3fc8d7fb41b8b85.md               |    2 +-
 .../657e4fd2ecf31280ef673f0d.md               |    2 +-
 .../657e539471b4aa82c7402c15.md               |    2 +-
 .../657e5477269b94834908826f.md               |    4 +-
 .../657e54f51fe1c983d840cb70.md               |    2 +-
 .../657e55e612fac9847dc7ce03.md               |    2 +-
 .../657e56e7034d2d858b6e9e00.md               |    2 +-
 .../674f0332ec59564081ec8b87.md               |  196 +++
 .../674f0495e5f4b0485ed38cd4.md               |   92 ++
 .../674f06b4b4d6eb4f6139ad61.md               |   52 +
 .../674f08fde55c2356b37e9b69.md               |   92 ++
 .../674f0afcd85abc5d478e150c.md               |   92 ++
 .../674f0d0dec2922641ce2c8e9.md               |  111 ++
 .../674f0f8e84b4c76c0f6ae6d3.md               |   94 ++
 .../674f1a33acb7717de4842822.md               |   52 +
 .../674f1ba48f50b78294f89089.md               |  102 ++
 .../67504e15ec1851a15aad11c1.md               |   92 ++
 .../675052373a1887aaa89c9a22.md               |   88 +
 .../67505766bad3bcbac2f16fe4.md               |  113 ++
 .../67505903fa6affc0910b7a9d.md               |  101 ++
 .../675106629f2c07cec9bf2c71.md               |  111 ++
 .../67510809633277d10d4fff4f.md               |   80 +
 .../6751a781fd421fda55170fc8.md               |  102 ++
 .../6751a827719c0fdb5b66b8e3.md               |   92 ++
 .../6751a990269891dd6f0ab1c2.md               |  102 ++
 .../6751ab72ff11cae0021d02d8.md               |   92 ++
 .../6751aca2701270e188b07df9.md               |  102 ++
 .../6751ad79009d66e2f5878282.md               |  102 ++
 .../6751aeb422ef45e4af25434d.md               |   92 ++
 .../6751bc2826c791ea69d7e8f2.md               |  102 ++
 .../6751bd2301b9feebf3813ac3.md               |   80 +
 .../6751bdd2f78adbed1ea0fa51.md               |  102 ++
 .../6751beb68c063aee92555abe.md               |  113 ++
 .../6752e404804c1c044c804b79.md               |   52 +
 .../6752e54369231d06538b4ac0.md               |   92 ++
 .../6752e83a806f520923bd28fa.md               |  102 ++
 .../6752eb5797ad390c7f40ef08.md               |   86 +
 .../6752f4680f2d251372d4ae64.md               |   68 +
 .../6752f6ebff95ee1781462c02.md               |   68 +
 .../6752fb3e6257c91b93721288.md               |   66 +
 .../6752fb92ecc7811d3a0f3320.md               |   66 +
 .../6752fc06607eba1e73a89929.md               |   68 +
 .../675948c97c0d4fd3d596960a.md               |  232 +++
 .../67594c1c9c8fc90a8e6f2f75.md               |   80 +
 .../67594e4ad681381278cee337.md               |   94 ++
 .../675950eed633ac1ac3884471.md               |  102 ++
 .../675961ce80a70e23e933fa8c.md               |   52 +
 .../675963eadf3bcf2ae50f74fe.md               |   88 +
 .../675966e572894133e1b3b275.md               |   80 +
 .../6759a3d84d89c4474d6a06b6.md               |  102 ++
 .../6759a570761b794ba1dc57e5.md               |  102 ++
 .../6759a679b6934850b6b0a31d.md               |   92 ++
 .../6759a7cc60ea94557c578ed4.md               |   92 ++
 .../6759a98f5028cb5bdf0a6f4b.md               |   90 +
 .../675beaae0511b83217778531.md               |  111 ++
 .../675d10fd9150e00d5ea464c2.md               |   52 +
 .../675d1437a379f517d766a249.md               |   92 ++
 .../675d16180e3c3f1e843ed138.md               |  102 ++
 .../675d177b1b7aca23c7f1b6d9.md               |   97 ++
 .../675d18c725ee4928ba83fa7c.md               |  111 ++
 .../675d6e0e52e8ee2d7b2b69cf.md               |   90 +
 .../675d6f815fb6c83276d12870.md               |  103 ++
 .../675d710fb8118237e416155a.md               |   89 +
 .../675d72320c09a53c1020e59d.md               |  111 ++
 .../675d72b7d86e163e326979e5.md               |   92 ++
 .../675d7493249c24447ca9e166.md               |  102 ++
 .../675d86beee48ab4941767200.md               |   52 +
 .../675d87ed627c734d9ee5c028.md               |   88 +
 .../675d88ce781849512cd7d426.md               |  101 ++
 .../675d8aabc2397c583c081ea9.md               |  111 ++
 .../675d8b482d5fa45b0226a891.md               |   92 ++
 .../675d8c5d1a1d775f78424011.md               |  102 ++
 .../675d8dfaad5f4765cbd8c013.md               |   52 +
 .../675d8eddf05fb469a75ef543.md               |  113 ++
 .../675d91adb9fb7173f4a7a4c7.md               |  111 ++
 .../675e6dfe0160bb66faa60a68.md               |   97 ++
 .../675e6f0bf7f7eb69ddffef81.md               |   80 +
 .../675e70d7b854926d7f18693c.md               |  102 ++
 .../675e7387be428072d95baeac.md               |   94 ++
 .../675e79e6ecfda37e1f49be65.md               |   64 +
 .../675e7cc999813e83379b139c.md               |   64 +
 .../675e8013d40d0d860143c14f.md               |   64 +
 .../675e80709ee205871518ba9b.md               |   64 +
 .../675e8133c874a588f947de57.md               |   64 +
 .../675ecdef47179ea4653c2b9f.md               |  196 +++
 .../675ecedbb04f6ca6dd620f0e.md               |   92 ++
 .../675ed1414303a6abfaac2d96.md               |   80 +
 .../675ed59b1e938bb2443585a5.md               |  111 ++
 .../675ed69e54ae31b462edf95b.md               |   80 +
 .../675ed905490b9ab8f4e640c4.md               |   92 ++
 .../675edb8012accfbd8f4135c5.md               |   92 ++
 .../675edc3228d9d1bf95c5e649.md               |   52 +
 .../675edeea805bb0c44385d0d5.md               |   80 +
 .../675ee01ee1d37cc722bbad83.md               |   92 ++
 .../675ee218782b4dcb26796c19.md               |  102 ++
 .../675fa4789b65761b6c562a1b.md               |   80 +
 .../675fa66d590e0127ba60b7f6.md               |   92 ++
 .../675fa827b0a17832dc798ba0.md               |  102 ++
 .../675fb5315884dc456fad654a.md               |  113 ++
 .../675fb7824cbbe3539de6111b.md               |  111 ++
 .../675fba2a32b4aa625e2f7940.md               |   38 +
 .../675fbba5f9807566fb0c39ef.md               |   92 ++
 .../675fbefa9f40157cad662e8d.md               |  102 ++
 .../675fbfc6fa824c820a7e49d4.md               |   88 +
 .../675fc02724147984cfe068d5.md               |   80 +
 .../675fe3fb72bdcb97dd10b7c8.md               |  102 ++
 .../675fe58fb4c9539cb37b4065.md               |   80 +
 .../675fe6a1e81c4ba00f415364.md               |   99 ++
 .../675feaafa5546fab32aa0736.md               |  111 ++
 .../675febf4f03233af8e347802.md               |   80 +
 .../675fee8f5d64f2b504e91281.md               |  102 ++
 .../675ff2b7f9405abf27f26740.md               |   80 +
 .../675ff37bebf32bc223e3660a.md               |  102 ++
 .../675ff42fb8c8a6c4f21cd3bb.md               |  104 ++
 .../675ff94f80bd9bd12c8497e2.md               |   92 ++
 .../6760f057483bbf684bfa6457.md               |  111 ++
 .../6760f48b0fe69572664e85f1.md               |  102 ++
 .../6760f7ca38c9167853ebf917.md               |   89 +
 .../676147de99ef019cee551581.md               |   70 +
 .../6761493d2db43ba139340975.md               |   70 +
 .../67614992d9e494a2b69f89bb.md               |   70 +
 .../67614a0187bd80a49d438b1f.md               |   70 +
 .../67614a6e5d4df6a6744127b7.md               |   70 +
 .../66a91783d34e873290e9f5ec.md               |    2 +-
 .../66a95606a32d5747dae3bfba.md               |    2 +-
 .../66a958bb3ac85c4a75e5fe88.md               |    2 +-
 .../66a9599790c94a4ba0e5dbd9.md               |    2 +-
 .../66a95ab699d0064d16bdf469.md               |    2 +-
 .../66a961222115ad5437ddf4fb.md               |    4 +-
 .../66b13f2f0c5a415ccd41335e.md               |    2 +-
 .../66b4f8f6c1af973bdfdc0228.md               |    2 +-
 .../66b568bf34c34209600445ad.md               |    6 +-
 .../66b56c0432933515821a4eeb.md               |    6 +-
 .../66b572bd3d3e122e9a8ff9df.md               |    4 +-
 .../66b57e127321d8524c7ddda7.md               |    6 +-
 .../66b580cb9307d46113a8a637.md               |   10 +-
 .../66b58252cb001966f564c19e.md               |    4 +-
 .../66b582d6978cff693c7b9455.md               |    8 +-
 .../66b583275950846a87e88de8.md               |    8 +-
 .../66bbba46fff0ef451b701bcd.md               |    2 +-
 .../66bbc147bc59c25e60e18aec.md               |    2 +-
 .../66bbf183427671a86f5ac25e.md               |    2 +-
 .../66c4e019a6cbfa3210603aef.md               |    4 +-
 .../66c4ec1a03bb27643063f262.md               |    2 +-
 .../66c4efaa80afd0729ae471d1.md               |    6 +-
 .../66c4f19f86b5f07a71ac7642.md               |    8 +-
 .../66c4f338d6b658809576ae77.md               |    4 +-
 .../66c4f45289436884e6afc059.md               |    4 +-
 .../66c4f90997120794595abd5c.md               |    2 +-
 .../66c4fd010695b5a316201d03.md               |    2 +-
 .../66c4ffe51866ecadb48304b9.md               |   10 +-
 .../66c5012e6643c2b32b3af0be.md               |    4 +-
 .../66c507bef7c69ac73fbc82cc.md               |    8 +-
 .../66c611f2d1e400c2f41ad5d9.md               |    2 +-
 .../66c613a4d11b69cdd746b5ed.md               |    8 +-
 .../66c616d281199cda967c144d.md               |    8 +-
 .../66c6184eda8a8be150b1a0b4.md               |    4 +-
 .../66c6193e7546c4e51cbf64c9.md               |    8 +-
 .../66c61a0197d7e7e87191e033.md               |   12 +-
 .../66c61a57f6eca6e9fb0f61d7.md               |    6 +-
 .../66c61dee09da09f603fa3dbc.md               |    2 +-
 .../66c62046cf3df2fe7cf92230.md               |   10 +-
 .../66c6213241b74d023adcf637.md               |    2 +-
 .../66c62515cf6ae70e34eb361d.md               |   10 +-
 .../66c625e03abcb711ca38ba5f.md               |    4 +-
 .../66c62747744dc4178785207d.md               |    4 +-
 .../66c628215739f51ac74cb5cc.md               |    4 +-
 .../66c6293f674a0a1e960027c3.md               |    2 +-
 .../66c62b0c65018625985a897d.md               |    2 +-
 .../66c637ce17705151c64f9059.md               |   10 +-
 .../66c63db09b73ad6539eeee61.md               |   16 +-
 .../66c63fda0e11806e78090f36.md               |   10 +-
 .../66c6409f492e5e71621d06b8.md               |   10 +-
 .../66c640e2f81416727a42fd4c.md               |    6 +-
 .../66609f86c2500e597c8cb52f.md               |  209 ++-
 .../673519c3d750b013c96f1e6f.md               |   90 +
 .../67351b96eefe7c282ec1424b.md               |  107 ++
 .../673653fa580778853a7a7afd.md               |  108 ++
 .../673654d11366b18b1c76d980.md               |   82 +
 .../673655ea628630928b5b50b8.md               |  107 ++
 .../6736576b5407af9bdf1f41b7.md               |  110 ++
 .../67365a08481f68acc18a9639.md               |  113 ++
 .../673ba128855f6e78cd392dab.md               |  109 ++
 .../673ba3a9d1858104dfbba180.md               |   82 +
 .../673ba5bf35e3b51211c27c2b.md               |  106 ++
 .../673ba72bd5ef6a1bc39ba037.md               |  101 ++
 .../673ba8558f0a93235de58ccb.md               |  111 ++
 .../673ba99a1280af2ba7770b56.md               |  111 ++
 .../673bab51ecb42c369eb6b37b.md               |  101 ++
 .../673bad5d57b0a6444819ca0e.md               |   94 ++
 .../673baec00a78e04d5c6a9ea2.md               |   92 ++
 .../673c03eb9c3d4c2e12555aaf.md               |   80 +
 .../673c06abb58d403f7e4533fb.md               |  113 ++
 .../673c07da6aa1be470dc55332.md               |   92 ++
 .../673c097ad524db51cca7ae3f.md               |  104 ++
 .../673c0bf736904660a9077269.md               |  102 ++
 .../67472118e6040e52ad3ca5b0.md               |  101 ++
 .../67472280c0b01f5e1442f8da.md               |  115 ++
 .../67472348ce54e263862c5386.md               |   99 ++
 .../674e3864432aea6f5ce708ed.md               |   92 ++
 .../674e3b2f69b2e481d4f6cebe.md               |   94 ++
 .../674e3bc223f6c5862facf3e2.md               |   88 +
 .../674e3cb5a611618cd5301758.md               |   99 ++
 .../67506acdf255ff94e0ba712e.md               |  111 ++
 .../67506bd2d567359bac72f760.md               |   90 +
 .../67506c7db9d148a0308107d8.md               |   88 +
 .../67506d2c92a80fa4b7a912a7.md               |  104 ++
 .../67506e16a9e0bdaad7267c35.md               |   98 ++
 .../67506e940e1d20ae6f0fc7e2.md               |   88 +
 .../67506f57df7629b3d8d90f11.md               |  102 ++
 .../675070049d1f9fb8c1bced11.md               |   89 +
 .../675070d075960bbe3f92eca6.md               |   99 ++
 .../675074863d75f1d559b039df.md               |  108 ++
 .../6750758f8581d3dcfeb1c386.md               |  124 ++
 .../6750775f2b0832e88216e98c.md               |  110 ++
 .../6750784c1399a9ef62b27e9e.md               |   90 +
 .../67507a47729d85fb7c88ee06.md               |   88 +
 .../67507adbc31ab8ffa2dc5243.md               |  111 ++
 .../67507f042946421936eb425a.md               |  117 ++
 .../67508b92b31af876eed82c66.md               |   96 ++
 .../6752100607e30e31bd85af76.md               |   70 +
 .../6752133caed6e849142fcc19.md               |   70 +
 .../6752136c94c79a4ad803f0cf.md               |   70 +
 .../675213a1aa7da34c876d94e9.md               |   72 +
 .../675213f5a47d9e4ef23d9050.md               |   72 +
 .../67531709d628ef047202e6ae.md               |  196 +++
 .../675318543812fa0f15f42c10.md               |   95 ++
 .../67531ca2cb308e28acf3bdc1.md               |  104 ++
 .../67531f0c699943385e41734c.md               |   90 +
 .../67531ff45ade873e5ff17211.md               |   90 +
 .../67532227a04e5e4cd4ccf987.md               |   92 ++
 .../675323b130ad71572ef10510.md               |  104 ++
 .../67532445152d375af93d4d19.md               |  104 ++
 .../675325cfea799165252500d4.md               |  100 ++
 .../675326de48b3e36c45ba1328.md               |   78 +
 .../675327d73a38d5731235d764.md               |  104 ++
 .../675329bc0e2bfa7f1c4f7411.md               |   90 +
 .../67532ac8b110a08666ee5f18.md               |   90 +
 .../67532bbaa817558e7691df51.md               |   82 +
 .../67532c49e75faf929fd9378d.md               |   84 +
 .../6753314748a2feb09a3059b2.md               |  139 ++
 .../67533335139a96bd1eb18395.md               |   97 ++
 .../6753357b948f6acb55e35e3b.md               |  101 ++
 .../67535bfb5c07ec6334ec8ea3.md               |  108 ++
 .../67535e02fd808570ca6cb599.md               |   88 +
 .../675743f6f7016d1074a9bca1.md               |   82 +
 .../675746c2d3d2f222111918d4.md               |  134 ++
 .../6757488ee5dfb72d866a36df.md               |   89 +
 .../6757498f826b0634696f224e.md               |  111 ++
 .../67574a712cb1143a3920f2a3.md               |  113 ++
 .../67574bb2fe3c4c42bae7b6e5.md               |   88 +
 .../67574c6d474104486add91a7.md               |  106 ++
 .../67574d8786f50e500eae8e67.md               |   97 ++
 .../67575000c0fd5b5f211d89c4.md               |  121 ++
 .../6757531dc5fbb973e1912e1a.md               |   90 +
 .../675753a815259c781d2b6913.md               |   80 +
 .../67575473b14c837d8de3a866.md               |   96 ++
 .../67575588dfebc085e31941e4.md               |  101 ++
 .../67575734a3672990f7c4385a.md               |  117 ++
 .../6757585d71b1ad9924a96eb9.md               |   90 +
 .../675758e09f09139cb34169f9.md               |  110 ++
 .../67575a0d4b966da41383050b.md               |   92 ++
 .../675c8db0264a83364dc521ac.md               |   90 +
 .../675c8f75eaf3914275999cae.md               |   92 ++
 .../675c900ff099fa46fad7624d.md               |  117 ++
 .../675c91b0c74a72519ebb0a83.md               |   92 ++
 .../675c92e9a6133659ccad5424.md               |   92 ++
 .../675c94decb56d46654acf008.md               |  109 ++
 .../675c9579b10f316b5542b331.md               |  100 ++
 .../675c96e7feed5f75004ea8a4.md               |  115 ++
 .../675c9900820144823ed5b11a.md               |  109 ++
 .../675c9a309dcbc3053601e653.md               |  101 ++
 .../675c9a9d87d492086e1ab3cf.md               |  117 ++
 .../67619dab2031295f7b4dcee1.md               |   96 ++
 .../6761c4698166cd2462c1d685.md               |  178 ++
 .../6761c69821431133f4860640.md               |   70 +
 .../6761ca7cf0fd854c646ebd11.md               |   76 +
 .../6761cae47045b54f50840915.md               |   72 +
 .../6761cb950d555c54150b2212.md               |   74 +
 .../6761e3efbd12c067489c90fe.md               |   82 +
 .../6761e51505b1d96f537b089e.md               |  124 ++
 .../6761e7b82f98fc7fb7d9c06b.md               |  124 ++
 .../6761e90350ebde88221daeea.md               |  125 ++
 .../6761e99e3e0f098cc0f265aa.md               |  124 ++
 .../6761eb2e4b1192968b2303f4.md               |  124 ++
 .../6761ecb48889faa066740143.md               |  106 ++
 .../6761ee00596d9fa8c8c3ac90.md               |  103 ++
 .../6761f0dc81967cbbe1118dae.md               |  113 ++
 .../6761f1e5287834c2cb5f4631.md               |   98 ++
 .../6761f2fbd2db7aca063b6a5c.md               |  106 ++
 .../6761f509323d5ad6cfe9d212.md               |   90 +
 .../6761f66b536d13df9a6e4b87.md               |   84 +
 .../6761f6dc272d86e2f315b79c.md               |  106 ++
 .../6761f838245300ebfcf372cd.md               |   80 +
 .../6761f9d7a849d8f61aa12deb.md               |  119 ++
 .../6762dceeac22841f223b0101.md               |   96 ++
 .../6762e2adb437563844364cf1.md               |  108 ++
 .../6762e430c7646a422c17966f.md               |  104 ++
 .../6762edd89388ad7b3950d01a.md               |  108 ++
 .../6762f11f6a96d19057229bf2.md               |  101 ++
 .../676320cd1c9cee55ab53687a.md               |  113 ++
 .../676321f8a8692b5d4b211dde.md               |  113 ++
 .../67632267336dcf6068f39407.md               |  110 ++
 .../6763238e902cdf688f49152f.md               |   92 ++
 .../6763251d0b7d8872b5543df8.md               |  116 ++
 .../676325dfad1ee0784c7f1a5e.md               |   88 +
 .../6763271c3d195780a672e061.md               |  121 ++
 .../6763285df9a9b6039696c389.md               |   92 ++
 .../67632a419a12aa10b1e76954.md               |  110 ++
 .../67632cefda53f021ab6ecfb4.md               |  100 ++
 .../67632e1b477101295cf2fc77.md               |  119 ++
 .../67632f1219de712fcf37d295.md               |   99 ++
 .../67633077c55c0f38b9166323.md               |  108 ++
 .../6763322b77048c43b92f9c28.md               |  102 ++
 .../67633424bfc56f4fec3edf3c.md               |   98 ++
 .../676335dbbbe14c5acdafc970.md               |  108 ++
 .../676338a796ace16be009e9d6.md               |   89 +
 .../676339b7a8460f7302b2d966.md               |   98 ++
 .../67633a6ff2f2ef78701975c9.md               |  136 ++
 .../67633b012085337c52b93096.md               |   92 ++
 .../67633b85c9f913803fd8591c.md               |  111 ++
 .../67633d331eeb858a9803794f.md               |   97 ++
 .../67634107b478caa17f37c628.md               |   72 +
 .../67634294671bb8ac40e2cc85.md               |   64 +
 .../676342de292eafae91acee29.md               |   64 +
 .../6763432a8c2ae1b0de0e1fc0.md               |   64 +
 .../66c8ffb7c913438ad893dcf2.md               |    2 +-
 .../67325a5443667173c717856f.md               |    2 +-
 .../67325bae5d23157c74091944.md               |    2 +-
 .../67326cb0e9a72b69d6efd417.md               |    2 +-
 .../67326fb4b198b97e4bcf4a69.md               |    2 +-
 .../6732800300eff4f49912e30f.md               |    2 +-
 .../66609a1199ddd03548c45423.md               |  234 ++-
 .../6704f438e6e9120d5a1274c6.md               |  106 ++
 .../6704fbd43885300e4aa221e9.md               |   92 ++
 .../6704fd952ad2560e9a7ca070.md               |  108 ++
 .../6705055b28e3c20fce27a15c.md               |   92 ++
 .../67050a8becee6d10619fa5ff.md               |   92 ++
 .../67050fd29a37de112051064b.md               |   84 +
 .../670515561e620a11f2d7308c.md               |  113 ++
 .../6705177d1d3dbb124955a397.md               |   94 ++
 .../670518bd8ec6f012af235433.md               |   96 ++
 .../67051b185149b6130426a9ad.md               |  114 ++
 .../67053619dd65bd1459449bf0.md               |  148 ++
 .../670538f8565fb514ddf24b85.md               |   92 ++
 .../67053b9fe0a27715979bee1b.md               |   94 ++
 .../67053ea535fe23160e6b29c1.md               |   96 ++
 .../67053faa1471c916446ad615.md               |  116 ++
 .../670541bdd115c71686a398c3.md               |   84 +
 .../6705425a4b3df216cb6de9a7.md               |   94 ++
 .../6705442e6a6ebf1725bc8e1f.md               |  142 ++
 .../6705573e13b1211820a3ac67.md               |  108 ++
 .../67055872382df21871200427.md               |   84 +
 .../67055c02b6774a18f8f7186f.md               |   98 ++
 .../67055d274231051940d0c8ea.md               |   94 ++
 .../67055f5c9bdb8e1999102827.md               |  120 ++
 .../6705605c7fb8f619e0068634.md               |  114 ++
 .../670561a8af3d901a431549fe.md               |  117 ++
 .../670562a2aa92081a89ba77f6.md               |  113 ++
 .../6705638c3791881aed186e9d.md               |   90 +
 .../670564e883b7911b4ec31e29.md               |  134 ++
 .../67056697de96ba1ba012eb44.md               |   60 +
 .../67056b4950144e1cf10c53a6.md               |   64 +
 .../670570ad97d26e1d6bad572d.md               |   66 +
 .../6705725e2814c91dd738e8f4.md               |   66 +
 .../6705742b9616e01e275e5c08.md               |   66 +
 .../67057604ca099f1e7df78e77.md               |   66 +
 .../67057e02da44871f492f6f35.md               |   66 +
 .../670f6ca334a541048d0e9a76.md               |  223 +++
 .../670f71de33e0be053934a9c3.md               |  106 ++
 .../670f74145be4b907a1b9c915.md               |   92 ++
 .../6710bc2f9f242e03ebeccbe9.md               |   92 ++
 .../6710bf5df20df90498c991a2.md               |  106 ++
 .../6710c59075616806206fcf44.md               |   90 +
 .../6710c7bd388290075f19552c.md               |  106 ++
 .../6710e0e2cafeeb09e6cb2d8f.md               |  115 ++
 .../6710e614f70bd10afb6ca7f7.md               |  107 ++
 .../6710ef64fecf900ca5296978.md               |  119 ++
 .../67121364e79da2047818b743.md               |  107 ++
 .../67121be3d5093805dfdbaa71.md               |  108 ++
 .../67121d26052fb606bd59705c.md               |  115 ++
 .../67122e8300d8e90843b04967.md               |  110 ++
 .../67176c867303f30476f3d126.md               |   90 +
 .../6717756d3483e6060d2cd800.md               |  110 ++
 .../671775877ee558061e6eebf8.md               |   90 +
 .../671775a360c128062f906b24.md               |  106 ++
 .../671775bb104def063ffbdaab.md               |   82 +
 .../671775db2ecd44064fdb1f04.md               |   94 ++
 .../671775f2f55c4c066193a1c1.md               |   94 ++
 .../6717760c06f5e10671ef0268.md               |   94 ++
 .../6717b543037e030fc7008aa7.md               |  106 ++
 .../6717b55fb3b4160fd757b7af.md               |  106 ++
 .../6717b5754dcaae0fe7bb179b.md               |   82 +
 .../6717b59830cdb50ff9f67623.md               |  106 ++
 .../6717b5b2b0c1d21009b2b0fd.md               |   94 ++
 .../6717b5c73e81e8101bed0ea2.md               |   96 ++
 .../6717b5dc5fd2c0102b2aacec.md               |  103 ++
 .../6717b5f5be4456103b8ff767.md               |  115 ++
 .../6717b611f1230c104cbf5d38.md               |   90 +
 .../6717b6a5308335105c51cfe6.md               |  106 ++
 .../671d19c62da85c0982472a57.md               |   68 +
 .../671d1f358f62320b707af87f.md               |   62 +
 .../671d1f5590e7110b82940771.md               |   62 +
 .../671d1f7ca5f2aa0bb63b9e22.md               |   62 +
 .../671d1f94461c820bc68e3694.md               |   62 +
 .../671d1fab38a4710bd7a6b9c0.md               |   62 +
 .../671d292ef6180210164c33e8.md               |  196 +++
 .../671f7579f5e0000560fcce55.md               |   94 ++
 .../671f7592e571ad05716b2c67.md               |   90 +
 .../671f75ab41a1520581f5923a.md               |   84 +
 .../671f75ca1748e8059234fa3d.md               |  104 ++
 .../671f75e368cbd505a301ca7d.md               |   94 ++
 .../671f75fea017ea05b31a80c6.md               |   94 ++
 .../671f761703824805c35c2eda.md               |  108 ++
 .../671f765a22e32e05d4f5074e.md               |   94 ++
 .../671f76959b3ca3060eddbe70.md               |  103 ++
 .../671f76b915c1cf062570fdfc.md               |  138 ++
 .../671f76d4b7384c063c097048.md               |  103 ++
 .../671f76eede9f200652954940.md               |   91 ++
 .../671f7708379ef00668b843d4.md               |  119 ++
 .../671f7727d2e4240680c126bc.md               |  143 ++
 .../671f774373f2ce0696fe9621.md               |   98 ++
 .../671f7767854d6806ac4fb5f4.md               |  110 ++
 .../671f77bfcd2bc306c2f6f338.md               |  114 ++
 .../671f77dedcc3b006dcfa9c73.md               |   92 ++
 .../671f7800b5174406f2d0df76.md               |   70 +
 .../671f78193bb0510709b169b8.md               |   62 +
 .../671f7834b9a323071f7a325e.md               |   62 +
 .../671f7852f3a7e80737cc21d0.md               |   62 +
 .../671f786a18c275074d55d298.md               |   62 +
 .../671f788c2665b807636b31a8.md               |   62 +
 .../6746005e0cf96b701d861793.md               |  108 ++
 .../674604ef287b978febd50bc9.md               |   80 +
 .../674605049656269110601a79.md               |   86 +
 .../674609a92ccf079d86cd81db.md               |  110 ++
 .../67460b84234b70a4772d2094.md               |   95 ++
 .../67461094ba7296b13c1bb045.md               |  136 ++
 .../674612ab7e6b0ab83408262a.md               |   86 +
 .../674616565854f7c788740cee.md               |  110 ++
 .../674619b6699a06d064c9717f.md               |   94 ++
 .../67461c06865e13d715967f1d.md               |   89 +
 .../675060b39af6ab3f14f394e2.md               |  142 ++
 .../6750651aafcea04c6958a4e5.md               |   88 +
 .../6750697ee8b87f5e665c0712.md               |   88 +
 .../675846ef3e2e50e95e99aded.md               |   92 ++
 .../6758486d05a8fcf01a20c8b4.md               |  115 ++
 .../67165185a42acc499c6ada3d.md               |    4 +-
 .../6716531210ee374ae822fe83.md               |    2 +-
 .../671655545e5bfc4c3dfe9871.md               |    4 +-
 .../67165855c3dd824eabc1b474.md               |    2 +-
 .../6716593b4f24da4fac3154bf.md               |    4 +-
 .../6717b20b952c096b3dee0834.md               |    6 +-
 .../6717b6aa217d3d6ed6f83e53.md               |    2 +-
 .../6717ba3d37ec4e73a50878da.md               |    4 +-
 .../6717c0dc8b764279dfc9326b.md               |    6 +-
 .../6717c3557815a17d6369a778.md               |    4 +-
 .../671a383a56179f510b83cc1e.md               |   14 +-
 .../671a3c13a3d6b21a1b0008f7.md               |    4 +-
 .../671a3dde9c50241c6c16e331.md               |    4 +-
 .../671a3ed10fd6e81d06dd4690.md               |    4 +-
 .../671a40b415343c1f26e0c005.md               |    2 +-
 .../671a41b8576531207749bdae.md               |    4 +-
 .../671a438ac97103231787ab5a.md               |    4 +-
 .../671a45f9b4ee3325393f0d0b.md               |    4 +-
 .../671a46fe18ae6a26c76f42f6.md               |    8 +-
 .../671a4aeac046082b1bf6335b.md               |    2 +-
 .../671a4e181afe602d37786dd8.md               |   16 +-
 .../671b71da8e1b963c69b6d011.md               |    6 +-
 .../671b769169e38f3fe57b141c.md               |   16 +-
 .../671b77cf9ef25a416449b109.md               |   16 +-
 .../671b7c10cd0d274552e7b686.md               |   18 +-
 .../671b7dd730712747aa2d9974.md               |    8 +-
 .../671f46b8a64a336294268cf6.md               |    2 +-
 .../671f4766b90543639b60a79d.md               |    2 +-
 .../671f47b9343cd364309aa802.md               |    2 +-
 .../671f4c29b6c10a677571c3e9.md               |    2 +-
 .../671f8ab3f5add66eb16be177.md               |    4 +-
 .../671f8cdb0d31cb710d7ad031.md               |    2 +-
 .../671f8e2ca90546729b1911fa.md               |    6 +-
 .../671f92684454b37660c3f82a.md               |    4 +-
 .../671f9ca66765d781de7213f3.md               |    4 +-
 .../671f9e83b440da8486fdf76e.md               |    2 +-
 .../6720cf38beae8c4f1d7af1c0.md               |    6 +-
 .../6720e69c2152da7b9dad577e.md               |    4 +-
 .../6720f18957013d8de8ebbe91.md               |    4 +-
 .../6720f2d525d22693e3fe2a99.md               |    8 +-
 .../6720f45529e496998cced6b6.md               |    4 +-
 .../6720f45ff33dd69a10d14e9d.md               |    4 +-
 .../67278e07d5544c1a93f7f113.md               |    8 +-
 .../67278fa39133d120afee631c.md               |    8 +-
 .../672830d9aa2e0c2ff2fad7f8.md               |    6 +-
 .../672836d6ec0ae23f4724ccb1.md               |    4 +-
 .../6728378c94eaf541fce8f334.md               |    6 +-
 .../67289c4908f407948ef08a55.md               |    4 +-
 .../6728c369d38d3ea6634c1649.md               |    4 +-
 .../6728c6fad8d9caa92837c75f.md               |    2 +-
 .../672a1c6ca33f8115728e7f79.md               |    4 +-
 .../672a1e2fbec6a61bf477ea49.md               |    2 +-
 .../672a21a4b40ed3279d513888.md               |    4 +-
 .../672a296a309d9c46658c071a.md               |    2 +-
 .../672afc3d3758e25087697611.md               |    2 +-
 .../672afe3809d2a55224868ea5.md               |    6 +-
 .../672b25e2a59e2956bca1a42f.md               |    2 +-
 .../672b33b15bd8bf5b2523772a.md               |    6 +-
 .../672b42dafa37fe61e80a2b40.md               |    2 +-
 .../672b4539b9ab5d645e7dcfb8.md               |    6 +-
 .../672b46def9325065dbc7b29f.md               |    4 +-
 .../672b4812ec997567058875da.md               |    4 +-
 .../672b491aa3c094689007baf1.md               |    4 +-
 .../672cca3d15975a9390545877.md               |    2 +-
 .../672ccc988693199500b4cdfd.md               |    4 +-
 .../672dc928d8765dc9f923ca71.md               |    2 +-
 .../672de8ad97d683d3734ce5cd.md               |    2 +-
 .../672debc75e32a8d6e2593eac.md               |    6 +-
 .../672dec93f008b3d8169568e8.md               |    2 +-
 .../672e0ec28d829ee2b5e909f3.md               |    2 +-
 .../672e16bcc0d877e5d3eb7f4e.md               |    2 +-
 .../672e17e63be5dce6ff5b9189.md               |    2 +-
 .../672e1bb0774f2fea953e9388.md               |    6 +-
 .../672e1c3031816ceb9dccc66a.md               |    8 +-
 .../672e1f1a51e86aed84df7c94.md               |    2 +-
 .../672e1fff03af3aeed5d7a84b.md               |    4 +-
 .../672f4b05585d501f533789b4.md               |    4 +-
 .../672f606201263928a06b2a04.md               |    2 +-
 .../672f630337512b2b62595731.md               |    2 +-
 .../672f63cadac41a2c9b1897a1.md               |    2 +-
 .../672f64ba4f91492e1192b829.md               |    2 +-
 .../672f657580a34f2f78e278e2.md               |   10 +-
 .../673de712f2dc6db0cfe76b31.md               |    2 +-
 .../673df0c78bdd11c7195010cb.md               |    6 +-
 .../66b36358ed4f261d64840c24.md               |    2 +-
 .../6718d2d59337c822ecb697ff.md               |    2 +-
 .../66eaddd04a9e533fba689001.md               |    2 +-
 .../66ec4c8e9878d8441956516f.md               |    2 +-
 .../66a207974c806a19d6607073.md               |    2 +-
 .../67172b43f84bcd2dec238a3d.md               |    2 +-
 .../66def5467aee701733aaf8cc.md               |    2 +-
 .../6690e10ebe2181212abc9652.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |   11 +-
 .../66f3f6eb66ea9dc41cdc30df.md               |  210 +++
 .../66bba6fff611169359d9d36a.md               |    2 +-
 .../66f26c32ec6f90df01a44f60.md               |    2 +-
 .../67279fe50237291f80eed8b8.md               |  857 ++++++++++
 .../66f686b8ebdb982fa8e14330.md               |    6 +-
 .../6762ec275cef87635acc4fe3.md               |  543 +++++++
 .../66b205e6eacba4c4e54ea434.md               |    2 +-
 .../66e45c8140f9fda5c105ae26.md               |    2 +-
 .../lab-event-hub/66ebd4ae2812430bb883c787.md |    2 +-
 .../66c07238b01053abaf812065.md               |   15 +-
 .../66bf6bacf178eac7b96d4f5e.md               |    2 +-
 .../673c91f0b934834bc4a3ecc2.md               | 1312 ++++++++-------
 .../66e7ee20b79186306fc12da5.md               |    2 +-
 .../66c06d618d075c7f7f1b890a.md               |    2 +-
 .../66bb6a9c2dd58b73cd759034.md               |    2 +-
 .../66d6a7a3e1aa411e94bf2346.md               |    2 +-
 .../66d75dd0aa65a71600dc669b.md               |    4 +-
 .../66ed41f912d0bb1dc62da5dd.md               |    2 +-
 .../66faac4139dbbd5dd632c860.md               |    5 +-
 .../66c06fad3475cd92421b9ac2.md               |    6 +-
 .../66db57ad34c7089b9b41bfd6.md               |   10 +-
 .../66db529d37ad966480ebb633.md               |    2 +-
 .../6735a7370e0ae93a4577c689.md               |  263 +++
 .../66f55eac933ff64ce654ca74.md               |    2 +-
 .../673b3d6b7ef7318eef926d5a.md               |  278 ++--
 .../66a37f37ef5823a313de8c26.md               |    2 +-
 .../66ba762af611169359d9d369.md               |    2 +-
 .../66be24cb4144f955b6bcc550.md               |    2 +-
 .../657bdc55a322aae1eac3838f.md               |    6 +-
 .../66f53dc2c5bd6a11d6c3282f.md               |  116 ++
 .../66fe4f33a2cc9b33f4d5cd9b.md               |    2 +-
 .../bd7158d8c242eddfaeb5bd13.md               |  652 ++++----
 .../587d78af367417b2b2512b04.md               |    4 +-
 .../67051431a73f1ca25d9a6f25.md               |    2 +-
 .../66f2836c459cfb16ae76f24f.md               |    2 +-
 .../lab-quiz-game/66f17db06803d11a1bd19a20.md |    7 +-
 .../66b62d0ad68488dd76228d6c.md               |    2 +-
 .../66bb3e20d3dc5b6d0a21f5dd.md               |    2 +-
 .../668f08ea07b99b1f4a91acab.md               |    2 +-
 .../66e028680eca7d21db7e1aee.md               |    2 +-
 .../673b02b03134b04637bf7055.md               |  220 +--
 .../66c057041df6394ca796bf33.md               |   22 +-
 .../6716249b5405164036fd0b0d.md               |  599 +++++++
 .../66c051d13a6a20255a963695.md               |  229 +--
 .../587d78af367417b2b2512b03.md               |  153 +-
 .../587d78b0367417b2b2512b05.md               |  180 +-
 .../669e2f60e83c011754f711f9.md               |  196 ++-
 .../bd7158d8c442eddfaeb5bd18.md               |  117 +-
 .../669e81368e52b3a5c35a2dc5.md               |    2 +-
 .../673b567e3ba535dda140d278.md               |  116 +-
 .../66f12a88741aeb16b9246c59.md               |  728 +++++----
 .../672aa8d65995be62ef1c7515.md               |    2 +-
 .../672cf764cf55a70433590def.md               |    2 +-
 .../672aa82768e00d600305afc0.md               |    2 +-
 .../672c35a79fa53e00de9f2a49.md               |   36 +-
 .../672aa8873d4e25618870764f.md               |    2 +-
 .../672cf05c3ad533eabe1e8197.md               |    2 +-
 .../672cf06c8f46f9eb04db9832.md               |    2 +-
 .../672cf07a2b9796eb49719e03.md               |   20 +-
 .../672ac9705b07a64439b73b59.md               |    2 +-
 .../672bb619f0d4538d0528760d.md               |    6 +-
 .../6733aa9b006d29f4d11307a5.md               |   20 +-
 .../6733bec70d86e13522e98a4f.md               |    2 +-
 .../6733becf4b0c353553b9bfa4.md               |    2 +-
 .../6733bee844600f35c05b8264.md               |   18 +-
 .../6733befb703ca6361da3755b.md               |   18 +-
 .../670803abcb3e980233da4768.md               |   34 +-
 .../6708382cf088b216580a9ff1.md               |   20 +-
 .../67083868d5fdcb17bf8c14bd.md               |    2 +-
 .../670838977810401844af6fe0.md               |    2 +-
 .../670838b10ee87a18e5faff62.md               |    2 +-
 .../670838e914096b194b0c51aa.md               |    2 +-
 .../670839051794aa19fcef6dc8.md               |    2 +-
 .../67083952f800051a8a21fcfd.md               |    8 +-
 .../6708396caa00e11b597b3365.md               |   16 +-
 .../672a51e9e4fd8b8552eeb758.md               |    2 +-
 .../672a5310d7e46b8a34d48dfd.md               |    2 +-
 .../672a5326a7606a8a766cbedb.md               |    2 +-
 .../672a533e6041c28ad680eb8f.md               |    2 +-
 .../672a5361ef88158b25fbfba7.md               |    2 +-
 .../672a536f8386288b9ed0a154.md               |    8 +-
 .../672a537f05f3798bd4f57d2d.md               |    2 +-
 .../672a538c029f9e8c1687460e.md               |    2 +-
 .../672a539b887ec68c593cdc4b.md               |    2 +-
 .../672a53ae8f1ad28c8a1ed0f0.md               |    2 +-
 .../672a53cf67140d8cd85d4b0f.md               |    2 +-
 .../672a549231b8728f7171ed9d.md               |    2 +-
 .../672a54a6675c168faa84252d.md               |    2 +-
 .../672a54bc58319c8fe6f78ad4.md               |    2 +-
 .../672a54ce90c19e9038f481d7.md               |    2 +-
 .../672a54dff9dc439089f1a219.md               |    2 +-
 .../672a54f29d783890d1f94740.md               |    2 +-
 .../672a5507d857a891139abc7f.md               |    2 +-
 .../672a551975938a916c74802c.md               |    2 +-
 .../672a55b5c0c14493328fe36e.md               |    2 +-
 .../672a55dd1d86bc939606e204.md               |    2 +-
 .../672a55eb7791559421ff0cd3.md               |    2 +-
 .../672a55fbc2d95a9453151caf.md               |    2 +-
 .../672985445d7da807c6b4f406.md               |   12 +-
 .../6729959bf9c8e835f46b3f78.md               |   16 +-
 .../672995c9e6f69436dbcccc79.md               |   24 +-
 .../672995d673bd3237200b9e7c.md               |    2 +-
 .../672995f16ed97837b365a9f6.md               |    6 +-
 .../6734e3a9cc78faaf4248d335.md               |   38 +-
 .../6734e867bbf41cc5b11648c4.md               |   24 +-
 .../6734e86f590727c5e7e9ec5e.md               |   22 +-
 .../6734e879c78ee6c61db25b90.md               |  109 +-
 .../6734e88cc46e6dc679420040.md               |   55 +-
 .../674ba6876f7ada867135bb95.md               |   98 +-
 .../672d26385dbe73203c4dac81.md               |   10 +-
 .../672d496eca926b5df8176a67.md               |    2 +-
 .../672d497cb1a1675e47bf7ea1.md               |    6 +-
 .../672d49959621885e9d3e672c.md               |    4 +-
 .../672d49a5cf43945ee09e5fba.md               |    2 +-
 .../672d49b2fb76df5f1d6117af.md               |    2 +-
 .../672d49c4e899345f5b33c24c.md               |    8 +-
 .../672d49d93b54b85faa4dbad7.md               |    2 +-
 .../672d49e65a1c855fe7bb3fdb.md               |    4 +-
 .../672aa6441bcd3758e9f52ae0.md               |   36 -
 .../67329fbcfaf5ff5cdaa38a42.md               |    2 +-
 .../67335f45489c5a11b71d0ed5.md               |    2 +-
 .../6733b072bd8f5b06ccdbd9e2.md               |    2 +-
 .../67340798c2c1776709d8a5fe.md               |    2 +-
 .../673407a223891b6734563c89.md               |    2 +-
 .../673407be6af21d6766ed4b96.md               |    2 +-
 .../673407ca21117a67cf9521ca.md               |    2 +-
 .../673407d56c3dce67fa97969b.md               |    6 +-
 .../673407e02bcf0d682b9a49a9.md               |    2 +-
 .../673407eb10ca9d68634e81d9.md               |    2 +-
 .../672d26917a8ab3220c038a42.md               |    2 +-
 .../673282bea35dbf129efb63d6.md               |    4 +-
 .../672aa578a2129554d4675049.md               |    2 +-
 .../672ab82c1a9bbd0e3aabc39d.md               |    2 +-
 .../672ab83c4297910eade53c2e.md               |    2 +-
 .../672ab849aa1ef70eefd29364.md               |    6 +-
 .../672ab8573f32480f192aaae1.md               |    2 +-
 .../67329f9e9eb84e5c6a5e4366.md               |    2 +-
 .../6732c68f4520d160584a6fd2.md               |    2 +-
 .../6732c69d82814160951b1aa7.md               |    2 +-
 .../6732c6ab21031b60d2b0c999.md               |   18 +-
 .../6732c6ba2ea42b610b9f9ce1.md               |    2 +-
 .../6732c6c72d3738614e1230a2.md               |    4 +-
 .../6732c6d4dec34c61850a1276.md               |    2 +-
 .../6732c6e281c14a61c4858361.md               |    2 +-
 .../6733aae9d25004f60d1e86f2.md               |    2 +-
 .../6733d3a33abdd27cd562bdf2.md               |    2 +-
 .../6733d3ab69e94b7df7ee91b0.md               |    2 +-
 .../6733b0451d6be0065430b418.md               |   67 +-
 .../6734061fe116df617a564a37.md               |   48 +-
 .../6733affc29df1304e2c97e88.md               |    2 +-
 .../673403ca2bb16658309e3632.md               |    2 +-
 .../673403d2aa52d8586a14a269.md               |    2 +-
 .../673403dbf5c9835898632c84.md               |    2 +-
 .../672aa86da9937560d3dfe3d6.md               |    2 +-
 .../672c3a84fb8d4613776cc99e.md               |    8 +-
 .../672c3a8fac7c5613b4bb75de.md               |    4 +-
 .../672c3a9d32c56113fcaedf24.md               |    2 +-
 .../672c3aa9bc3a481425cb52b3.md               |    2 +-
 .../67329fd6ad99c75d4a4b74e4.md               |    2 +-
 .../6733b02d1e556005a544c5e3.md               |  136 +-
 .../6732a06aed1b095f57b0bb82.md               |    2 +-
 .../67338e93b75977a344cf6d40.md               |    2 +-
 .../672bafe4ef812b78696b0e27.md               |    2 +-
 .../672baffc684be178dd02fa06.md               |    2 +-
 .../672bb009952c7a7904a750cb.md               |   12 +-
 .../672baad7bbc4f86762ca173e.md               |   16 +-
 .../6734ddabad59e593a49afafe.md               |    2 +-
 .../6734e2c5780912abd874e79c.md               |    2 +-
 .../6734e2dcb965e5ac0ea38e0f.md               |  104 +-
 .../6763500bd5a85d5898cc21a9.md               |  121 ++
 .../672acc03c257524d6a5151e8.md               |   18 +-
 .../672acc100d59d24da7b4e09c.md               |    7 -
 .../672acc3f6f3e3c4e31ec3e12.md               |    2 +-
 .../6708143cab2b583ecd3324f5.md               |  121 ++
 .../67329f508a6ec45b046700b3.md               |   40 +-
 .../6733ab12b60bd7f6b2b0b0c0.md               |   18 +-
 .../6733d8203da84a08a0f5eab4.md               |   26 +-
 .../6733d829d983c008d2db41a1.md               |   20 +-
 .../6733d83630e76f08ff49e6dc.md               |   24 +-
 .../6733d852175df50937f06061.md               |   56 +-
 .../6733d8606fb893099e3d0df3.md               |   18 +-
 .../672b98be592cfb451f651451.md               |    2 +-
 .../672b98cd77b6b7456b6ef2de.md               |    8 +-
 .../672b98db3bcdd545ab3b3c73.md               |   16 +-
 .../6733ab64775d35f78f5238fe.md               |   84 +-
 .../6733ff4a9319c8486750886c.md               |   72 +-
 .../6733ff5814129c48b4fca88e.md               |   78 +-
 .../6733ff6f02dde548ebe4a6d5.md               |   62 +-
 .../6733ff8d06376149474a0c0d.md               |   26 +-
 .../6733ff9d2fb9c449af68ad99.md               |   47 +-
 .../6733ffacd0ad1e49ec2af051.md               |   38 +-
 .../6733ffb59c62ee4a23522efe.md               |   84 +-
 .../6733ffc7353af34a61ed683a.md               |   22 +-
 .../672d45583fd75a504136fbbb.md               |   16 +-
 .../672d266034b5242126271995.md               |    2 +-
 .../67326c0d7bef01c539120766.md               |    2 +-
 .../67326c15b3b2f0c5827927cc.md               |    6 +-
 .../67326c1fdaf9c0c5ad1a2589.md               |    4 +-
 .../67326c29dcd98fc5ecc49779.md               |   25 +-
 .../67326c3392068ec6184a0c95.md               |    2 +-
 .../67326c3c3ab931c644cea05b.md               |   18 +-
 .../672aa8ac4631d1623ec5cd86.md               |    2 +-
 .../673226732b19aa1cacd0a75c.md               |    4 +-
 .../6732267ecab2151ced471cd4.md               |    2 +-
 .../6732268d05c3661d32a0fee8.md               |    2 +-
 .../6732269a7aa2ca1d6b6574fe.md               |    2 +-
 .../673226a62eb2121da41a3d68.md               |    2 +-
 .../673226afcd33991dd751937a.md               |    2 +-
 .../673226b97d4a731e0577ae93.md               |   18 +-
 .../672aa7e03c2e365e906e5733.md               |    2 +-
 .../672bcc8ccc976fd791610f43.md               |    2 +-
 .../672bcc9c4a6dd6d7dd3e6357.md               |    2 +-
 .../672bccae6e556cd81cef6af2.md               |    2 +-
 .../672bccc8ea33bad87abb3c56.md               |    2 +-
 .../672bccdb8f1823d8c60f914c.md               |    2 +-
 .../672bccebe1fc82d911c3f078.md               |    2 +-
 .../672aa8985acb7361e656f94c.md               |   16 +-
 .../672cf3ca326da9f63683e236.md               |    2 +-
 .../6734e3ceee2da4b0301719b7.md               |  128 +-
 .../673500abfe36cd015b67b1b7.md               |   63 +-
 .../673500b41af8500191febedc.md               |   72 +-
 .../673500bfe1f41601c1ddb1a2.md               |   73 +-
 .../672d264645e289208e562f10.md               |    2 +-
 .../6732518a8627876f4fcd18a4.md               |    6 +-
 .../6733aafb9c0802f66cc1e056.md               |    6 +-
 .../6733d608654c17868e01c0a2.md               |    2 +-
 .../672ac37104dc2530a769e6a4.md               |    2 +-
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../672d269da46786225e3fe3fd.md               |    2 +-
 .../673284d5e52ef81a2169b097.md               |    4 +-
 .../673284e7244c0c1a649121b9.md               |    4 +-
 .../67329ffd75010f5ddeb4ea13.md               |    2 +-
 .../67336296a3c1591da81856c2.md               |    2 +-
 .../673362a34edda41dedf87623.md               |    4 +-
 .../673362b3f763ae1e38e17df7.md               |    2 +-
 .../673362be2f70c21e65bc5459.md               |    2 +-
 .../673362cbb475e21eab726506.md               |    4 +-
 .../673362d7f94d551edb532d24.md               |    2 +-
 .../673362e43d57b51f1ad2d466.md               |    2 +-
 .../672a4fa7d335bc7cfb63a392.md               |   22 +-
 .../6716744f7245947a3dd60009.md               |    2 +-
 .../671682dd88e461a8e2620f38.md               |    2 +-
 .../6716830dbaf95da9564f2e3b.md               |    8 +-
 .../67168323932391a9ee0d3a9e.md               |    8 +-
 .../67329f7f3d1bd75c17896c66.md               |    2 +-
 .../6732c04638420641dcca2e6e.md               |    2 +-
 .../6732c05595ca7d422b9e55ff.md               |    2 +-
 .../6732c06654ea3442724284fe.md               |    2 +-
 .../6732c07238355642a9781dfb.md               |    2 +-
 .../6733ab269b378bf724c9ac71.md               |    2 +-
 .../6733dd694f91d61a5272b4ac.md               |    2 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../67167835def3588873f339c6.md               |   12 +-
 .../6716823876aa22a68ba3e2ec.md               |   28 +-
 .../6716825aff3434a71fdc3e99.md               |   18 +-
 .../67168278ac6df6a799555db5.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../672d26809d388621ad1ecd43.md               |    2 +-
 .../6732808f3221720adc833e81.md               |    4 +-
 .../673280a1c29d0a0b17316e56.md               |    2 +-
 .../672d266e014ef8216df987d2.md               |    2 +-
 .../673271884bf678d8b9c64f56.md               |   72 +-
 .../67327195e77b1bd90bdd49d7.md               |   64 +-
 .../6732719e2e3ad4d947410b65.md               |    2 +-
 .../673271a8998ddfd97578d095.md               |    4 +-
 .../673271b4213033d9b661c70e.md               |    2 +-
 .../673271c7581a27d9dd78f6d6.md               |    4 +-
 .../673271dffbc34fda31da9515.md               |    2 +-
 .../673271e8e3d43bda89f723b3.md               |    2 +-
 .../673271f39f124ddac28866d5.md               |    2 +-
 .../673271fd11d063daf0cf8d20.md               |    4 +-
 .../6732720e95f6a0db526a2e4d.md               |    2 +-
 .../67327217e70ee0db7913b255.md               |    4 +-
 .../67329f737126b75bcb949e13.md               |    2 +-
 .../6732b721eb98f224868b44a6.md               |    2 +-
 .../6732b72961f94324bd6390de.md               |    2 +-
 .../6732b73509f71f24ef05e86e.md               |    2 +-
 .../6732b73d25cc01251b778043.md               |    2 +-
 .../6732b749b8aad125523dcda5.md               |    2 +-
 .../6732b758194c97257d23fc72.md               |    2 +-
 .../6732b76c03f7d825c7fc74ee.md               |    2 +-
 .../6732b77adf9de12617a2dbb3.md               |    2 +-
 .../6732b788046862264eeb1c39.md               |    2 +-
 .../6732b79c6aa77826855a3f11.md               |    2 +-
 .../6733aad43b3ebff588a26fb5.md               |    2 +-
 .../6733c5ba834ded4bb067e67c.md               |    4 +-
 .../6733c5c549775c4be710237c.md               |    4 +-
 .../6733c5d0048bb74c18431296.md               |  112 +-
 .../6733c5dc74176e4c496d09e6.md               |   68 +-
 .../6733c5e54e3a154c8078ed48.md               |   96 +-
 .../6733c5f20cc9584cada942a4.md               |  115 +-
 .../672d2654f78cbf20e0ba4501.md               |   18 +-
 .../673263d58da27ea7809963bf.md               |    2 +-
 .../673263df0eb568a7b450f2fc.md               |    2 +-
 .../673263e80dd43da7df3ae565.md               |    4 +-
 .../673263f4a5899da8124542fd.md               |    2 +-
 .../6732a0472f52015e511f8e58.md               |    2 +-
 .../67336894ae148431a870694d.md               |    2 +-
 .../6733689f9f31dd31e7d9c789.md               |    2 +-
 .../673368b1cf26253212a3cfb2.md               |    2 +-
 .../673368c0161e6b326a7e03f0.md               |    2 +-
 .../673368ccf52205329b729378.md               |    2 +-
 .../673368d97e8ce232cdcd6b68.md               |    2 +-
 .../673368e7bd043f331919514d.md               |    4 +-
 .../673368f272706633516e4873.md               |    2 +-
 .../673368fbe12a2b337645053d.md               |    2 +-
 .../673369067f824d33a90a0534.md               |    2 +-
 .../673369101e5c4a33db0e8a02.md               |    2 +-
 .../6733691d88e3053414689276.md               |    2 +-
 .../6733692ffe1da034469f7917.md               |   10 +-
 .../6733693bfce9a43489a355db.md               |    2 +-
 .../6733694805a85d34ced08a9b.md               |    2 +-
 .../67336956340e8a34fbd5d9f3.md               |    2 +-
 .../6733696567d2273540aa6033.md               |    2 +-
 .../6733697661182d357fc643d2.md               |    2 +-
 .../673369829e232835c2732656.md               |    2 +-
 .../66ed8fa2f45ce3ece4053eab.md               |   10 +-
 .../66df3b712c41c499e9d31e5b.md               |   50 +-
 .../66ed8fd0f45ce3ece4053eaf.md               |    4 +-
 .../66ed8fd7f45ce3ece4053eb0.md               |   36 +-
 .../66ed9009f45ce3ece4053eb7.md               |   68 +-
 .../66ed9010f45ce3ece4053eb8.md               |    8 +-
 .../66edd10913f078e7669eca81.md               |    2 +-
 .../66ed901ff45ce3ece4053eba.md               |   40 +-
 .../66edd3403d7077eece6dc4b6.md               |    2 +-
 .../quiz-git/66f1b06a5a5d10cc100af620.md      |    8 +-
 .../66ed9026f45ce3ece4053ebb.md               |    4 +-
 .../66ed902df45ce3ece4053ebc.md               |  244 +--
 .../67358ac128957c865dcf3ddf.md               |    2 +-
 .../66edcd0ecb4b25dc64a34804.md               |   18 +-
 .../66edd3011f18f4ee1bd9d28b.md               |    4 +-
 .../66edc31c44f1b9c1d5c5ebca.md               |   24 +-
 .../66edc25ae5ea80bf6f785552.md               |   94 +-
 .../66ed903cf45ce3ece4053ebe.md               |    4 +-
 .../66ed9043f45ce3ece4053ebf.md               |   12 +-
 .../671a887a7e62c75e9ab1ee4a.md               |   20 +-
 .../67072fc183c7ca6c588feb4d.md               |    9 +-
 .../671a955b74ab5588735800d1.md               |    2 +-
 .../671a88d636cebc5fbd407b78.md               |   17 +-
 .../671a940c69cdee833d4cc312.md               |    4 +-
 .../671a907bad4538752765f2ff.md               |    2 +-
 .../review-css/671a9a0a140c2b9d6a75629f.md    |   10 +-
 .../6723cd54fc196dbd053f9dfb.md               |    4 +-
 .../6723cc7a8e7aa3b9befd4bac.md               |    2 +-
 .../6723ce555ff2dfc0cc04b69a.md               |    4 +-
 .../671a87a39b88245a579c2271.md               |   38 +-
 .../review-html/671a883163d5ab5d47145880.md   |  151 +-
 .../6723c66f623701a3cdf72130.md               |    2 +-
 .../6723cf27c6e9a0c3f3041385.md               |   10 +-
 .../6723cc0ca05ce9b87a319ceb.md               |    2 +-
 .../6723c463e51a2d9b747d7529.md               |    2 +-
 .../6723cdfa4ae237bf6b7e32eb.md               |    8 +-
 .../6723c1946e4cd7909a836bb4.md               |    2 +-
 .../6723be264695fb7e619fe1fa.md               |    6 +-
 .../6723d3cfdd0717d3f1bf27e3.md               |   44 +-
 .../6723d0ac516099c902394e8b.md               |    4 +-
 .../67487e141bb6a7140a352e12.md               |    2 +-
 .../671a83934b61f64cefe87a61.md               |   12 +-
 .../5f35e5c4321f818cdc4bed30.md               |    2 +-
 .../63b61490e633a22b4593e62f.md               |    2 +-
 .../63c9e8fe3a6f022a05a04675.md               |  198 ++-
 .../660404511dbf1b90eb23b617.md               |    4 +-
 .../6604080b66ff6e942d8225b1.md               |    4 +-
 .../66040ae710de0e96c26a0201.md               |    2 +-
 .../646c48df8674cf2b91020ecc.md               |    2 +-
 .../646ceb843412c74edee27a79.md               |   16 +-
 .../646cf2249f02ca5233d9af7c.md               |    8 +-
 .../6676a8b01e56ec1a1e07c202.md               |   16 +-
 .../5dc174fcf86c76b9248c6eb2.md               |    8 +-
 .../5dc24614f86c76b9248c6ebd.md               |    2 +-
 .../5dfa37b9eacea3f48c6300b0.md               |    3 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../61764c602bee6974e7790f35.md               |    2 +-
 .../617bbb6b97a83f6d1f7d6e38.md               |    2 +-
 .../61a49d15bdbb5e57cc6fd280.md               |    2 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 .../6733319f1d586b1923e029e3.md               |    6 +-
 .../673332a6b63f9f1e1f81ba9b.md               |    6 +-
 .../673337337f794d3025ded433.md               |    2 +-
 .../66a9401c9d660d6bb15993e2.md               |    2 +-
 .../67116d7584d0b469b14579bf.md               |    2 +-
 .../67116d7584d0b469b14579c1.md               |   50 +-
 .../67116d7584d0b469b14579c2.md               |   54 +-
 .../67116d7584d0b469b14579c3.md               |   29 +-
 .../67116d7584d0b469b14579c4.md               |   32 +-
 .../66c8ba975ee7230e29f6c4ad.md               |    4 +-
 .../67471d60ce8e6268fe9e12f6.md               |  604 +++++++
 .../6747237371f13173c9f6c27e.md               |  591 +++++++
 .../674724ff8af92f7733e6d980.md               |  585 +++++++
 .../6747257cdf5412781e138bb2.md               |  619 +++++++
 .../6747274264e8a5799fb3e0b5.md               |  626 +++++++
 .../674728eda5829d7b4c360643.md               |  629 +++++++
 .../6747299cbed5107c6a00d64c.md               |  656 ++++++++
 .../67472ab9f570797dbb01568a.md               |  656 ++++++++
 .../67472eef7b4b7ba77b50929b.md               |  664 ++++++++
 .../67473042e8751eac62fafc82.md               |  661 ++++++++
 .../674735e3b28351b8b8f05807.md               |  709 ++++++++
 .../674757668684f9deaa6ac3c0.md               |  676 ++++++++
 .../674836ba82e9057dfee1849c.md               |  690 ++++++++
 .../674850b437668dd08edddbe2.md               |  687 ++++++++
 .../6748567229cc8fe3f706de02.md               |  698 ++++++++
 .../6748bab9827a356c39559214.md               |  707 ++++++++
 .../674dda6c6ae8bb538678e125.md               |  671 ++++++++
 .../674de4ee2039496c30a31b71.md               |  693 ++++++++
 .../674e2e4e04eb381ccfe92e15.md               |  708 ++++++++
 .../674e305b7bda7c1f4f37a930.md               |  719 ++++++++
 .../674e316e3892d32108ad2bb9.md               |  692 ++++++++
 .../674e34c42ee8f1237e4623cc.md               |  712 ++++++++
 .../674f489bf617af2bea9b92b5.md               |  729 +++++++++
 .../674f50cce486fb404751a29c.md               |  729 +++++++++
 .../674f534fa181f64a789ffcf9.md               |  787 +++++++++
 .../67503cecd563135d4f27b38e.md               |  729 +++++++++
 .../675057ce9acd418619127da4.md               |  746 +++++++++
 .../67505d3a32d45997d2af4c0f.md               |  770 +++++++++
 .../675069b67b8267b36fa550b3.md               |  738 +++++++++
 .../6750712ee950facad5edc203.md               |  727 +++++++++
 .../67516a431252ed30832fa7c6.md               |  727 +++++++++
 .../67516ca9b7fe6636208c5ab5.md               |  726 +++++++++
 .../67516e888477083c31614dc7.md               |  743 +++++++++
 .../67517ef2fae05b65108212db.md               |  754 +++++++++
 .../6751d5d32e58d065652e26a5.md               |  747 +++++++++
 .../6751e1c117350b7d3f356e1b.md               |  749 +++++++++
 .../6752c62efa90554c01415e7b.md               |  768 +++++++++
 .../6752ecd811c96d5dc33ae853.md               |  760 +++++++++
 .../6752edba757ff96404faf9e9.md               |  769 +++++++++
 .../675304e7937e62902e08a3ab.md               |  764 +++++++++
 .../675309b2795c2a9ae03b8812.md               | 1442 +++++++++++++++++
 .../67532282ab9b95d7083617ee.md               |  795 +++++++++
 .../675340b809683f45cae96539.md               |  736 +++++++++
 .../6757f2b25418da4f73e29eb6.md               |  760 +++++++++
 .../6758a61fc7e949923716ec41.md               |  690 ++++++++
 .../67594f37fa0c684835f1b064.md               |  696 ++++++++
 .../673339d96c56d36e963e888e.md               |    2 +-
 .../6733b5632fb854bc6c58dc0d.md               |    2 +-
 .../6733b5e6f210c1bd1afdf8b3.md               |    2 +-
 .../67349ba230cff237c0f2bdf2.md               |    2 +-
 .../67349d6e726b2c3c7f7301e8.md               |    2 +-
 .../6734a13a29acdf47f2b8e161.md               |    2 +-
 .../6734a2385c52c54d916a8b86.md               |    2 +-
 .../6734a606e5968a5a19b77171.md               |    4 +-
 .../6734a772196245601e4b80e0.md               |    2 +-
 .../6734ab61e916486c80c490d1.md               |    2 +-
 .../6734b36f1a3ce17e73327f24.md               |    2 +-
 .../6734bbc0bd741598f942352e.md               |    2 +-
 .../6734c10a327760a665b7d5b9.md               |    2 +-
 .../6734eee1f9498cd90f9ae340.md               |    2 +-
 .../6734f0ae9d1cf4dfd43a7805.md               |    2 +-
 .../6734f6290ebd5cfbc75996af.md               |    2 +-
 .../6734fa225c6667121e589f7e.md               |    2 +-
 .../67350acfd2006f2777295b96.md               |    2 +-
 .../67351225403acd3d6f70ed6d.md               |    2 +-
 .../6735145b0ee741461bdbaa49.md               |    2 +-
 .../673521668be7905059b2d555.md               |    2 +-
 .../673529d08c0d9c5a4193a465.md               |    2 +-
 .../673762590f4bc1771c3a1e97.md               |    2 +-
 .../673788448f390305b34aa814.md               |    2 +-
 .../6737a1a073a0d14c6544d301.md               |    2 +-
 .../6737a5058ff3015829ce3265.md               |    2 +-
 .../6737a95d5b431860f96ca7bb.md               |    2 +-
 .../6737ac8e4fe7ae6b91c806bd.md               |    2 +-
 .../6737c6d5d66b5cc3dac09c7b.md               |    2 +-
 .../6738a5c704680355e29e077c.md               |    2 +-
 .../6738a8035efec45acd8fdbf9.md               |    2 +-
 .../6738ad2fd11775752d23ddc2.md               |    2 +-
 .../67353fb237ffbd01af3be1cc.md               |   36 +-
 .../673540f6e49ae33d6a235c20.md               |    8 +-
 .../673542088e459b6def5d6e56.md               |    8 +-
 .../6735424ecfeb557d81dcc9d1.md               |   18 +-
 .../673543d867b44ac7580610a2.md               |   44 +-
 .../6740495ba48aa94e5667b436.md               |    1 +
 .../6745d9df333efe2543a1f457.md               |    4 +-
 .../674ef11f75254548672d998c.md               |  125 ++
 .../674ef2d357676e50e4691658.md               |  116 ++
 .../674ef2d357676e50e4691659.md               |  166 ++
 .../674ef2d357676e50e469165a.md               |  117 ++
 .../674ef2d357676e50e469165b.md               |  126 ++
 .../674ef2d357676e50e469165c.md               |  144 ++
 .../674ef2d357676e50e469165d.md               |  265 +++
 .../66cf33305293e1b35c1aef7f.md               |    2 +-
 .../66e2d680e129e1423116a541.md               |    2 +-
 .../66e2e5d890ac8a54c9d703bd.md               |    2 +-
 .../66e2eab8a5638f57b637b7cc.md               |    2 +-
 .../66e2f06b191e305c00574e4d.md               |   10 +-
 .../66c742d045c9fc2e09fa64b1.md               |    1 +
 .../66c748ffdfbe4f2ede268be2.md               |    6 +-
 .../671fafbae959c048d82bac8d.md               |    6 +-
 .../64fad9cd2eeb1e7ca2ca8c8b.md               |    4 +-
 .../64ff04cc33779427a6412449.md               |    2 +-
 ...thms-and-data-structures-certification.yml |    2 +-
 ...s-and-data-structures-certification-v8.yml |    2 +-
 .../add-a-negative-margin-to-an-element.md    |    4 +-
 .../add-borders-around-your-elements.md       |   25 +-
 ...rent-margins-to-each-side-of-an-element.md |   16 +-
 ...rent-padding-to-each-side-of-an-element.md |   16 +-
 .../add-rounded-corners-with-border-radius.md |   19 +-
 .../adjust-the-margin-of-an-element.md        |    4 +-
 .../adjust-the-padding-of-an-element.md       |    4 +-
 ...tach-a-fallback-value-to-a-css-variable.md |   12 +-
 .../change-a-variable-for-a-specific-area.md  |    8 +-
 .../basic-css/change-the-color-of-text.md     |    6 +-
 .../change-the-font-size-of-an-element.md     |    2 +-
 .../basic-css/create-a-custom-css-variable.md |    4 +-
 ...ive-a-background-color-to-a-div-element.md |    8 +-
 .../basic-css/import-a-google-font.md         |   24 +-
 ...ve-compatibility-with-browser-fallbacks.md |   10 +-
 .../basic-css/inherit-css-variables.md        |    5 +-
 .../inherit-styles-from-the-body-element.md   |   44 +-
 ...ke-circular-images-with-a-border-radius.md |    6 +-
 ...ide-all-other-styles-by-using-important.md |   18 +-
 ...s-declarations-by-styling-id-attributes.md |   16 +-
 ...e-class-declarations-with-inline-styles.md |   12 +-
 .../override-styles-in-subsequent-css.md      |   10 +-
 .../prioritize-one-style-over-another.md      |    8 +-
 .../set-the-font-family-of-an-element.md      |    9 +-
 .../basic-css/set-the-id-of-an-element.md     |    2 +-
 .../basic-css/size-your-images.md             |   15 +-
 .../specify-how-fonts-should-degrade.md       |   18 +-
 ...tyle-multiple-elements-with-a-css-class.md |   24 +-
 .../basic-css/style-the-html-body-element.md  |   13 +-
 ...derstand-absolute-versus-relative-units.md |   15 +-
 .../use-a-css-class-to-style-an-element.md    |   10 +-
 .../basic-css/use-a-custom-css-variable.md    |   24 +-
 .../use-a-media-query-to-change-a-variable.md |   12 +-
 .../basic-css/use-abbreviated-hex-code.md     |   24 +-
 ...use-an-id-attribute-to-style-an-element.md |   15 +-
 ...e-attribute-selectors-to-style-elements.md |   40 +-
 ...ion-to-specify-the-margin-of-an-element.md |   23 +-
 ...on-to-specify-the-padding-of-an-element.md |   23 +-
 .../use-css-selectors-to-style-elements.md    |   25 +-
 ...bles-to-change-several-elements-at-once.md |   12 +-
 .../use-hex-code-for-specific-colors.md       |   10 +-
 .../basic-css/use-hex-code-to-mix-colors.md   |   25 +-
 .../basic-css/use-rgb-to-mix-colors.md        |   40 +-
 .../use-rgb-values-to-color-elements.md       |    6 +-
 .../add-a-submit-button-to-a-form.md          |   21 +-
 .../add-images-to-your-website.md             |   15 +-
 .../add-placeholder-text-to-a-text-field.md   |   17 +-
 ...radio-buttons-and-checkboxes-by-default.md |    4 +-
 .../basic-html-and-html5/comment-out-html.md  |   16 +-
 .../create-a-bulleted-unordered-list.md       |   22 +-
 .../create-a-form-element.md                  |   18 +-
 .../create-a-set-of-checkboxes.md             |   18 +-
 .../create-a-set-of-radio-buttons.md          |   33 +-
 .../create-a-text-field.md                    |    2 +-
 .../create-an-ordered-list.md                 |   42 +-
 ...declare-the-doctype-of-an-html-document.md |    6 +-
 ...e-the-head-and-body-of-an-html-document.md |   14 +-
 .../delete-html-elements.md                   |    7 +-
 ...fill-in-the-blank-with-placeholder-text.md |    2 +-
 .../headline-with-the-h2-element.md           |   14 +-
 .../inform-with-the-paragraph-element.md      |   10 +-
 .../introduction-to-html5-elements.md         |   20 +-
 ...-to-external-pages-with-anchor-elements.md |   10 +-
 ...sections-of-a-page-with-anchor-elements.md |   20 +-
 .../make-dead-links-using-the-hash-symbol.md  |    2 +-
 ...st-an-anchor-element-within-a-paragraph.md |   51 +-
 ...ny-elements-within-a-single-div-element.md |   18 +-
 .../say-hello-to-html-elements.md             |    2 +-
 .../turn-an-image-into-a-link.md              |   16 +-
 .../basic-html-and-html5/uncomment-html.md    |   10 +-
 .../use-html5-to-require-a-field.md           |    2 +-
 ...ibute-with-radio-buttons-and-checkboxes.md |   33 +-
 ...add-flex-superpowers-to-the-tweet-embed.md |   74 +-
 ...elements-using-the-align-items-property.md |    4 +-
 ...ents-using-the-justify-content-property.md |    5 +-
 ...y-to-create-a-column-in-the-tweet-embed.md |   63 +-
 ...perty-to-create-rows-in-the-tweet-embed.md |   57 +-
 .../use-display-flex-to-position-two-boxes.md |    4 +-
 ...align-items-property-in-the-tweet-embed.md |   63 +-
 .../use-the-align-self-property.md            |    8 +-
 ...erty-to-set-the-initial-size-of-an-item.md |   12 +-
 ...lex-direction-property-to-make-a-column.md |    4 +-
 ...e-flex-direction-property-to-make-a-row.md |    4 +-
 ...-the-flex-grow-property-to-expand-items.md |    8 +-
 .../use-the-flex-shorthand-property.md        |   28 +-
 ...he-flex-shrink-property-to-shrink-items.md |    8 +-
 ...x-wrap-property-to-wrap-a-row-or-column.md |    4 +-
 ...ify-content-property-in-the-tweet-embed.md |   66 +-
 ...e-the-order-property-to-rearrange-items.md |    8 +-
 .../add-columns-with-grid-template-columns.md |   31 +-
 .../css-grid/add-gaps-faster-with-grid-gap.md |   33 +-
 .../add-rows-with-grid-template-rows.md       |   33 +-
 ...-items-horizontally-using-justify-items.md |   33 +-
 ...-all-items-vertically-using-align-items.md |   31 +-
 ...an-item-horizontally-using-justify-self.md |   27 +-
 ...ign-an-item-vertically-using-align-self.md |   24 +-
 ...eate-a-column-gap-using-grid-column-gap.md |   33 +-
 .../create-a-row-gap-using-grid-row-gap.md    |   31 +-
 ...create-flexible-layouts-using-auto-fill.md |   47 +-
 .../create-flexible-layouts-using-auto-fit.md |   36 +-
 .../css-grid/create-grids-within-grids.md     |   23 +-
 .../css-grid/create-your-first-css-grid.md    |   28 +-
 .../divide-the-grid-into-an-area-template.md  |   67 +-
 ...mit-item-size-using-the-minmax-function.md |   33 +-
 ...grid-areas-using-the-grid-area-property.md |   35 +-
 ...ce-repetition-using-the-repeat-function.md |   33 +-
 ...-to-change-the-size-of-columns-and-rows.md |   33 +-
 ...area-without-creating-an-areas-template.md |   36 +-
 .../use-grid-column-to-control-spacing.md     |   47 +-
 .../use-grid-row-to-control-spacing.md        |   45 +-
 ...ia-queries-to-create-responsive-layouts.md |   65 +-
 .../create-a-media-query.md                   |   45 +-
 .../make-an-image-responsive.md               |   42 +-
 .../make-typography-responsive.md             |   40 +-
 ...na-image-for-higher-resolution-displays.md |   31 +-
 .../build-a-25-5-clock.md                     |    2 +-
 .../build-a-drum-machine.md                   |    2 +-
 .../build-a-javascript-calculator.md          |    2 +-
 .../build-a-markdown-previewer.md             |    2 +-
 .../build-a-random-quote-machine.md           |    2 +-
 ...t-json-with-the-javascript-fetch-method.md |    2 +
 .../exercise-tracker.md                       |   64 +-
 .../build-a-budget-app-project/budget-app.md  |  352 ++++
 .../build-a-personal-portfolio-webpage.md     |   75 +-
 .../build-a-product-landing-page.md           |    2 +-
 .../build-a-survey-form.md                    |  240 +--
 .../build-a-technical-documentation-page.md   |  170 +-
 .../build-a-tribute-page.md                   |  104 +-
 .../613e2546d0594208229ada50.md               |    4 +-
 .../613e275749ebd008e74bb62e.md               |    2 +-
 .../614202874ca576084fca625f.md               |   30 +-
 .../614394fb41985e0d2012a93e.md               |    2 +-
 .../6145e8b5080a5f06bb0223d0.md               |   38 +-
 .../6145fc3707fc3310c277f5c8.md               |    2 +-
 .../614796cb8086be482d60e0ac.md               |    2 +-
 .../614878f7a412310647873015.md               |   12 +-
 .../614883b6fa720e09fb167de9.md               |   12 +-
 .../6148dfab9b54c110577de165.md               |   16 +-
 .../5f332b23c2045fb843337579.md               |   10 +-
 .../5f344fad8bf01691e71a30eb.md               |   10 +-
 .../5f35e5c44359872a137bd98f.md               |    2 +-
 .../5f3c866d0fc037f7311b4ac8.md               |    2 +-
 .../5f3c866d28d7ad0de6470505.md               |    2 +-
 .../5f3cade99dda4e6071a85dfd.md               |    8 +-
 .../5f3ef6e01f288a026d709587.md               |    4 +-
 .../5f3ef6e03d719d5ac4738993.md               |    2 +-
 .../5f3ef6e050279c7a4a7101d3.md               |    2 +-
 .../5f3ef6e056bdde6ae6892ba2.md               |    8 +-
 .../5f3ef6e0f8c230bdd2349716.md               |   14 +-
 .../5f46e36e745ead58487aabf2.md               |    2 +-
 .../5f4701b942c824109626c3d8.md               |    6 +-
 .../5f76967fad478126d6552b0d.md               |    2 +-
 .../6140cbeec34e970dfe75e710.md               |    8 +-
 .../617ace7d831f9c16a569b38a.md               |    2 +-
 .../616d47bc9eedc4bc7f621bec.md               |   10 +-
 .../61764f7e5240eb7ccc7f6a0a.md               |    6 +-
 .../617b65579ce424bf5f02ca73.md               |    2 +-
 .../617b8b38f32bf2080a140675.md               |    4 +-
 .../617bb5624a75e86463b7e638.md               |    6 +-
 .../618a16873520a8d088ffdf44.md               |    2 +-
 .../61adc60b69cd4b87739d2174.md               |    2 +-
 .../61b092eb9e7fc020b43b1bb2.md               |    4 +-
 .../61b09f739aa6572d2064f9b8.md               |    4 +-
 .../61b0a1b2af494934b7ec1a72.md               |    4 +-
 .../61b3183655ec10efd8c0bb07.md               |    8 +-
 .../61537d86bdc3dd343688fceb.md               |   20 +-
 .../6153893900438b4643590367.md               |    2 +-
 .../6153938dce8b294ff8f5a4e9.md               |    4 +-
 .../6143a778bffc206ac6b1dbe3.md               |    6 +-
 .../6144de308591ec10e27d5383.md               |    4 +-
 .../6148d94fdf6a5d6899f8ff15.md               |    4 +-
 .../614e0e588f0e8a772a8a81a6.md               |    4 +-
 .../6199429802b7c10dc79ff871.md               |    8 +-
 .../619c155df0063a0a3fec0e32.md               |   14 +-
 .../619d05c54dabca0b10058235.md               |    2 +-
 .../619d1e7a8e81a61c5a819dc4.md               |    4 +-
 .../619d333b738e3c2b5d58b095.md               |    2 +-
 .../5d822fd413a79914d39e98ca.md               |   14 +-
 .../5d822fd413a79914d39e98d7.md               |    8 +-
 .../5d822fd413a79914d39e98dc.md               |    8 +-
 .../5d822fd413a79914d39e98e3.md               |    2 +-
 .../5d822fd413a79914d39e98e9.md               |   12 +-
 .../5d822fd413a79914d39e98ee.md               |    6 +-
 .../5d822fd413a79914d39e98f0.md               |   12 +-
 .../5d822fd413a79914d39e98f5.md               |    2 +-
 .../5d822fd413a79914d39e98fa.md               |    2 +-
 .../5d822fd413a79914d39e9903.md               |    2 +-
 .../5d822fd413a79914d39e9915.md               |    6 +-
 .../5d822fd413a79914d39e991a.md               |    8 +-
 .../5d822fd413a79914d39e9927.md               |    4 +-
 .../5d822fd413a79914d39e992c.md               |    6 +-
 .../5d822fd413a79914d39e9939.md               |    2 +-
 .../5d822fd413a79914d39e993e.md               |   12 +-
 .../5dc174fcf86c76b9248c6eb2.md               |    8 +-
 .../671141d8e32fe934c26fa1be.md               |    6 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../60f027c87bc98f050395c139.md               |    6 +-
 .../60f8618d191b940d62038513.md               |    6 +-
 .../60fac4095512d3066053d73c.md               |    8 +-
 .../60fc219d333e37046f474a6e.md               |    6 +-
 .../60ffefd6479a3d084fb77cbc.md               |    2 +-
 .../646c48df8674cf2b91020ecc.md               |    2 +-
 .../646ceb843412c74edee27a79.md               |   16 +-
 .../646dec359bef3b7811fba5a6.md               |    2 +-
 .../646f107abb89d00bb99f387a.md               |    2 +-
 .../61fd9ad665a4a282c8106be3.md               |    2 +-
 .../61fd9b7285bde783ad5b8aac.md               |   22 +-
 .../61fdac1e31692f9a9ad97295.md               |    2 +-
 .../61fdb04d9939f0a26ca51c2b.md               |    2 +-
 .../612e813b3ba67633222cbe54.md               |   14 +-
 .../612e8279827a28352ce83a72.md               |    8 +-
 .../612e9f1e7e5ccd4fa9ada0be.md               |    4 +-
 .../60a3e3396c7b40068ad6996b.md               |   16 +-
 .../60a3e3396c7b40068ad69973.md               |    4 +-
 .../60a3e3396c7b40068ad69978.md               |    8 +-
 .../60a3e3396c7b40068ad6997d.md               |    6 +-
 .../60a3e3396c7b40068ad69984.md               |    2 +-
 .../60a3e3396c7b40068ad6998a.md               |    4 +-
 .../60a3e3396c7b40068ad6998f.md               |    6 +-
 .../60a3e3396c7b40068ad69991.md               |    4 +-
 .../60a3e3396c7b40068ad69997.md               |    6 +-
 .../615f3e1b7233ee5c7595771f.md               |    2 +-
 .../615f7e7281626a92bbd62da8.md               |   10 +-
 .../615f887466db4ba14b5342cc.md               |    8 +-
 .../615f89e055040ba294719d2f.md               |    2 +-
 .../build-a-palindrome-checker.md             |    8 +-
 .../6352fcb156834128001ea945.md               |    6 +
 .../65aac0678d51b3f1a0cb8061.md               |    2 +-
 .../644b6d20eabd7e0149383254.md               |    2 +-
 .../660ae8ad1475698da3c3c37d.md               |   37 +
 .../660aea8782242e8f4bcc42d8.md               |   39 +
 .../63c9e8fe3a6f022a05a04675.md               |  162 +-
 .../64496d80bc174a158c973080.md               |   51 +-
 .../660f280dda5040f707c76b4a.md               |    6 +
 .../64fad9cd2eeb1e7ca2ca8c8b.md               |    4 +-
 .../64ff04cc33779427a6412449.md               |    2 +-
 .../657e230500602983e01fff6e.md               |   42 +-
 ...lem-462-permutation-of-3-smooth-numbers.md |    4 +-
 .../657b05367b59300bcb5f18ef.md               |    5 +-
 .../657b068e28a3bd135ced0042.md               |    8 +-
 .../657b190c4e736f5c4005b132.md               |    2 +-
 .../657b1ae0c2fb4c64071ade7a.md               |    2 +-
 .../657b23ad0df43588a6eadfa4.md               |    6 +-
 .../657b24e5edd7708e93549565.md               |    2 +-
 .../657b69e10d6606a0185d4d4f.md               |   12 +-
 .../657b6f641e5c3ab1afc6efc1.md               |    2 +-
 .../657b70cc934e0ab83cab4dbe.md               |    2 +-
 .../657b92b25858f24caf6894aa.md               |    6 +-
 .../657cb68bf15f349a744b5fba.md               |    4 +-
 .../657cd962b45f48127c183d7b.md               |   12 +-
 .../657cdc5a8e30191d1abec8b7.md               |    2 +-
 .../657ce061cda4a42a99c65d89.md               |    2 +-
 .../657cfeeeabb34d946d437dc7.md               |    2 +-
 .../657cff86dd812f98672e2649.md               |    2 +-
 .../657dc1d18a0a6f25302badba.md               |    2 +-
 .../657dc50830f9be380105f1ee.md               |    2 +-
 .../657dc568fe84e53acc962fc3.md               |    2 +-
 .../657dc9946a177a5938ad3854.md               |    2 +-
 .../657dca763bc23c5fc3398d95.md               |    6 +-
 .../657dce8ff35869721311a5e3.md               |    4 +-
 .../657dcee413423174ca3747f5.md               |    4 +-
 .../657dd047e755e37d58f5084f.md               |    4 +-
 .../657ddaaf8d89b4a56e3fdf78.md               |    4 +-
 .../657ddd7d4fc512b03741d9a3.md               |    6 +-
 .../656cd6a37495961c5f242c5d.md               |    2 +-
 .../657b1dfec76149836ea5c7d0.md               |    7 +-
 .../657b30e1b9f035e7e656fd01.md               |    2 +-
 .../65f3a5111de04c216a38d998.md               |    2 +-
 .../65f3a5733a199c21ca589173.md               |    2 +-
 .../65f52f761f23715bce60f9ce.md               |    2 +-
 .../66415d2fc70cf753ed0723a4.md               |    2 +-
 .../664274a516894a70a9111cb6.md               |    2 +-
 .../6642914bd5def3734c59b763.md               |    2 +-
 .../655b76340ecb8285060ab6d5.md               |    2 +-
 .../655bdc7e9c4116509df13f34.md               |    6 +-
 .../655c9a89818e18606c18ca4b.md               |    4 +-
 .../655c9bcb5bedb4620acb6f18.md               |    2 +-
 .../656a44b06bea9443b8ff45bd.md               |    2 +-
 .../656a456b46b4b04437f2d3e9.md               |    2 +-
 .../656a4ac4529e0f49ab900c3b.md               |    2 +-
 .../656a4d1943d8f24c030ded74.md               |    2 +-
 .../65fe10ef733aebd257f0677d.md               |    2 +-
 .../65ff086669d84512c7d132f1.md               |    2 +-
 .../6617e75a204e044552675f58.md               |    2 +-
 .../661ed01f09114567cc8fa939.md               |    2 +-
 .../661edda6df434c6f2161bea5.md               |    2 +-
 .../661ee1436ecb9271c66be82c.md               |    2 +-
 .../661eea69ca8a5177320d5e90.md               |    2 +-
 .../65b22d1aeb5ecf1d590d30bf.md               |    2 +-
 .../65b22e5388370c209a6b0b73.md               |    2 +-
 .../65b25b541262654062a21e74.md               |    4 +-
 .../65b25bcc98b00d41d06d2a2b.md               |    2 +-
 .../65d86e08994c4a0436d92766.md               |    2 +-
 .../65d89562dff69551e7683df3.md               |    2 +-
 .../65daa8143ae77767ad914ba4.md               |    4 +-
 .../65daa8cce1b9206995e4aec3.md               |    4 +-
 .../65daab9b713d3e6e6272c8bf.md               |    4 +-
 .../65dab1186529467ee5e463a7.md               |    2 +-
 .../65dad153fd675cb51e8423b0.md               |    2 +-
 .../6636f834a7b32443a43fa4e0.md               |    2 +-
 .../663855865f5d53510f9cd9a5.md               |    4 +-
 .../6638994f7dbcb3548e458202.md               |    2 +-
 .../66389a37bc8a4b5539eab451.md               |    2 +-
 .../66389e09cec2fa569567b15a.md               |    2 +-
 .../6556bc95e6ce5d850d37dd07.md               |    3 +-
 .../6556be93f9fcb88ac9e88b0d.md               |    7 +-
 .../655792631f21afaa40c611e1.md               |    5 +-
 .../6557985a95ab6db1c4a31b6c.md               |    5 +-
 .../6557995f0d97e1b2837a3081.md               |    4 +-
 .../65579a0e1613d5b31a034ee5.md               |    4 +-
 .../6557aee56ed7dcb5506a66d6.md               |    3 +-
 .../6557d6a229e541bfde2c560d.md               |    3 +-
 .../6557d782bc7613c06aa7dafd.md               |    3 +-
 .../6557db51366bf6c15a966fb0.md               |    8 +-
 .../6557dc1aa6be93c1eb4e9efb.md               |    5 +-
 .../6557dea8c258c1c2a767deb7.md               |    5 +-
 .../6557e0adbee371c3ac455a01.md               |    3 +-
 .../6557e5c6a854bfcad48808c4.md               |    4 +-
 .../655a235215bab7fa2a2e4bb7.md               |    3 +-
 .../655a33bb8f2009ff7a7abfaa.md               |    4 +-
 .../655a367638e3f401eb0235ea.md               |    2 +-
 .../655a3789069fc902eb2aaa4b.md               |    5 +-
 .../655a39242197c9040ddedef2.md               |    7 +-
 .../655a3cc030fb970687d6444d.md               |    5 +-
 .../655a4a5af997350c187bd779.md               |    5 +-
 .../655a4fc35818d90f73f63ba0.md               |    5 +-
 .../655a51cff12fb7117aa611f9.md               |    5 +-
 .../655a54506b259313b2d59577.md               |    2 +-
 .../655a5bfadf47e1199f9b65eb.md               |    8 +-
 .../655a5e76ca6f8d1b1a88e0f1.md               |   10 +-
 .../655a78fdfac0e22b0c400e72.md               |    2 +-
 .../655a79e595bd202b4cd5e2d2.md               |    3 +-
 .../655a7c5211e5252cf8a4ed01.md               |   12 +-
 .../655a7d752ffc542e5874af0b.md               |    7 +-
 .../655a896f31ca6a32913d1106.md               |    5 +-
 .../655a8c9d2a0ea136a0fd3631.md               |    5 +-
 .../655b266c2ea5495f43b97ea5.md               |    2 +-
 .../655b2b5cc4ea3062f9811dec.md               |    5 +-
 .../655b3197bb31ca670081f6d7.md               |    2 +-
 .../655b363149b5ba6b15434574.md               |    2 +-
 .../65e46524078f872c3a871f9f.md               |    2 +-
 .../661757150c7a75961a574a39.md               |    2 +-
 .../66175792ec93b19771c55c62.md               |    2 +-
 .../661772551b64ddd40c834b1e.md               |    2 +-
 .../661796e4635cd3eb1c8c78a4.md               |    4 +-
 .../661797b505f2d3ed4b170d74.md               |    2 +-
 .../66179829f664e3ee9b42ce5f.md               |    2 +-
 .../6617994636fa13f16060b12b.md               |    4 +-
 .../6617aea9ccdd68f7088368d1.md               |    2 +-
 .../6617af3ab73475f87b53a59d.md               |    2 +-
 .../6617b500a7049808f3a2a593.md               |    4 +-
 .../6617b53e5eda8e09c6c67d28.md               |    2 +-
 .../6617b674eb480b0c8d3d6031.md               |    2 +-
 .../6617b81046e7b11287a7bef8.md               |    4 +-
 .../658157d104bbc92a95147e45.md               |    2 +-
 .../65fc9a04edb4d56c8390bc3a.md               |    4 +-
 .../65fc9ab3635ebc6d167f86e6.md               |    2 +-
 .../656bd968e52c34220164de8d.md               |    2 +-
 .../65a84dad1595bbbc2e9cd895.md               |    4 +-
 .../65a84e922382a7bd112057ad.md               |    2 +-
 .../65a85090914872be8ca97793.md               |    2 +-
 .../65a9457392dfd7d564bc940e.md               |    2 +-
 .../65b28bbe803df52c4e76dd15.md               |    2 +-
 .../65b28f840a0d962f2240e800.md               |    4 +-
 .../65b2af1545e34334b7573de9.md               |    2 +-
 .../65b2b2781c59e837a5e0beb2.md               |    2 +-
 .../65b2bb073ac8d03dfe507810.md               |    2 +-
 .../6620e51c36d18c137b887081.md               |    4 +-
 .../6622346c798d906ee4d31846.md               |    2 +-
 .../65fd5f2abfdbc510942d76f8.md               |    2 +-
 .../661005bbe1801e14c303a57a.md               |    4 +-
 .../66100646290700150caff732.md               |    2 +-
 .../661216bbf6d9a51b409172a8.md               |    2 +-
 .../661256fe823f142fb9858beb.md               |    2 +-
 .../66126744e24b0a31255718a7.md               |    2 +-
 .../6579cf81a9cec6d21f872959.md               |    2 +-
 .../6579d002683211d5c7d13ef3.md               |    2 +-
 .../6579d4ca0578b4e95f1df60e.md               |    2 +-
 .../6579d539b1e5c2ec64484e49.md               |    2 +-
 .../6579d827ebd50afcacb829fe.md               |    2 +-
 .../6579dbf6a3e8a5161a592169.md               |    4 +-
 .../6579ddc94db61d2463022da3.md               |    2 +-
 .../6579de040244fb274179f001.md               |    2 +-
 .../6579e17ff05c5d451c2e4f35.md               |    4 +-
 .../657e0868da73165e32763679.md               |    2 +-
 .../657e15f175ecdf90b583ed01.md               |    4 +-
 .../657e1c10bc3f2ea8e1c1d7f7.md               |    2 +-
 .../657e31b82090130535456f65.md               |    2 +-
 .../657e358a40dd95143df6fe26.md               |    2 +-
 .../657e3dfda31b534042d06e39.md               |    2 +-
 .../657e4a245cc71782126b3316.md               |    2 +-
 .../657e4e482e3a38992b212c6f.md               |    2 +-
 .../657e50576597e0a65cd97e24.md               |    2 +-
 .../657e50dd1f6ff2a9873f9ff0.md               |    2 +-
 .../657e5c296bdba2ea26c67ca0.md               |    2 +-
 .../657e5d8f7f2274f2b1a8efcc.md               |    4 +-
 .../657e76356b6af6c07fe338c1.md               |    2 +-
 .../657e786b51f7eac240e92bcc.md               |    2 +-
 .../657fff7dabba2ff23993b08c.md               |    2 +-
 .../658010478daa16fe79d8113a.md               |    2 +-
 .../6613d3fe6615374be0d10008.md               |    2 +-
 .../6613d46936e9374c24cfaaab.md               |    2 +-
 .../6613d550a08c194cd27607ec.md               |    2 +-
 .../6613d6c3e74a984d6fcbd013.md               |    2 +-
 .../6614ad58c102e15df06c96d5.md               |    4 +-
 .../6614ae3e02cc465ebee68851.md               |    4 +-
 .../6614b1f8ee220c5f79df89b8.md               |    2 +-
 .../6614b3e52a6aca60bc3417fb.md               |    2 +-
 .../6629ce1a4f6581a7266d6ca9.md               |    2 +-
 .../662a2779b2aeb80c10508bf2.md               |    4 +-
 .../662a2b1f0c9314142ae87955.md               |    2 +-
 .../662a304552f2631d63aa7cab.md               |    2 +-
 .../662b74055c06e60af4f9b976.md               |    4 +-
 .../662b8975b11107146a49ec58.md               |    4 +-
 .../662f074021418e2b24937af7.md               |    2 +-
 .../662f0d350c37f42de48847fe.md               |    2 +-
 .../662f2e4b96f60636d44eb7db.md               |    2 +-
 .../662f31024608f337c0bf53a9.md               |    8 +-
 .../662f3450de7c2139809fb72b.md               |    2 +-
 .../657b400653813a1caa228aca.md               |    2 +-
 .../657b68caf6debb2975503948.md               |   10 +-
 .../657ca50a95d1c3828ee5a991.md               |    2 +-
 .../657caa4012f1cf846dcaa619.md               |    2 +-
 .../657cad90d6745e85569cdc06.md               |    2 +-
 .../657caec5163c6c85e5b31284.md               |    2 +-
 .../657cafc142a867006734c3ed.md               |    2 +-
 .../657ccfa7eeb47305177d4a45.md               |    2 +-
 .../657cd816f3caf509f85e4d4a.md               |    2 +-
 .../657ce387f809d60eb54f06d6.md               |    4 +-
 .../657ce691d6c57c107e650c5e.md               |    2 +-
 .../657daa5ab8505427a5b99cd2.md               |    2 +-
 .../657dab674b9de728828aa020.md               |    2 +-
 .../657dadfc7d21eb294c9f057e.md               |    2 +-
 .../657daf702ed04a29ee42de69.md               |    2 +-
 .../657df21cc45b1f66112fb8fc.md               |    2 +-
 .../657df2b22d7649667734d71e.md               |    2 +-
 .../657df5d14291b56887825276.md               |    4 +-
 .../657df6018a70e468f5dc016a.md               |    2 +-
 .../657e4b7d381d567e8d97967c.md               |    2 +-
 .../657e4c1f0bd3e97ef2d46644.md               |    2 +-
 .../657e4cd7f87d4f7f6954446d.md               |    2 +-
 .../657e4db2e3fc8d7fb41b8b85.md               |    2 +-
 .../657e4fd2ecf31280ef673f0d.md               |    2 +-
 .../657e539471b4aa82c7402c15.md               |    2 +-
 .../657e5477269b94834908826f.md               |    4 +-
 .../657e54f51fe1c983d840cb70.md               |    2 +-
 .../657e55e612fac9847dc7ce03.md               |    2 +-
 .../657e56e7034d2d858b6e9e00.md               |    2 +-
 .../674f0332ec59564081ec8b87.md               |  196 +++
 .../674f0495e5f4b0485ed38cd4.md               |   92 ++
 .../674f06b4b4d6eb4f6139ad61.md               |   52 +
 .../674f08fde55c2356b37e9b69.md               |   92 ++
 .../674f0afcd85abc5d478e150c.md               |   92 ++
 .../674f0d0dec2922641ce2c8e9.md               |  111 ++
 .../674f0f8e84b4c76c0f6ae6d3.md               |   94 ++
 .../674f1a33acb7717de4842822.md               |   52 +
 .../674f1ba48f50b78294f89089.md               |  102 ++
 .../67504e15ec1851a15aad11c1.md               |   92 ++
 .../675052373a1887aaa89c9a22.md               |   88 +
 .../67505766bad3bcbac2f16fe4.md               |  113 ++
 .../67505903fa6affc0910b7a9d.md               |  101 ++
 .../675106629f2c07cec9bf2c71.md               |  111 ++
 .../67510809633277d10d4fff4f.md               |   80 +
 .../6751a781fd421fda55170fc8.md               |  102 ++
 .../6751a827719c0fdb5b66b8e3.md               |   92 ++
 .../6751a990269891dd6f0ab1c2.md               |  102 ++
 .../6751ab72ff11cae0021d02d8.md               |   92 ++
 .../6751aca2701270e188b07df9.md               |  102 ++
 .../6751ad79009d66e2f5878282.md               |  102 ++
 .../6751aeb422ef45e4af25434d.md               |   92 ++
 .../6751bc2826c791ea69d7e8f2.md               |  102 ++
 .../6751bd2301b9feebf3813ac3.md               |   80 +
 .../6751bdd2f78adbed1ea0fa51.md               |  102 ++
 .../6751beb68c063aee92555abe.md               |  113 ++
 .../6752e404804c1c044c804b79.md               |   52 +
 .../6752e54369231d06538b4ac0.md               |   92 ++
 .../6752e83a806f520923bd28fa.md               |  102 ++
 .../6752eb5797ad390c7f40ef08.md               |   86 +
 .../6752f4680f2d251372d4ae64.md               |   68 +
 .../6752f6ebff95ee1781462c02.md               |   68 +
 .../6752fb3e6257c91b93721288.md               |   66 +
 .../6752fb92ecc7811d3a0f3320.md               |   66 +
 .../6752fc06607eba1e73a89929.md               |   68 +
 .../675948c97c0d4fd3d596960a.md               |  232 +++
 .../67594c1c9c8fc90a8e6f2f75.md               |   80 +
 .../67594e4ad681381278cee337.md               |   94 ++
 .../675950eed633ac1ac3884471.md               |  102 ++
 .../675961ce80a70e23e933fa8c.md               |   52 +
 .../675963eadf3bcf2ae50f74fe.md               |   88 +
 .../675966e572894133e1b3b275.md               |   80 +
 .../6759a3d84d89c4474d6a06b6.md               |  102 ++
 .../6759a570761b794ba1dc57e5.md               |  102 ++
 .../6759a679b6934850b6b0a31d.md               |   92 ++
 .../6759a7cc60ea94557c578ed4.md               |   92 ++
 .../6759a98f5028cb5bdf0a6f4b.md               |   90 +
 .../675beaae0511b83217778531.md               |  111 ++
 .../675d10fd9150e00d5ea464c2.md               |   52 +
 .../675d1437a379f517d766a249.md               |   92 ++
 .../675d16180e3c3f1e843ed138.md               |  102 ++
 .../675d177b1b7aca23c7f1b6d9.md               |   97 ++
 .../675d18c725ee4928ba83fa7c.md               |  111 ++
 .../675d6e0e52e8ee2d7b2b69cf.md               |   90 +
 .../675d6f815fb6c83276d12870.md               |  103 ++
 .../675d710fb8118237e416155a.md               |   89 +
 .../675d72320c09a53c1020e59d.md               |  111 ++
 .../675d72b7d86e163e326979e5.md               |   92 ++
 .../675d7493249c24447ca9e166.md               |  102 ++
 .../675d86beee48ab4941767200.md               |   52 +
 .../675d87ed627c734d9ee5c028.md               |   88 +
 .../675d88ce781849512cd7d426.md               |  101 ++
 .../675d8aabc2397c583c081ea9.md               |  111 ++
 .../675d8b482d5fa45b0226a891.md               |   92 ++
 .../675d8c5d1a1d775f78424011.md               |  102 ++
 .../675d8dfaad5f4765cbd8c013.md               |   52 +
 .../675d8eddf05fb469a75ef543.md               |  113 ++
 .../675d91adb9fb7173f4a7a4c7.md               |  111 ++
 .../675e6dfe0160bb66faa60a68.md               |   97 ++
 .../675e6f0bf7f7eb69ddffef81.md               |   80 +
 .../675e70d7b854926d7f18693c.md               |  102 ++
 .../675e7387be428072d95baeac.md               |   94 ++
 .../675e79e6ecfda37e1f49be65.md               |   64 +
 .../675e7cc999813e83379b139c.md               |   64 +
 .../675e8013d40d0d860143c14f.md               |   64 +
 .../675e80709ee205871518ba9b.md               |   64 +
 .../675e8133c874a588f947de57.md               |   64 +
 .../675ecdef47179ea4653c2b9f.md               |  196 +++
 .../675ecedbb04f6ca6dd620f0e.md               |   92 ++
 .../675ed1414303a6abfaac2d96.md               |   80 +
 .../675ed59b1e938bb2443585a5.md               |  111 ++
 .../675ed69e54ae31b462edf95b.md               |   80 +
 .../675ed905490b9ab8f4e640c4.md               |   92 ++
 .../675edb8012accfbd8f4135c5.md               |   92 ++
 .../675edc3228d9d1bf95c5e649.md               |   52 +
 .../675edeea805bb0c44385d0d5.md               |   80 +
 .../675ee01ee1d37cc722bbad83.md               |   92 ++
 .../675ee218782b4dcb26796c19.md               |  102 ++
 .../675fa4789b65761b6c562a1b.md               |   80 +
 .../675fa66d590e0127ba60b7f6.md               |   92 ++
 .../675fa827b0a17832dc798ba0.md               |  102 ++
 .../675fb5315884dc456fad654a.md               |  113 ++
 .../675fb7824cbbe3539de6111b.md               |  111 ++
 .../675fba2a32b4aa625e2f7940.md               |   38 +
 .../675fbba5f9807566fb0c39ef.md               |   92 ++
 .../675fbefa9f40157cad662e8d.md               |  102 ++
 .../675fbfc6fa824c820a7e49d4.md               |   88 +
 .../675fc02724147984cfe068d5.md               |   80 +
 .../675fe3fb72bdcb97dd10b7c8.md               |  102 ++
 .../675fe58fb4c9539cb37b4065.md               |   80 +
 .../675fe6a1e81c4ba00f415364.md               |   99 ++
 .../675feaafa5546fab32aa0736.md               |  111 ++
 .../675febf4f03233af8e347802.md               |   80 +
 .../675fee8f5d64f2b504e91281.md               |  102 ++
 .../675ff2b7f9405abf27f26740.md               |   80 +
 .../675ff37bebf32bc223e3660a.md               |  102 ++
 .../675ff42fb8c8a6c4f21cd3bb.md               |  104 ++
 .../675ff94f80bd9bd12c8497e2.md               |   92 ++
 .../6760f057483bbf684bfa6457.md               |  111 ++
 .../6760f48b0fe69572664e85f1.md               |  102 ++
 .../6760f7ca38c9167853ebf917.md               |   89 +
 .../676147de99ef019cee551581.md               |   70 +
 .../6761493d2db43ba139340975.md               |   70 +
 .../67614992d9e494a2b69f89bb.md               |   70 +
 .../67614a0187bd80a49d438b1f.md               |   70 +
 .../67614a6e5d4df6a6744127b7.md               |   70 +
 .../66a91783d34e873290e9f5ec.md               |    2 +-
 .../66a95606a32d5747dae3bfba.md               |    2 +-
 .../66a958bb3ac85c4a75e5fe88.md               |    2 +-
 .../66a9599790c94a4ba0e5dbd9.md               |    2 +-
 .../66a95ab699d0064d16bdf469.md               |    2 +-
 .../66a961222115ad5437ddf4fb.md               |    4 +-
 .../66b13f2f0c5a415ccd41335e.md               |    2 +-
 .../66b4f8f6c1af973bdfdc0228.md               |    2 +-
 .../66b568bf34c34209600445ad.md               |    6 +-
 .../66b56c0432933515821a4eeb.md               |    6 +-
 .../66b572bd3d3e122e9a8ff9df.md               |    4 +-
 .../66b57e127321d8524c7ddda7.md               |    6 +-
 .../66b580cb9307d46113a8a637.md               |   10 +-
 .../66b58252cb001966f564c19e.md               |    4 +-
 .../66b582d6978cff693c7b9455.md               |    8 +-
 .../66b583275950846a87e88de8.md               |    8 +-
 .../66bbba46fff0ef451b701bcd.md               |    2 +-
 .../66bbc147bc59c25e60e18aec.md               |    2 +-
 .../66bbf183427671a86f5ac25e.md               |    2 +-
 .../66c4e019a6cbfa3210603aef.md               |    4 +-
 .../66c4ec1a03bb27643063f262.md               |    2 +-
 .../66c4efaa80afd0729ae471d1.md               |    6 +-
 .../66c4f19f86b5f07a71ac7642.md               |    8 +-
 .../66c4f338d6b658809576ae77.md               |    4 +-
 .../66c4f45289436884e6afc059.md               |    4 +-
 .../66c4f90997120794595abd5c.md               |    2 +-
 .../66c4fd010695b5a316201d03.md               |    2 +-
 .../66c4ffe51866ecadb48304b9.md               |   10 +-
 .../66c5012e6643c2b32b3af0be.md               |    4 +-
 .../66c507bef7c69ac73fbc82cc.md               |    8 +-
 .../66c611f2d1e400c2f41ad5d9.md               |    2 +-
 .../66c613a4d11b69cdd746b5ed.md               |    8 +-
 .../66c616d281199cda967c144d.md               |    8 +-
 .../66c6184eda8a8be150b1a0b4.md               |    4 +-
 .../66c6193e7546c4e51cbf64c9.md               |    8 +-
 .../66c61a0197d7e7e87191e033.md               |   12 +-
 .../66c61a57f6eca6e9fb0f61d7.md               |    6 +-
 .../66c61dee09da09f603fa3dbc.md               |    2 +-
 .../66c62046cf3df2fe7cf92230.md               |   10 +-
 .../66c6213241b74d023adcf637.md               |    2 +-
 .../66c62515cf6ae70e34eb361d.md               |   10 +-
 .../66c625e03abcb711ca38ba5f.md               |    4 +-
 .../66c62747744dc4178785207d.md               |    4 +-
 .../66c628215739f51ac74cb5cc.md               |    4 +-
 .../66c6293f674a0a1e960027c3.md               |    2 +-
 .../66c62b0c65018625985a897d.md               |    2 +-
 .../66c637ce17705151c64f9059.md               |   10 +-
 .../66c63db09b73ad6539eeee61.md               |   16 +-
 .../66c63fda0e11806e78090f36.md               |   10 +-
 .../66c6409f492e5e71621d06b8.md               |   10 +-
 .../66c640e2f81416727a42fd4c.md               |    6 +-
 .../66609f86c2500e597c8cb52f.md               |  209 ++-
 .../673519c3d750b013c96f1e6f.md               |   90 +
 .../67351b96eefe7c282ec1424b.md               |  107 ++
 .../673653fa580778853a7a7afd.md               |  108 ++
 .../673654d11366b18b1c76d980.md               |   82 +
 .../673655ea628630928b5b50b8.md               |  107 ++
 .../6736576b5407af9bdf1f41b7.md               |  110 ++
 .../67365a08481f68acc18a9639.md               |  113 ++
 .../673ba128855f6e78cd392dab.md               |  109 ++
 .../673ba3a9d1858104dfbba180.md               |   82 +
 .../673ba5bf35e3b51211c27c2b.md               |  106 ++
 .../673ba72bd5ef6a1bc39ba037.md               |  101 ++
 .../673ba8558f0a93235de58ccb.md               |  111 ++
 .../673ba99a1280af2ba7770b56.md               |  111 ++
 .../673bab51ecb42c369eb6b37b.md               |  101 ++
 .../673bad5d57b0a6444819ca0e.md               |   94 ++
 .../673baec00a78e04d5c6a9ea2.md               |   92 ++
 .../673c03eb9c3d4c2e12555aaf.md               |   80 +
 .../673c06abb58d403f7e4533fb.md               |  113 ++
 .../673c07da6aa1be470dc55332.md               |   92 ++
 .../673c097ad524db51cca7ae3f.md               |  104 ++
 .../673c0bf736904660a9077269.md               |  102 ++
 .../67472118e6040e52ad3ca5b0.md               |  101 ++
 .../67472280c0b01f5e1442f8da.md               |  115 ++
 .../67472348ce54e263862c5386.md               |   99 ++
 .../674e3864432aea6f5ce708ed.md               |   92 ++
 .../674e3b2f69b2e481d4f6cebe.md               |   94 ++
 .../674e3bc223f6c5862facf3e2.md               |   88 +
 .../674e3cb5a611618cd5301758.md               |   99 ++
 .../67506acdf255ff94e0ba712e.md               |  111 ++
 .../67506bd2d567359bac72f760.md               |   90 +
 .../67506c7db9d148a0308107d8.md               |   88 +
 .../67506d2c92a80fa4b7a912a7.md               |  104 ++
 .../67506e16a9e0bdaad7267c35.md               |   98 ++
 .../67506e940e1d20ae6f0fc7e2.md               |   88 +
 .../67506f57df7629b3d8d90f11.md               |  102 ++
 .../675070049d1f9fb8c1bced11.md               |   89 +
 .../675070d075960bbe3f92eca6.md               |   99 ++
 .../675074863d75f1d559b039df.md               |  108 ++
 .../6750758f8581d3dcfeb1c386.md               |  124 ++
 .../6750775f2b0832e88216e98c.md               |  110 ++
 .../6750784c1399a9ef62b27e9e.md               |   90 +
 .../67507a47729d85fb7c88ee06.md               |   88 +
 .../67507adbc31ab8ffa2dc5243.md               |  111 ++
 .../67507f042946421936eb425a.md               |  117 ++
 .../67508b92b31af876eed82c66.md               |   96 ++
 .../6752100607e30e31bd85af76.md               |   70 +
 .../6752133caed6e849142fcc19.md               |   70 +
 .../6752136c94c79a4ad803f0cf.md               |   70 +
 .../675213a1aa7da34c876d94e9.md               |   72 +
 .../675213f5a47d9e4ef23d9050.md               |   72 +
 .../67531709d628ef047202e6ae.md               |  196 +++
 .../675318543812fa0f15f42c10.md               |   95 ++
 .../67531ca2cb308e28acf3bdc1.md               |  104 ++
 .../67531f0c699943385e41734c.md               |   90 +
 .../67531ff45ade873e5ff17211.md               |   90 +
 .../67532227a04e5e4cd4ccf987.md               |   92 ++
 .../675323b130ad71572ef10510.md               |  104 ++
 .../67532445152d375af93d4d19.md               |  104 ++
 .../675325cfea799165252500d4.md               |  100 ++
 .../675326de48b3e36c45ba1328.md               |   78 +
 .../675327d73a38d5731235d764.md               |  104 ++
 .../675329bc0e2bfa7f1c4f7411.md               |   90 +
 .../67532ac8b110a08666ee5f18.md               |   90 +
 .../67532bbaa817558e7691df51.md               |   82 +
 .../67532c49e75faf929fd9378d.md               |   84 +
 .../6753314748a2feb09a3059b2.md               |  139 ++
 .../67533335139a96bd1eb18395.md               |   97 ++
 .../6753357b948f6acb55e35e3b.md               |  101 ++
 .../67535bfb5c07ec6334ec8ea3.md               |  108 ++
 .../67535e02fd808570ca6cb599.md               |   88 +
 .../675743f6f7016d1074a9bca1.md               |   82 +
 .../675746c2d3d2f222111918d4.md               |  134 ++
 .../6757488ee5dfb72d866a36df.md               |   89 +
 .../6757498f826b0634696f224e.md               |  111 ++
 .../67574a712cb1143a3920f2a3.md               |  113 ++
 .../67574bb2fe3c4c42bae7b6e5.md               |   88 +
 .../67574c6d474104486add91a7.md               |  106 ++
 .../67574d8786f50e500eae8e67.md               |   97 ++
 .../67575000c0fd5b5f211d89c4.md               |  121 ++
 .../6757531dc5fbb973e1912e1a.md               |   90 +
 .../675753a815259c781d2b6913.md               |   80 +
 .../67575473b14c837d8de3a866.md               |   96 ++
 .../67575588dfebc085e31941e4.md               |  101 ++
 .../67575734a3672990f7c4385a.md               |  117 ++
 .../6757585d71b1ad9924a96eb9.md               |   90 +
 .../675758e09f09139cb34169f9.md               |  110 ++
 .../67575a0d4b966da41383050b.md               |   92 ++
 .../675c8db0264a83364dc521ac.md               |   90 +
 .../675c8f75eaf3914275999cae.md               |   92 ++
 .../675c900ff099fa46fad7624d.md               |  117 ++
 .../675c91b0c74a72519ebb0a83.md               |   92 ++
 .../675c92e9a6133659ccad5424.md               |   92 ++
 .../675c94decb56d46654acf008.md               |  109 ++
 .../675c9579b10f316b5542b331.md               |  100 ++
 .../675c96e7feed5f75004ea8a4.md               |  115 ++
 .../675c9900820144823ed5b11a.md               |  109 ++
 .../675c9a309dcbc3053601e653.md               |  101 ++
 .../675c9a9d87d492086e1ab3cf.md               |  117 ++
 .../67619dab2031295f7b4dcee1.md               |   96 ++
 .../6761c4698166cd2462c1d685.md               |  178 ++
 .../6761c69821431133f4860640.md               |   70 +
 .../6761ca7cf0fd854c646ebd11.md               |   76 +
 .../6761cae47045b54f50840915.md               |   72 +
 .../6761cb950d555c54150b2212.md               |   74 +
 .../6761e3efbd12c067489c90fe.md               |   82 +
 .../6761e51505b1d96f537b089e.md               |  124 ++
 .../6761e7b82f98fc7fb7d9c06b.md               |  124 ++
 .../6761e90350ebde88221daeea.md               |  125 ++
 .../6761e99e3e0f098cc0f265aa.md               |  124 ++
 .../6761eb2e4b1192968b2303f4.md               |  124 ++
 .../6761ecb48889faa066740143.md               |  106 ++
 .../6761ee00596d9fa8c8c3ac90.md               |  103 ++
 .../6761f0dc81967cbbe1118dae.md               |  113 ++
 .../6761f1e5287834c2cb5f4631.md               |   98 ++
 .../6761f2fbd2db7aca063b6a5c.md               |  106 ++
 .../6761f509323d5ad6cfe9d212.md               |   90 +
 .../6761f66b536d13df9a6e4b87.md               |   84 +
 .../6761f6dc272d86e2f315b79c.md               |  106 ++
 .../6761f838245300ebfcf372cd.md               |   80 +
 .../6761f9d7a849d8f61aa12deb.md               |  119 ++
 .../6762dceeac22841f223b0101.md               |   96 ++
 .../6762e2adb437563844364cf1.md               |  108 ++
 .../6762e430c7646a422c17966f.md               |  104 ++
 .../6762edd89388ad7b3950d01a.md               |  108 ++
 .../6762f11f6a96d19057229bf2.md               |  101 ++
 .../676320cd1c9cee55ab53687a.md               |  113 ++
 .../676321f8a8692b5d4b211dde.md               |  113 ++
 .../67632267336dcf6068f39407.md               |  110 ++
 .../6763238e902cdf688f49152f.md               |   92 ++
 .../6763251d0b7d8872b5543df8.md               |  116 ++
 .../676325dfad1ee0784c7f1a5e.md               |   88 +
 .../6763271c3d195780a672e061.md               |  121 ++
 .../6763285df9a9b6039696c389.md               |   92 ++
 .../67632a419a12aa10b1e76954.md               |  110 ++
 .../67632cefda53f021ab6ecfb4.md               |  100 ++
 .../67632e1b477101295cf2fc77.md               |  119 ++
 .../67632f1219de712fcf37d295.md               |   99 ++
 .../67633077c55c0f38b9166323.md               |  108 ++
 .../6763322b77048c43b92f9c28.md               |  102 ++
 .../67633424bfc56f4fec3edf3c.md               |   98 ++
 .../676335dbbbe14c5acdafc970.md               |  108 ++
 .../676338a796ace16be009e9d6.md               |   89 +
 .../676339b7a8460f7302b2d966.md               |   98 ++
 .../67633a6ff2f2ef78701975c9.md               |  136 ++
 .../67633b012085337c52b93096.md               |   92 ++
 .../67633b85c9f913803fd8591c.md               |  111 ++
 .../67633d331eeb858a9803794f.md               |   97 ++
 .../67634107b478caa17f37c628.md               |   72 +
 .../67634294671bb8ac40e2cc85.md               |   64 +
 .../676342de292eafae91acee29.md               |   64 +
 .../6763432a8c2ae1b0de0e1fc0.md               |   64 +
 .../66c8ffb7c913438ad893dcf2.md               |    2 +-
 .../67325a5443667173c717856f.md               |    2 +-
 .../67325bae5d23157c74091944.md               |    2 +-
 .../67326cb0e9a72b69d6efd417.md               |    2 +-
 .../67326fb4b198b97e4bcf4a69.md               |    2 +-
 .../6732800300eff4f49912e30f.md               |    2 +-
 .../66609a1199ddd03548c45423.md               |  234 ++-
 .../6704f438e6e9120d5a1274c6.md               |  106 ++
 .../6704fbd43885300e4aa221e9.md               |   92 ++
 .../6704fd952ad2560e9a7ca070.md               |  108 ++
 .../6705055b28e3c20fce27a15c.md               |   92 ++
 .../67050a8becee6d10619fa5ff.md               |   92 ++
 .../67050fd29a37de112051064b.md               |   84 +
 .../670515561e620a11f2d7308c.md               |  113 ++
 .../6705177d1d3dbb124955a397.md               |   94 ++
 .../670518bd8ec6f012af235433.md               |   96 ++
 .../67051b185149b6130426a9ad.md               |  114 ++
 .../67053619dd65bd1459449bf0.md               |  148 ++
 .../670538f8565fb514ddf24b85.md               |   92 ++
 .../67053b9fe0a27715979bee1b.md               |   94 ++
 .../67053ea535fe23160e6b29c1.md               |   96 ++
 .../67053faa1471c916446ad615.md               |  116 ++
 .../670541bdd115c71686a398c3.md               |   84 +
 .../6705425a4b3df216cb6de9a7.md               |   94 ++
 .../6705442e6a6ebf1725bc8e1f.md               |  142 ++
 .../6705573e13b1211820a3ac67.md               |  108 ++
 .../67055872382df21871200427.md               |   84 +
 .../67055c02b6774a18f8f7186f.md               |   98 ++
 .../67055d274231051940d0c8ea.md               |   94 ++
 .../67055f5c9bdb8e1999102827.md               |  120 ++
 .../6705605c7fb8f619e0068634.md               |  114 ++
 .../670561a8af3d901a431549fe.md               |  117 ++
 .../670562a2aa92081a89ba77f6.md               |  113 ++
 .../6705638c3791881aed186e9d.md               |   90 +
 .../670564e883b7911b4ec31e29.md               |  134 ++
 .../67056697de96ba1ba012eb44.md               |   60 +
 .../67056b4950144e1cf10c53a6.md               |   64 +
 .../670570ad97d26e1d6bad572d.md               |   66 +
 .../6705725e2814c91dd738e8f4.md               |   66 +
 .../6705742b9616e01e275e5c08.md               |   66 +
 .../67057604ca099f1e7df78e77.md               |   66 +
 .../67057e02da44871f492f6f35.md               |   66 +
 .../670f6ca334a541048d0e9a76.md               |  223 +++
 .../670f71de33e0be053934a9c3.md               |  106 ++
 .../670f74145be4b907a1b9c915.md               |   92 ++
 .../6710bc2f9f242e03ebeccbe9.md               |   92 ++
 .../6710bf5df20df90498c991a2.md               |  106 ++
 .../6710c59075616806206fcf44.md               |   90 +
 .../6710c7bd388290075f19552c.md               |  106 ++
 .../6710e0e2cafeeb09e6cb2d8f.md               |  115 ++
 .../6710e614f70bd10afb6ca7f7.md               |  107 ++
 .../6710ef64fecf900ca5296978.md               |  119 ++
 .../67121364e79da2047818b743.md               |  107 ++
 .../67121be3d5093805dfdbaa71.md               |  108 ++
 .../67121d26052fb606bd59705c.md               |  115 ++
 .../67122e8300d8e90843b04967.md               |  110 ++
 .../67176c867303f30476f3d126.md               |   90 +
 .../6717756d3483e6060d2cd800.md               |  110 ++
 .../671775877ee558061e6eebf8.md               |   90 +
 .../671775a360c128062f906b24.md               |  106 ++
 .../671775bb104def063ffbdaab.md               |   82 +
 .../671775db2ecd44064fdb1f04.md               |   94 ++
 .../671775f2f55c4c066193a1c1.md               |   94 ++
 .../6717760c06f5e10671ef0268.md               |   94 ++
 .../6717b543037e030fc7008aa7.md               |  106 ++
 .../6717b55fb3b4160fd757b7af.md               |  106 ++
 .../6717b5754dcaae0fe7bb179b.md               |   82 +
 .../6717b59830cdb50ff9f67623.md               |  106 ++
 .../6717b5b2b0c1d21009b2b0fd.md               |   94 ++
 .../6717b5c73e81e8101bed0ea2.md               |   96 ++
 .../6717b5dc5fd2c0102b2aacec.md               |  103 ++
 .../6717b5f5be4456103b8ff767.md               |  115 ++
 .../6717b611f1230c104cbf5d38.md               |   90 +
 .../6717b6a5308335105c51cfe6.md               |  106 ++
 .../671d19c62da85c0982472a57.md               |   68 +
 .../671d1f358f62320b707af87f.md               |   62 +
 .../671d1f5590e7110b82940771.md               |   62 +
 .../671d1f7ca5f2aa0bb63b9e22.md               |   62 +
 .../671d1f94461c820bc68e3694.md               |   62 +
 .../671d1fab38a4710bd7a6b9c0.md               |   62 +
 .../671d292ef6180210164c33e8.md               |  196 +++
 .../671f7579f5e0000560fcce55.md               |   94 ++
 .../671f7592e571ad05716b2c67.md               |   90 +
 .../671f75ab41a1520581f5923a.md               |   84 +
 .../671f75ca1748e8059234fa3d.md               |  104 ++
 .../671f75e368cbd505a301ca7d.md               |   94 ++
 .../671f75fea017ea05b31a80c6.md               |   94 ++
 .../671f761703824805c35c2eda.md               |  108 ++
 .../671f765a22e32e05d4f5074e.md               |   94 ++
 .../671f76959b3ca3060eddbe70.md               |  103 ++
 .../671f76b915c1cf062570fdfc.md               |  138 ++
 .../671f76d4b7384c063c097048.md               |  103 ++
 .../671f76eede9f200652954940.md               |   91 ++
 .../671f7708379ef00668b843d4.md               |  119 ++
 .../671f7727d2e4240680c126bc.md               |  143 ++
 .../671f774373f2ce0696fe9621.md               |   98 ++
 .../671f7767854d6806ac4fb5f4.md               |  110 ++
 .../671f77bfcd2bc306c2f6f338.md               |  114 ++
 .../671f77dedcc3b006dcfa9c73.md               |   92 ++
 .../671f7800b5174406f2d0df76.md               |   70 +
 .../671f78193bb0510709b169b8.md               |   62 +
 .../671f7834b9a323071f7a325e.md               |   62 +
 .../671f7852f3a7e80737cc21d0.md               |   62 +
 .../671f786a18c275074d55d298.md               |   62 +
 .../671f788c2665b807636b31a8.md               |   62 +
 .../6746005e0cf96b701d861793.md               |  108 ++
 .../674604ef287b978febd50bc9.md               |   80 +
 .../674605049656269110601a79.md               |   86 +
 .../674609a92ccf079d86cd81db.md               |  110 ++
 .../67460b84234b70a4772d2094.md               |   95 ++
 .../67461094ba7296b13c1bb045.md               |  136 ++
 .../674612ab7e6b0ab83408262a.md               |   86 +
 .../674616565854f7c788740cee.md               |  110 ++
 .../674619b6699a06d064c9717f.md               |   94 ++
 .../67461c06865e13d715967f1d.md               |   89 +
 .../675060b39af6ab3f14f394e2.md               |  142 ++
 .../6750651aafcea04c6958a4e5.md               |   88 +
 .../6750697ee8b87f5e665c0712.md               |   88 +
 .../675846ef3e2e50e95e99aded.md               |   92 ++
 .../6758486d05a8fcf01a20c8b4.md               |  115 ++
 .../67165185a42acc499c6ada3d.md               |    4 +-
 .../6716531210ee374ae822fe83.md               |    2 +-
 .../671655545e5bfc4c3dfe9871.md               |    4 +-
 .../67165855c3dd824eabc1b474.md               |    2 +-
 .../6716593b4f24da4fac3154bf.md               |    4 +-
 .../6717b20b952c096b3dee0834.md               |    6 +-
 .../6717b6aa217d3d6ed6f83e53.md               |    2 +-
 .../6717ba3d37ec4e73a50878da.md               |    4 +-
 .../6717c0dc8b764279dfc9326b.md               |    6 +-
 .../6717c3557815a17d6369a778.md               |    4 +-
 .../671a383a56179f510b83cc1e.md               |   14 +-
 .../671a3c13a3d6b21a1b0008f7.md               |    4 +-
 .../671a3dde9c50241c6c16e331.md               |    4 +-
 .../671a3ed10fd6e81d06dd4690.md               |    4 +-
 .../671a40b415343c1f26e0c005.md               |    2 +-
 .../671a41b8576531207749bdae.md               |    4 +-
 .../671a438ac97103231787ab5a.md               |    4 +-
 .../671a45f9b4ee3325393f0d0b.md               |    4 +-
 .../671a46fe18ae6a26c76f42f6.md               |    8 +-
 .../671a4aeac046082b1bf6335b.md               |    2 +-
 .../671a4e181afe602d37786dd8.md               |   16 +-
 .../671b71da8e1b963c69b6d011.md               |    6 +-
 .../671b769169e38f3fe57b141c.md               |   16 +-
 .../671b77cf9ef25a416449b109.md               |   16 +-
 .../671b7c10cd0d274552e7b686.md               |   18 +-
 .../671b7dd730712747aa2d9974.md               |    8 +-
 .../671f46b8a64a336294268cf6.md               |    2 +-
 .../671f4766b90543639b60a79d.md               |    2 +-
 .../671f47b9343cd364309aa802.md               |    2 +-
 .../671f4c29b6c10a677571c3e9.md               |    2 +-
 .../671f8ab3f5add66eb16be177.md               |    4 +-
 .../671f8cdb0d31cb710d7ad031.md               |    2 +-
 .../671f8e2ca90546729b1911fa.md               |    6 +-
 .../671f92684454b37660c3f82a.md               |    4 +-
 .../671f9ca66765d781de7213f3.md               |    4 +-
 .../671f9e83b440da8486fdf76e.md               |    2 +-
 .../6720cf38beae8c4f1d7af1c0.md               |    6 +-
 .../6720e69c2152da7b9dad577e.md               |    4 +-
 .../6720f18957013d8de8ebbe91.md               |    4 +-
 .../6720f2d525d22693e3fe2a99.md               |    8 +-
 .../6720f45529e496998cced6b6.md               |    4 +-
 .../6720f45ff33dd69a10d14e9d.md               |    4 +-
 .../67278e07d5544c1a93f7f113.md               |    8 +-
 .../67278fa39133d120afee631c.md               |    8 +-
 .../672830d9aa2e0c2ff2fad7f8.md               |    6 +-
 .../672836d6ec0ae23f4724ccb1.md               |    4 +-
 .../6728378c94eaf541fce8f334.md               |    6 +-
 .../67289c4908f407948ef08a55.md               |    4 +-
 .../6728c369d38d3ea6634c1649.md               |    4 +-
 .../6728c6fad8d9caa92837c75f.md               |    2 +-
 .../672a1c6ca33f8115728e7f79.md               |    4 +-
 .../672a1e2fbec6a61bf477ea49.md               |    2 +-
 .../672a21a4b40ed3279d513888.md               |    4 +-
 .../672a296a309d9c46658c071a.md               |    2 +-
 .../672afc3d3758e25087697611.md               |    2 +-
 .../672afe3809d2a55224868ea5.md               |    6 +-
 .../672b25e2a59e2956bca1a42f.md               |    2 +-
 .../672b33b15bd8bf5b2523772a.md               |    6 +-
 .../672b42dafa37fe61e80a2b40.md               |    2 +-
 .../672b4539b9ab5d645e7dcfb8.md               |    6 +-
 .../672b46def9325065dbc7b29f.md               |    4 +-
 .../672b4812ec997567058875da.md               |    4 +-
 .../672b491aa3c094689007baf1.md               |    4 +-
 .../672cca3d15975a9390545877.md               |    2 +-
 .../672ccc988693199500b4cdfd.md               |    4 +-
 .../672dc928d8765dc9f923ca71.md               |    2 +-
 .../672de8ad97d683d3734ce5cd.md               |    2 +-
 .../672debc75e32a8d6e2593eac.md               |    6 +-
 .../672dec93f008b3d8169568e8.md               |    2 +-
 .../672e0ec28d829ee2b5e909f3.md               |    2 +-
 .../672e16bcc0d877e5d3eb7f4e.md               |    2 +-
 .../672e17e63be5dce6ff5b9189.md               |    2 +-
 .../672e1bb0774f2fea953e9388.md               |    6 +-
 .../672e1c3031816ceb9dccc66a.md               |    8 +-
 .../672e1f1a51e86aed84df7c94.md               |    2 +-
 .../672e1fff03af3aeed5d7a84b.md               |    4 +-
 .../672f4b05585d501f533789b4.md               |    4 +-
 .../672f606201263928a06b2a04.md               |    2 +-
 .../672f630337512b2b62595731.md               |    2 +-
 .../672f63cadac41a2c9b1897a1.md               |    2 +-
 .../672f64ba4f91492e1192b829.md               |    2 +-
 .../672f657580a34f2f78e278e2.md               |   10 +-
 .../673de712f2dc6db0cfe76b31.md               |    2 +-
 .../673df0c78bdd11c7195010cb.md               |    6 +-
 .../66b36358ed4f261d64840c24.md               |    2 +-
 .../6718d2d59337c822ecb697ff.md               |    2 +-
 .../66eaddd04a9e533fba689001.md               |    2 +-
 .../66ec4c8e9878d8441956516f.md               |    2 +-
 .../66a207974c806a19d6607073.md               |    2 +-
 .../67172b43f84bcd2dec238a3d.md               |    2 +-
 .../66def5467aee701733aaf8cc.md               |    2 +-
 .../6690e10ebe2181212abc9652.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |   11 +-
 .../66f3f6eb66ea9dc41cdc30df.md               |  210 +++
 .../66bba6fff611169359d9d36a.md               |    2 +-
 .../66f26c32ec6f90df01a44f60.md               |    2 +-
 .../67279fe50237291f80eed8b8.md               |  857 ++++++++++
 .../66f686b8ebdb982fa8e14330.md               |    6 +-
 .../6762ec275cef87635acc4fe3.md               |  543 +++++++
 .../66b205e6eacba4c4e54ea434.md               |    2 +-
 .../66e45c8140f9fda5c105ae26.md               |    2 +-
 .../lab-event-hub/66ebd4ae2812430bb883c787.md |    2 +-
 .../66c07238b01053abaf812065.md               |   15 +-
 .../66bf6bacf178eac7b96d4f5e.md               |    2 +-
 .../673c91f0b934834bc4a3ecc2.md               | 1312 ++++++++-------
 .../66e7ee20b79186306fc12da5.md               |    2 +-
 .../66c06d618d075c7f7f1b890a.md               |    2 +-
 .../66bb6a9c2dd58b73cd759034.md               |    2 +-
 .../66d6a7a3e1aa411e94bf2346.md               |    2 +-
 .../66d75dd0aa65a71600dc669b.md               |    4 +-
 .../66ed41f912d0bb1dc62da5dd.md               |    2 +-
 .../66faac4139dbbd5dd632c860.md               |    5 +-
 .../66c06fad3475cd92421b9ac2.md               |    6 +-
 .../66db57ad34c7089b9b41bfd6.md               |   10 +-
 .../66db529d37ad966480ebb633.md               |    2 +-
 .../6735a7370e0ae93a4577c689.md               |  263 +++
 .../66f55eac933ff64ce654ca74.md               |    2 +-
 .../673b3d6b7ef7318eef926d5a.md               |  278 ++--
 .../66a37f37ef5823a313de8c26.md               |    2 +-
 .../66ba762af611169359d9d369.md               |    2 +-
 .../66be24cb4144f955b6bcc550.md               |    2 +-
 .../657bdc55a322aae1eac3838f.md               |    6 +-
 .../66f53dc2c5bd6a11d6c3282f.md               |  116 ++
 .../66fe4f33a2cc9b33f4d5cd9b.md               |    2 +-
 .../bd7158d8c242eddfaeb5bd13.md               |  652 ++++----
 .../587d78af367417b2b2512b04.md               |    4 +-
 .../67051431a73f1ca25d9a6f25.md               |    2 +-
 .../66f2836c459cfb16ae76f24f.md               |    2 +-
 .../lab-quiz-game/66f17db06803d11a1bd19a20.md |    7 +-
 .../66b62d0ad68488dd76228d6c.md               |    2 +-
 .../66bb3e20d3dc5b6d0a21f5dd.md               |    2 +-
 .../668f08ea07b99b1f4a91acab.md               |    2 +-
 .../66e028680eca7d21db7e1aee.md               |    2 +-
 .../673b02b03134b04637bf7055.md               |  220 +--
 .../66c057041df6394ca796bf33.md               |   22 +-
 .../6716249b5405164036fd0b0d.md               |  599 +++++++
 .../66c051d13a6a20255a963695.md               |  229 +--
 .../587d78af367417b2b2512b03.md               |  153 +-
 .../587d78b0367417b2b2512b05.md               |  180 +-
 .../669e2f60e83c011754f711f9.md               |  196 ++-
 .../bd7158d8c442eddfaeb5bd18.md               |  117 +-
 .../669e81368e52b3a5c35a2dc5.md               |    2 +-
 .../673b567e3ba535dda140d278.md               |  116 +-
 .../66f12a88741aeb16b9246c59.md               |  728 +++++----
 .../672aa8d65995be62ef1c7515.md               |    2 +-
 .../672cf764cf55a70433590def.md               |    2 +-
 .../672aa82768e00d600305afc0.md               |    2 +-
 .../672c35a79fa53e00de9f2a49.md               |   36 +-
 .../672aa8873d4e25618870764f.md               |    2 +-
 .../672cf05c3ad533eabe1e8197.md               |    2 +-
 .../672cf06c8f46f9eb04db9832.md               |    2 +-
 .../672cf07a2b9796eb49719e03.md               |   20 +-
 .../672ac9705b07a64439b73b59.md               |    2 +-
 .../672bb619f0d4538d0528760d.md               |    6 +-
 .../6733aa9b006d29f4d11307a5.md               |   20 +-
 .../6733bec70d86e13522e98a4f.md               |    2 +-
 .../6733becf4b0c353553b9bfa4.md               |    2 +-
 .../6733bee844600f35c05b8264.md               |   18 +-
 .../6733befb703ca6361da3755b.md               |   18 +-
 .../670803abcb3e980233da4768.md               |   34 +-
 .../6708382cf088b216580a9ff1.md               |   20 +-
 .../67083868d5fdcb17bf8c14bd.md               |    2 +-
 .../670838977810401844af6fe0.md               |    2 +-
 .../670838b10ee87a18e5faff62.md               |    2 +-
 .../670838e914096b194b0c51aa.md               |    2 +-
 .../670839051794aa19fcef6dc8.md               |    2 +-
 .../67083952f800051a8a21fcfd.md               |    8 +-
 .../6708396caa00e11b597b3365.md               |   16 +-
 .../672a51e9e4fd8b8552eeb758.md               |    2 +-
 .../672a5310d7e46b8a34d48dfd.md               |    2 +-
 .../672a5326a7606a8a766cbedb.md               |    2 +-
 .../672a533e6041c28ad680eb8f.md               |    2 +-
 .../672a5361ef88158b25fbfba7.md               |    2 +-
 .../672a536f8386288b9ed0a154.md               |    8 +-
 .../672a537f05f3798bd4f57d2d.md               |    2 +-
 .../672a538c029f9e8c1687460e.md               |    2 +-
 .../672a539b887ec68c593cdc4b.md               |    2 +-
 .../672a53ae8f1ad28c8a1ed0f0.md               |    2 +-
 .../672a53cf67140d8cd85d4b0f.md               |    2 +-
 .../672a549231b8728f7171ed9d.md               |    2 +-
 .../672a54a6675c168faa84252d.md               |    2 +-
 .../672a54bc58319c8fe6f78ad4.md               |    2 +-
 .../672a54ce90c19e9038f481d7.md               |    2 +-
 .../672a54dff9dc439089f1a219.md               |    2 +-
 .../672a54f29d783890d1f94740.md               |    2 +-
 .../672a5507d857a891139abc7f.md               |    2 +-
 .../672a551975938a916c74802c.md               |    2 +-
 .../672a55b5c0c14493328fe36e.md               |    2 +-
 .../672a55dd1d86bc939606e204.md               |    2 +-
 .../672a55eb7791559421ff0cd3.md               |    2 +-
 .../672a55fbc2d95a9453151caf.md               |    2 +-
 .../672985445d7da807c6b4f406.md               |   12 +-
 .../6729959bf9c8e835f46b3f78.md               |   16 +-
 .../672995c9e6f69436dbcccc79.md               |   24 +-
 .../672995d673bd3237200b9e7c.md               |    2 +-
 .../672995f16ed97837b365a9f6.md               |    6 +-
 .../6734e3a9cc78faaf4248d335.md               |   38 +-
 .../6734e867bbf41cc5b11648c4.md               |   24 +-
 .../6734e86f590727c5e7e9ec5e.md               |   22 +-
 .../6734e879c78ee6c61db25b90.md               |  109 +-
 .../6734e88cc46e6dc679420040.md               |   55 +-
 .../674ba6876f7ada867135bb95.md               |   98 +-
 .../672d26385dbe73203c4dac81.md               |   10 +-
 .../672d496eca926b5df8176a67.md               |    2 +-
 .../672d497cb1a1675e47bf7ea1.md               |    6 +-
 .../672d49959621885e9d3e672c.md               |    4 +-
 .../672d49a5cf43945ee09e5fba.md               |    2 +-
 .../672d49b2fb76df5f1d6117af.md               |    2 +-
 .../672d49c4e899345f5b33c24c.md               |    8 +-
 .../672d49d93b54b85faa4dbad7.md               |    2 +-
 .../672d49e65a1c855fe7bb3fdb.md               |    4 +-
 .../672aa6441bcd3758e9f52ae0.md               |   36 -
 .../67329fbcfaf5ff5cdaa38a42.md               |    2 +-
 .../67335f45489c5a11b71d0ed5.md               |    2 +-
 .../6733b072bd8f5b06ccdbd9e2.md               |    2 +-
 .../67340798c2c1776709d8a5fe.md               |    2 +-
 .../673407a223891b6734563c89.md               |    2 +-
 .../673407be6af21d6766ed4b96.md               |    2 +-
 .../673407ca21117a67cf9521ca.md               |    2 +-
 .../673407d56c3dce67fa97969b.md               |    6 +-
 .../673407e02bcf0d682b9a49a9.md               |    2 +-
 .../673407eb10ca9d68634e81d9.md               |    2 +-
 .../672d26917a8ab3220c038a42.md               |    2 +-
 .../673282bea35dbf129efb63d6.md               |    4 +-
 .../672aa578a2129554d4675049.md               |    2 +-
 .../672ab82c1a9bbd0e3aabc39d.md               |    2 +-
 .../672ab83c4297910eade53c2e.md               |    2 +-
 .../672ab849aa1ef70eefd29364.md               |    6 +-
 .../672ab8573f32480f192aaae1.md               |    2 +-
 .../67329f9e9eb84e5c6a5e4366.md               |    2 +-
 .../6732c68f4520d160584a6fd2.md               |    2 +-
 .../6732c69d82814160951b1aa7.md               |    2 +-
 .../6732c6ab21031b60d2b0c999.md               |   18 +-
 .../6732c6ba2ea42b610b9f9ce1.md               |    2 +-
 .../6732c6c72d3738614e1230a2.md               |    4 +-
 .../6732c6d4dec34c61850a1276.md               |    2 +-
 .../6732c6e281c14a61c4858361.md               |    2 +-
 .../6733aae9d25004f60d1e86f2.md               |    2 +-
 .../6733d3a33abdd27cd562bdf2.md               |    2 +-
 .../6733d3ab69e94b7df7ee91b0.md               |    2 +-
 .../6733b0451d6be0065430b418.md               |   67 +-
 .../6734061fe116df617a564a37.md               |   48 +-
 .../6733affc29df1304e2c97e88.md               |    2 +-
 .../673403ca2bb16658309e3632.md               |    2 +-
 .../673403d2aa52d8586a14a269.md               |    2 +-
 .../673403dbf5c9835898632c84.md               |    2 +-
 .../672aa86da9937560d3dfe3d6.md               |    2 +-
 .../672c3a84fb8d4613776cc99e.md               |    8 +-
 .../672c3a8fac7c5613b4bb75de.md               |    4 +-
 .../672c3a9d32c56113fcaedf24.md               |    2 +-
 .../672c3aa9bc3a481425cb52b3.md               |    2 +-
 .../67329fd6ad99c75d4a4b74e4.md               |    2 +-
 .../6733b02d1e556005a544c5e3.md               |  136 +-
 .../6732a06aed1b095f57b0bb82.md               |    2 +-
 .../67338e93b75977a344cf6d40.md               |    2 +-
 .../672bafe4ef812b78696b0e27.md               |    2 +-
 .../672baffc684be178dd02fa06.md               |    2 +-
 .../672bb009952c7a7904a750cb.md               |   12 +-
 .../672baad7bbc4f86762ca173e.md               |   16 +-
 .../6734ddabad59e593a49afafe.md               |    2 +-
 .../6734e2c5780912abd874e79c.md               |    2 +-
 .../6734e2dcb965e5ac0ea38e0f.md               |  104 +-
 .../6763500bd5a85d5898cc21a9.md               |  121 ++
 .../672acc03c257524d6a5151e8.md               |   18 +-
 .../672acc100d59d24da7b4e09c.md               |    7 -
 .../672acc3f6f3e3c4e31ec3e12.md               |    2 +-
 .../6708143cab2b583ecd3324f5.md               |  121 ++
 .../67329f508a6ec45b046700b3.md               |   40 +-
 .../6733ab12b60bd7f6b2b0b0c0.md               |   18 +-
 .../6733d8203da84a08a0f5eab4.md               |   26 +-
 .../6733d829d983c008d2db41a1.md               |   20 +-
 .../6733d83630e76f08ff49e6dc.md               |   24 +-
 .../6733d852175df50937f06061.md               |   56 +-
 .../6733d8606fb893099e3d0df3.md               |   18 +-
 .../672b98be592cfb451f651451.md               |    2 +-
 .../672b98cd77b6b7456b6ef2de.md               |    8 +-
 .../672b98db3bcdd545ab3b3c73.md               |   16 +-
 .../6733ab64775d35f78f5238fe.md               |   84 +-
 .../6733ff4a9319c8486750886c.md               |   72 +-
 .../6733ff5814129c48b4fca88e.md               |   78 +-
 .../6733ff6f02dde548ebe4a6d5.md               |   62 +-
 .../6733ff8d06376149474a0c0d.md               |   26 +-
 .../6733ff9d2fb9c449af68ad99.md               |   47 +-
 .../6733ffacd0ad1e49ec2af051.md               |   38 +-
 .../6733ffb59c62ee4a23522efe.md               |   84 +-
 .../6733ffc7353af34a61ed683a.md               |   22 +-
 .../672d45583fd75a504136fbbb.md               |   16 +-
 .../672d266034b5242126271995.md               |    2 +-
 .../67326c0d7bef01c539120766.md               |    2 +-
 .../67326c15b3b2f0c5827927cc.md               |    6 +-
 .../67326c1fdaf9c0c5ad1a2589.md               |    4 +-
 .../67326c29dcd98fc5ecc49779.md               |   25 +-
 .../67326c3392068ec6184a0c95.md               |    2 +-
 .../67326c3c3ab931c644cea05b.md               |   18 +-
 .../672aa8ac4631d1623ec5cd86.md               |    2 +-
 .../673226732b19aa1cacd0a75c.md               |    4 +-
 .../6732267ecab2151ced471cd4.md               |    2 +-
 .../6732268d05c3661d32a0fee8.md               |    2 +-
 .../6732269a7aa2ca1d6b6574fe.md               |    2 +-
 .../673226a62eb2121da41a3d68.md               |    2 +-
 .../673226afcd33991dd751937a.md               |    2 +-
 .../673226b97d4a731e0577ae93.md               |   18 +-
 .../672aa7e03c2e365e906e5733.md               |    2 +-
 .../672bcc8ccc976fd791610f43.md               |    2 +-
 .../672bcc9c4a6dd6d7dd3e6357.md               |    2 +-
 .../672bccae6e556cd81cef6af2.md               |    2 +-
 .../672bccc8ea33bad87abb3c56.md               |    2 +-
 .../672bccdb8f1823d8c60f914c.md               |    2 +-
 .../672bccebe1fc82d911c3f078.md               |    2 +-
 .../672aa8985acb7361e656f94c.md               |   16 +-
 .../672cf3ca326da9f63683e236.md               |    2 +-
 .../6734e3ceee2da4b0301719b7.md               |  128 +-
 .../673500abfe36cd015b67b1b7.md               |   63 +-
 .../673500b41af8500191febedc.md               |   72 +-
 .../673500bfe1f41601c1ddb1a2.md               |   73 +-
 .../672d264645e289208e562f10.md               |    2 +-
 .../6732518a8627876f4fcd18a4.md               |    6 +-
 .../6733aafb9c0802f66cc1e056.md               |    6 +-
 .../6733d608654c17868e01c0a2.md               |    2 +-
 .../672ac37104dc2530a769e6a4.md               |    2 +-
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../672d269da46786225e3fe3fd.md               |    2 +-
 .../673284d5e52ef81a2169b097.md               |    4 +-
 .../673284e7244c0c1a649121b9.md               |    4 +-
 .../67329ffd75010f5ddeb4ea13.md               |    2 +-
 .../67336296a3c1591da81856c2.md               |    2 +-
 .../673362a34edda41dedf87623.md               |    4 +-
 .../673362b3f763ae1e38e17df7.md               |    2 +-
 .../673362be2f70c21e65bc5459.md               |    2 +-
 .../673362cbb475e21eab726506.md               |    4 +-
 .../673362d7f94d551edb532d24.md               |    2 +-
 .../673362e43d57b51f1ad2d466.md               |    2 +-
 .../672a4fa7d335bc7cfb63a392.md               |   22 +-
 .../6716744f7245947a3dd60009.md               |    2 +-
 .../671682dd88e461a8e2620f38.md               |    2 +-
 .../6716830dbaf95da9564f2e3b.md               |    8 +-
 .../67168323932391a9ee0d3a9e.md               |    8 +-
 .../67329f7f3d1bd75c17896c66.md               |    2 +-
 .../6732c04638420641dcca2e6e.md               |    2 +-
 .../6732c05595ca7d422b9e55ff.md               |    2 +-
 .../6732c06654ea3442724284fe.md               |    2 +-
 .../6732c07238355642a9781dfb.md               |    2 +-
 .../6733ab269b378bf724c9ac71.md               |    2 +-
 .../6733dd694f91d61a5272b4ac.md               |    2 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../67167835def3588873f339c6.md               |   12 +-
 .../6716823876aa22a68ba3e2ec.md               |   28 +-
 .../6716825aff3434a71fdc3e99.md               |   18 +-
 .../67168278ac6df6a799555db5.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../672d26809d388621ad1ecd43.md               |    2 +-
 .../6732808f3221720adc833e81.md               |    4 +-
 .../673280a1c29d0a0b17316e56.md               |    2 +-
 .../672d266e014ef8216df987d2.md               |    2 +-
 .../673271884bf678d8b9c64f56.md               |   72 +-
 .../67327195e77b1bd90bdd49d7.md               |   64 +-
 .../6732719e2e3ad4d947410b65.md               |    2 +-
 .../673271a8998ddfd97578d095.md               |    4 +-
 .../673271b4213033d9b661c70e.md               |    2 +-
 .../673271c7581a27d9dd78f6d6.md               |    4 +-
 .../673271dffbc34fda31da9515.md               |    2 +-
 .../673271e8e3d43bda89f723b3.md               |    2 +-
 .../673271f39f124ddac28866d5.md               |    2 +-
 .../673271fd11d063daf0cf8d20.md               |    4 +-
 .../6732720e95f6a0db526a2e4d.md               |    2 +-
 .../67327217e70ee0db7913b255.md               |    4 +-
 .../67329f737126b75bcb949e13.md               |    2 +-
 .../6732b721eb98f224868b44a6.md               |    2 +-
 .../6732b72961f94324bd6390de.md               |    2 +-
 .../6732b73509f71f24ef05e86e.md               |    2 +-
 .../6732b73d25cc01251b778043.md               |    2 +-
 .../6732b749b8aad125523dcda5.md               |    2 +-
 .../6732b758194c97257d23fc72.md               |    2 +-
 .../6732b76c03f7d825c7fc74ee.md               |    2 +-
 .../6732b77adf9de12617a2dbb3.md               |    2 +-
 .../6732b788046862264eeb1c39.md               |    2 +-
 .../6732b79c6aa77826855a3f11.md               |    2 +-
 .../6733aad43b3ebff588a26fb5.md               |    2 +-
 .../6733c5ba834ded4bb067e67c.md               |    4 +-
 .../6733c5c549775c4be710237c.md               |    4 +-
 .../6733c5d0048bb74c18431296.md               |  112 +-
 .../6733c5dc74176e4c496d09e6.md               |   68 +-
 .../6733c5e54e3a154c8078ed48.md               |   96 +-
 .../6733c5f20cc9584cada942a4.md               |  115 +-
 .../672d2654f78cbf20e0ba4501.md               |   18 +-
 .../673263d58da27ea7809963bf.md               |    2 +-
 .../673263df0eb568a7b450f2fc.md               |    2 +-
 .../673263e80dd43da7df3ae565.md               |    4 +-
 .../673263f4a5899da8124542fd.md               |    2 +-
 .../6732a0472f52015e511f8e58.md               |    2 +-
 .../67336894ae148431a870694d.md               |    2 +-
 .../6733689f9f31dd31e7d9c789.md               |    2 +-
 .../673368b1cf26253212a3cfb2.md               |    2 +-
 .../673368c0161e6b326a7e03f0.md               |    2 +-
 .../673368ccf52205329b729378.md               |    2 +-
 .../673368d97e8ce232cdcd6b68.md               |    2 +-
 .../673368e7bd043f331919514d.md               |    4 +-
 .../673368f272706633516e4873.md               |    2 +-
 .../673368fbe12a2b337645053d.md               |    2 +-
 .../673369067f824d33a90a0534.md               |    2 +-
 .../673369101e5c4a33db0e8a02.md               |    2 +-
 .../6733691d88e3053414689276.md               |    2 +-
 .../6733692ffe1da034469f7917.md               |   10 +-
 .../6733693bfce9a43489a355db.md               |    2 +-
 .../6733694805a85d34ced08a9b.md               |    2 +-
 .../67336956340e8a34fbd5d9f3.md               |    2 +-
 .../6733696567d2273540aa6033.md               |    2 +-
 .../6733697661182d357fc643d2.md               |    2 +-
 .../673369829e232835c2732656.md               |    2 +-
 .../66ed8fa2f45ce3ece4053eab.md               |   10 +-
 .../66df3b712c41c499e9d31e5b.md               |   50 +-
 .../66ed8fd0f45ce3ece4053eaf.md               |    4 +-
 .../66ed8fd7f45ce3ece4053eb0.md               |   36 +-
 .../66ed9009f45ce3ece4053eb7.md               |   68 +-
 .../66ed9010f45ce3ece4053eb8.md               |    8 +-
 .../66edd10913f078e7669eca81.md               |    2 +-
 .../66ed901ff45ce3ece4053eba.md               |   40 +-
 .../66edd3403d7077eece6dc4b6.md               |    2 +-
 .../quiz-git/66f1b06a5a5d10cc100af620.md      |    8 +-
 .../66ed9026f45ce3ece4053ebb.md               |    4 +-
 .../66ed902df45ce3ece4053ebc.md               |  244 +--
 .../67358ac128957c865dcf3ddf.md               |    2 +-
 .../66edcd0ecb4b25dc64a34804.md               |   18 +-
 .../66edd3011f18f4ee1bd9d28b.md               |    4 +-
 .../66edc31c44f1b9c1d5c5ebca.md               |   24 +-
 .../66edc25ae5ea80bf6f785552.md               |   94 +-
 .../66ed903cf45ce3ece4053ebe.md               |    4 +-
 .../66ed9043f45ce3ece4053ebf.md               |   12 +-
 .../671a887a7e62c75e9ab1ee4a.md               |   20 +-
 .../67072fc183c7ca6c588feb4d.md               |    9 +-
 .../671a955b74ab5588735800d1.md               |    2 +-
 .../671a88d636cebc5fbd407b78.md               |   17 +-
 .../671a940c69cdee833d4cc312.md               |    4 +-
 .../671a907bad4538752765f2ff.md               |    2 +-
 .../review-css/671a9a0a140c2b9d6a75629f.md    |   10 +-
 .../6723cd54fc196dbd053f9dfb.md               |    4 +-
 .../6723cc7a8e7aa3b9befd4bac.md               |    2 +-
 .../6723ce555ff2dfc0cc04b69a.md               |    4 +-
 .../671a87a39b88245a579c2271.md               |   38 +-
 .../review-html/671a883163d5ab5d47145880.md   |  151 +-
 .../6723c66f623701a3cdf72130.md               |    2 +-
 .../6723cf27c6e9a0c3f3041385.md               |   10 +-
 .../6723cc0ca05ce9b87a319ceb.md               |    2 +-
 .../6723c463e51a2d9b747d7529.md               |    2 +-
 .../6723cdfa4ae237bf6b7e32eb.md               |    8 +-
 .../6723c1946e4cd7909a836bb4.md               |    2 +-
 .../6723be264695fb7e619fe1fa.md               |    6 +-
 .../6723d3cfdd0717d3f1bf27e3.md               |   44 +-
 .../6723d0ac516099c902394e8b.md               |    4 +-
 .../67487e141bb6a7140a352e12.md               |    2 +-
 .../671a83934b61f64cefe87a61.md               |   12 +-
 .../5f35e5c4321f818cdc4bed30.md               |    2 +-
 .../63b61490e633a22b4593e62f.md               |    2 +-
 .../63c9e8fe3a6f022a05a04675.md               |  198 ++-
 .../660404511dbf1b90eb23b617.md               |    4 +-
 .../6604080b66ff6e942d8225b1.md               |    4 +-
 .../66040ae710de0e96c26a0201.md               |    2 +-
 .../646c48df8674cf2b91020ecc.md               |    2 +-
 .../646ceb843412c74edee27a79.md               |   16 +-
 .../646cf2249f02ca5233d9af7c.md               |    8 +-
 .../6676a8b01e56ec1a1e07c202.md               |   16 +-
 .../5dc174fcf86c76b9248c6eb2.md               |    8 +-
 .../5dc24614f86c76b9248c6ebd.md               |    2 +-
 .../5dfa37b9eacea3f48c6300b0.md               |    3 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../61764c602bee6974e7790f35.md               |    2 +-
 .../617bbb6b97a83f6d1f7d6e38.md               |    2 +-
 .../61a49d15bdbb5e57cc6fd280.md               |    2 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 .../6733319f1d586b1923e029e3.md               |    6 +-
 .../673332a6b63f9f1e1f81ba9b.md               |    6 +-
 .../673337337f794d3025ded433.md               |    2 +-
 .../66a9401c9d660d6bb15993e2.md               |    2 +-
 .../67116d7584d0b469b14579bf.md               |    2 +-
 .../67116d7584d0b469b14579c1.md               |   50 +-
 .../67116d7584d0b469b14579c2.md               |   54 +-
 .../67116d7584d0b469b14579c3.md               |   29 +-
 .../67116d7584d0b469b14579c4.md               |   32 +-
 .../66c8ba975ee7230e29f6c4ad.md               |    4 +-
 .../67471d60ce8e6268fe9e12f6.md               |  604 +++++++
 .../6747237371f13173c9f6c27e.md               |  591 +++++++
 .../674724ff8af92f7733e6d980.md               |  585 +++++++
 .../6747257cdf5412781e138bb2.md               |  619 +++++++
 .../6747274264e8a5799fb3e0b5.md               |  626 +++++++
 .../674728eda5829d7b4c360643.md               |  629 +++++++
 .../6747299cbed5107c6a00d64c.md               |  656 ++++++++
 .../67472ab9f570797dbb01568a.md               |  656 ++++++++
 .../67472eef7b4b7ba77b50929b.md               |  664 ++++++++
 .../67473042e8751eac62fafc82.md               |  661 ++++++++
 .../674735e3b28351b8b8f05807.md               |  709 ++++++++
 .../674757668684f9deaa6ac3c0.md               |  676 ++++++++
 .../674836ba82e9057dfee1849c.md               |  690 ++++++++
 .../674850b437668dd08edddbe2.md               |  687 ++++++++
 .../6748567229cc8fe3f706de02.md               |  698 ++++++++
 .../6748bab9827a356c39559214.md               |  707 ++++++++
 .../674dda6c6ae8bb538678e125.md               |  671 ++++++++
 .../674de4ee2039496c30a31b71.md               |  693 ++++++++
 .../674e2e4e04eb381ccfe92e15.md               |  708 ++++++++
 .../674e305b7bda7c1f4f37a930.md               |  719 ++++++++
 .../674e316e3892d32108ad2bb9.md               |  692 ++++++++
 .../674e34c42ee8f1237e4623cc.md               |  712 ++++++++
 .../674f489bf617af2bea9b92b5.md               |  729 +++++++++
 .../674f50cce486fb404751a29c.md               |  729 +++++++++
 .../674f534fa181f64a789ffcf9.md               |  787 +++++++++
 .../67503cecd563135d4f27b38e.md               |  729 +++++++++
 .../675057ce9acd418619127da4.md               |  746 +++++++++
 .../67505d3a32d45997d2af4c0f.md               |  770 +++++++++
 .../675069b67b8267b36fa550b3.md               |  738 +++++++++
 .../6750712ee950facad5edc203.md               |  727 +++++++++
 .../67516a431252ed30832fa7c6.md               |  727 +++++++++
 .../67516ca9b7fe6636208c5ab5.md               |  726 +++++++++
 .../67516e888477083c31614dc7.md               |  743 +++++++++
 .../67517ef2fae05b65108212db.md               |  754 +++++++++
 .../6751d5d32e58d065652e26a5.md               |  747 +++++++++
 .../6751e1c117350b7d3f356e1b.md               |  749 +++++++++
 .../6752c62efa90554c01415e7b.md               |  768 +++++++++
 .../6752ecd811c96d5dc33ae853.md               |  760 +++++++++
 .../6752edba757ff96404faf9e9.md               |  769 +++++++++
 .../675304e7937e62902e08a3ab.md               |  764 +++++++++
 .../675309b2795c2a9ae03b8812.md               | 1442 +++++++++++++++++
 .../67532282ab9b95d7083617ee.md               |  795 +++++++++
 .../675340b809683f45cae96539.md               |  736 +++++++++
 .../6757f2b25418da4f73e29eb6.md               |  760 +++++++++
 .../6758a61fc7e949923716ec41.md               |  690 ++++++++
 .../67594f37fa0c684835f1b064.md               |  696 ++++++++
 .../673339d96c56d36e963e888e.md               |    2 +-
 .../6733b5632fb854bc6c58dc0d.md               |    2 +-
 .../6733b5e6f210c1bd1afdf8b3.md               |    2 +-
 .../67349ba230cff237c0f2bdf2.md               |    2 +-
 .../67349d6e726b2c3c7f7301e8.md               |    2 +-
 .../6734a13a29acdf47f2b8e161.md               |    2 +-
 .../6734a2385c52c54d916a8b86.md               |    2 +-
 .../6734a606e5968a5a19b77171.md               |    4 +-
 .../6734a772196245601e4b80e0.md               |    2 +-
 .../6734ab61e916486c80c490d1.md               |    2 +-
 .../6734b36f1a3ce17e73327f24.md               |    2 +-
 .../6734bbc0bd741598f942352e.md               |    2 +-
 .../6734c10a327760a665b7d5b9.md               |    2 +-
 .../6734eee1f9498cd90f9ae340.md               |    2 +-
 .../6734f0ae9d1cf4dfd43a7805.md               |    2 +-
 .../6734f6290ebd5cfbc75996af.md               |    2 +-
 .../6734fa225c6667121e589f7e.md               |    2 +-
 .../67350acfd2006f2777295b96.md               |    2 +-
 .../67351225403acd3d6f70ed6d.md               |    2 +-
 .../6735145b0ee741461bdbaa49.md               |    2 +-
 .../673521668be7905059b2d555.md               |    2 +-
 .../673529d08c0d9c5a4193a465.md               |    2 +-
 .../673762590f4bc1771c3a1e97.md               |    2 +-
 .../673788448f390305b34aa814.md               |    2 +-
 .../6737a1a073a0d14c6544d301.md               |    2 +-
 .../6737a5058ff3015829ce3265.md               |    2 +-
 .../6737a95d5b431860f96ca7bb.md               |    2 +-
 .../6737ac8e4fe7ae6b91c806bd.md               |    2 +-
 .../6737c6d5d66b5cc3dac09c7b.md               |    2 +-
 .../6738a5c704680355e29e077c.md               |    2 +-
 .../6738a8035efec45acd8fdbf9.md               |    2 +-
 .../6738ad2fd11775752d23ddc2.md               |    2 +-
 .../67353fb237ffbd01af3be1cc.md               |   36 +-
 .../673540f6e49ae33d6a235c20.md               |    8 +-
 .../673542088e459b6def5d6e56.md               |    8 +-
 .../6735424ecfeb557d81dcc9d1.md               |   18 +-
 .../673543d867b44ac7580610a2.md               |   44 +-
 .../6740495ba48aa94e5667b436.md               |    1 +
 .../6745d9df333efe2543a1f457.md               |    4 +-
 .../674ef11f75254548672d998c.md               |  125 ++
 .../674ef2d357676e50e4691658.md               |  116 ++
 .../674ef2d357676e50e4691659.md               |  166 ++
 .../674ef2d357676e50e469165a.md               |  117 ++
 .../674ef2d357676e50e469165b.md               |  126 ++
 .../674ef2d357676e50e469165c.md               |  144 ++
 .../674ef2d357676e50e469165d.md               |  265 +++
 .../66cf33305293e1b35c1aef7f.md               |    2 +-
 .../66e2d680e129e1423116a541.md               |    2 +-
 .../66e2e5d890ac8a54c9d703bd.md               |    2 +-
 .../66e2eab8a5638f57b637b7cc.md               |    2 +-
 .../66e2f06b191e305c00574e4d.md               |   10 +-
 .../66c742d045c9fc2e09fa64b1.md               |    1 +
 .../66c748ffdfbe4f2ede268be2.md               |    6 +-
 .../671fafbae959c048d82bac8d.md               |    6 +-
 .../64fad9cd2eeb1e7ca2ca8c8b.md               |    4 +-
 .../64ff04cc33779427a6412449.md               |    2 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../67278e07d5544c1a93f7f113.md               |    8 +-
 .../67278fa39133d120afee631c.md               |    8 +-
 .../672836d6ec0ae23f4724ccb1.md               |    2 +-
 .../6728378c94eaf541fce8f334.md               |    2 +-
 .../67289c4908f407948ef08a55.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |    9 +-
 .../669e2f60e83c011754f711f9.md               |   14 +-
 .../670803abcb3e980233da4768.md               |   44 +-
 .../6708382cf088b216580a9ff1.md               |   14 +-
 .../67083952f800051a8a21fcfd.md               |    6 +-
 .../6708396caa00e11b597b3365.md               |   14 +-
 .../672985445d7da807c6b4f406.md               |   12 +-
 .../672995f16ed97837b365a9f6.md               |    6 +-
 .../6708143cab2b583ecd3324f5.md               |  121 ++
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../6716830dbaf95da9564f2e3b.md               |    6 +-
 .../67168323932391a9ee0d3a9e.md               |    6 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../67167835def3588873f339c6.md               |   12 +-
 .../6716823876aa22a68ba3e2ec.md               |   28 +-
 .../6716825aff3434a71fdc3e99.md               |   18 +-
 .../67168278ac6df6a799555db5.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../67278e07d5544c1a93f7f113.md               |    8 +-
 .../67278fa39133d120afee631c.md               |    8 +-
 .../672836d6ec0ae23f4724ccb1.md               |    2 +-
 .../6728378c94eaf541fce8f334.md               |    2 +-
 .../67289c4908f407948ef08a55.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |    9 +-
 .../669e2f60e83c011754f711f9.md               |   14 +-
 .../670803abcb3e980233da4768.md               |   44 +-
 .../6708382cf088b216580a9ff1.md               |   14 +-
 .../67083952f800051a8a21fcfd.md               |    6 +-
 .../6708396caa00e11b597b3365.md               |   14 +-
 .../672985445d7da807c6b4f406.md               |   12 +-
 .../672995f16ed97837b365a9f6.md               |    6 +-
 .../6708143cab2b583ecd3324f5.md               |  121 ++
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../6716830dbaf95da9564f2e3b.md               |    6 +-
 .../67168323932391a9ee0d3a9e.md               |    6 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../67167835def3588873f339c6.md               |   12 +-
 .../6716823876aa22a68ba3e2ec.md               |   28 +-
 .../6716825aff3434a71fdc3e99.md               |   18 +-
 .../67168278ac6df6a799555db5.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |    9 +-
 .../6708396caa00e11b597b3365.md               |   14 +-
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../67278e07d5544c1a93f7f113.md               |    8 +-
 .../67278fa39133d120afee631c.md               |    8 +-
 .../672836d6ec0ae23f4724ccb1.md               |    2 +-
 .../6728378c94eaf541fce8f334.md               |    2 +-
 .../67289c4908f407948ef08a55.md               |    2 +-
 .../66da326c02141df538f29ba5.md               |    9 +-
 .../669e2f60e83c011754f711f9.md               |   14 +-
 .../670803abcb3e980233da4768.md               |   44 +-
 .../6708382cf088b216580a9ff1.md               |   14 +-
 .../67083952f800051a8a21fcfd.md               |    6 +-
 .../6708396caa00e11b597b3365.md               |   14 +-
 .../672985445d7da807c6b4f406.md               |   12 +-
 .../672995f16ed97837b365a9f6.md               |    6 +-
 .../6708143cab2b583ecd3324f5.md               |  121 ++
 .../6729974ec29be33cb00eb54d.md               |   12 +-
 .../6716830dbaf95da9564f2e3b.md               |    6 +-
 .../67168323932391a9ee0d3a9e.md               |    6 +-
 .../6716743531fc9a797351c21e.md               |    6 +-
 .../67167835def3588873f339c6.md               |   12 +-
 .../6716823876aa22a68ba3e2ec.md               |   28 +-
 .../6716825aff3434a71fdc3e99.md               |   18 +-
 .../67168278ac6df6a799555db5.md               |    6 +-
 .../671682b3983489a819507553.md               |    6 +-
 .../671141feba228a35cefba82d.md               |    2 +-
 .../672b4434dd6d6a1edc405419.md               |    2 +-
 3024 files changed, 168285 insertions(+), 12212 deletions(-)
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
 create mode 100644 curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
 create mode 100644 curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
 create mode 100644 curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
 create mode 100644 curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
 create mode 100644 curriculum/challenges/espanol/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/german/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
 create mode 100644 curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md

diff --git a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
index d4a087750e..370bbf5475 100644
--- a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
+++ b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
@@ -1,5 +1,5 @@
 id: 561abd10cb81ac38a17513bc
-title: JavaScript Algorithms and Data Structures Certification
+title: Legacy JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures
 challengeType: 7
 isPrivate: true
diff --git a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
index c66b758bcf..8329efcdcb 100644
--- a/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
+++ b/curriculum/challenges/chinese-traditional/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
@@ -1,5 +1,5 @@
 id: 658180220947283cdc0689ce
-title: JavaScript 算法和數據結構（Beta）認證
+title: JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures-v8
 challengeType: 7
 isPrivate: true
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
index 66480b5fff..066a37eceb 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 爲 `blue-box` 的元素的 `margin` 應設置爲 `-15px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '-15px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)["margin-top"]; 
+assert.strictEqual(marginTop, "-15px"); 
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
index 425dcfade1..51d36422da 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
@@ -38,35 +38,42 @@ Remember that you can apply multiple classes to an element using its `class` att
 Your `img` element should have the class `smaller-image`.
 
 ```js
-assert($('img').hasClass('smaller-image'));
+assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
 ```
 
 Your `img` element should have the class `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Your image should have a border width of `10px`.
 
 ```js
-assert(
-  $('img').hasClass('thick-green-border') &&
-    parseInt($('img').css('border-top-width'), 10) >= 8 &&
-    parseInt($('img').css('border-top-width'), 10) <= 12
-);
+// Note: to any future maintainers, the read width of the border is dependent on 
+// the zoom. For example we cannot match 10px exactly because if a campers set the zoom to 110% 
+// it will be read as 9~px. 
+const image = document.querySelector('img'); 
+const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; 
+const widthNumber = parseInt(imageBorderTopWidth);
+assert.isAtLeast(widthNumber, 8);
+assert.isAtMost(widthNumber, 12);
 ```
 
 Your image should have a border style of `solid`.
 
 ```js
-assert($('img').css('border-right-style') === 'solid');
+const image = document.querySelector('img'); 
+const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; 
+assert.strictEqual(borderRightStyle, 'solid');
 ```
 
 The border around your `img` element should be green.
 
 ```js
-assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+const image = document.querySelector('img'); 
+const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; 
+assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
index e4aba4a670..833707a940 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ CSS 允許你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-le
 class 爲 `blue-box` 的元素的上外邊距屬性值 `margin` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 class 爲 `blue-box` 的元素的右外邊距屬性值 `margin` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 class 爲 `blue-box` 的元素的下外邊距屬性值 `margin` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 class 爲 `blue-box` 的元素的左外邊距屬性值 `margin` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft,'40px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
index 532da6f8dc..a6cf427e59 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ CSS 允許你使用 `padding-top`、`padding-right`、`padding-bottom`、`paddin
 class 爲 `blue-box` 的元素的上內邊距屬性值 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 class 爲 `blue-box` 的元素的右內邊距屬性值 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 class 爲 `blue-box` 的元素的下內邊距屬性值 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 class 爲 `blue-box` 的元素的左內邊距屬性值 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
index c9c99cb8fe..4cafd83a72 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
@@ -22,18 +22,23 @@ Your cat photo currently has sharp corners. We can round out those corners with
 圖片元素應有 `thick-green-border` class。
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 圖片的邊框半徑應爲 `10px`。
 
 ```js
-assert(
-  $('img').css('border-top-left-radius') === '10px' &&
-    $('img').css('border-top-right-radius') === '10px' &&
-    $('img').css('border-bottom-left-radius') === '10px' &&
-    $('img').css('border-bottom-right-radius') === '10px'
-);
+const image = document.querySelector('img');
+const style = window.getComputedStyle(image);  
+const borderTopLeftRadius = style['border-top-left-radius']; 
+const borderTopRightRadius = style['border-top-right-radius'];
+const borderBottomLeftRadius = style['border-bottom-left-radius'];
+const borderBottomRightRadius = style['border-bottom-right-radius'];
+
+assert.strictEqual(borderTopLeftRadius, '10px');
+assert.strictEqual(borderTopRightRadius, '10px');
+assert.strictEqual(borderBottomLeftRadius, '10px');
+assert.strictEqual(borderBottomRightRadius, '10px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
index 7cb62e68d7..840770171d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 爲 `blue-box` 的元素的 `margin` 值應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '20px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
index c756bc66a0..5a29598272 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
@@ -30,7 +30,9 @@ Now let's put our Cat Photo App away for a little while and learn more about sty
 `blue-box` 這一 class 應將元素的 `padding` 值設置爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '20px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
index 1d49492240..a8ed8ae6c7 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
@@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to
 The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
index 000f556c4e..3f64540f77 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
@@ -22,17 +22,13 @@ When you create your variables in `:root` they will set the value of that variab
 應在 `penguin` class 裏重定義 `--penguin-belly` 的變量值，新的值應爲 `white`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` 類不應包含 `background-color` 屬性。
 
 ```js
-assert(
-  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
-);
+assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
 ```
 
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md
index 1ec9e8ca66..597cd0f5dc 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-color-of-text.md
@@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red.
 Your `h2` element should have a `style` declaration.
 
 ```js
-assert($('h2').attr('style'));
+assert.exists(document.querySelector('h2').getAttribute('style'));
 ```
 
 Your `h2` element should have color set to `red`.
 
 ```js
-assert($('h2')[0].style.color === 'red');
+assert.strictEqual(document.querySelector('h2').style.color, 'red');
 ```
 
 Your `style` declaration should end with a `;` .
 
 ```js
-assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
index 90010f4794..0943967c8e 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
@@ -26,7 +26,7 @@ h1 {
 在 `style` 樣式聲明區域裏，`p` 元素的 `font-size` 的值應爲 `16px`。 請注意，瀏覽器和文本縮放應設置爲 100％。
 
 ```js
-assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
index fa726acba5..98a1d04df8 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
@@ -26,9 +26,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr
 應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
index af399b4bed..6a5c2fbc19 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
@@ -28,19 +28,21 @@ You can set an element's background color with the `background-color` property.
 `div` 元素應有 `silver-background` class。
 
 ```js
-assert($('div').hasClass('silver-background'));
+assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
 ```
 
 `div` 元素背景顏色應設置爲銀色。
 
 ```js
-assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+const div = document.querySelector('div');
+const backgroundColor = window.getComputedStyle(div)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
 ```
 
 class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md
index 319bba7340..c02c96cade 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/import-a-google-font.md
@@ -40,37 +40,29 @@ GENERIC_NAME 是可選的，它用來指明在其他字體不可用時的後備
 應引入 `Lobster` 字體。
 
 ```js
-assert($('link[href*="googleapis" i]').length);
+assert.exists(document.querySelector('link[href*="googleapis" i]'));
 ```
 
 `h2` 元素應使用 `Lobster` 字體。
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/lobster/i)
-);
+const h2 = document.querySelector('h2'); 
+const fontFamily = window.getComputedStyle(h2)['font-family']; 
+assert.match(fontFamily, /lobster/i);
 ```
 
 應使用元素選擇器（`h2`）來改變字體樣式。
 
 ```js
-assert(
-  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
 ```
 
 `p` 元素應保持使用 `monospace` 字體。
 
 ```js
-assert(
-  $('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
index c95407712b..126faaa5b6 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
@@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red-
 Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
-    )
+const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
+assert.match(
+  spacelessCode,
+  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
 );
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md
index 12cd4925e1..34cc47148b 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-css-variables.md
@@ -24,8 +24,9 @@ CSS 變量經常會定義在 <dfn>:root</dfn> 元素內，這樣就可被所有
 應在 `:root` 裏聲明 `--penguin-belly` 變量並賦值 `pink`。
 
 ```js
-assert(
-  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
 );
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
index 482bf22628..550e857005 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
@@ -26,61 +26,57 @@ First, create an `h1` element with the text `Hello World`.
 應創建一個 `h1` 元素。
 
 ```js
-assert($('h1').length > 0);
+assert.isNotEmpty(document.querySelectorAll('h1'));
 ```
 
 `h1` 元素的內容文本應爲 `Hello World`。
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .text()
-      .match(/hello world/i)
+assert.match(
+  document.querySelector('h1').textContent,
+  /hello world/i
 );
 ```
 
 確保 `h1` 元素具有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/h1>/g) &&
-    code.match(/<h1/g) &&
-    code.match(/<\/h1>/g).length === code.match(/<h1/g).length
-);
+const commentlessCode = __helpers.removeHtmlComments(code);
+assert.match(commentlessCode, /<\/h1>/g);
+assert.match(commentlessCode, /<h1/g);
+assert.lengthOf(commentlessCode.match(/<\/h1>/g), commentlessCode.match(/<h1/g).length);
 ```
 
 `body` 元素的 `color` 屬性值應爲 `green`。
 
 ```js
-assert($('body').css('color') === 'rgb(0, 128, 0)');
+const bodyElement = document.querySelector('body');
+const color = window.getComputedStyle(bodyElement)['color']; 
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 `body` 元素的 `font-family` 屬性值應爲 `monospace`。
 
 ```js
-assert(
-  $('body')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const bodyElement = document.querySelector('body');
+const fontFamily = window.getComputedStyle(bodyElement)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 `h1` 元素應該繼承 `body` 的 `monospace` 字體屬性。
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .css('font-family')
-      .match(/monospace/i)
-);
+const h1Element = document.querySelector('h1');
+const fontFamily = window.getComputedStyle(h1Element)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 `h1` 元素應該繼承 `body` 的 `green` 顏色屬性。
 
 ```js
-assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
index 9764db4f73..e399e3d734 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
@@ -20,13 +20,15 @@ In addition to pixels, you can also specify the `border-radius` using a percenta
 圖片的邊框圓角應設置爲 `50%`，這樣圖片就會是圓形的。
 
 ```js
-assert(parseInt($('img').css('border-top-left-radius')) > 48);
+const image = document.querySelector('img');
+const borderTopLeftRadius = window.getComputedStyle(image)['border-top-left-radius'];
+assert.strictEqual(parseInt(borderTopLeftRadius), 50);
 ```
 
 `border-radius` 的值應爲 `50%`。
 
 ```js
-assert(code.match(/50%/g));
+assert.match(__helpers.removeCssComments(code), /50%/g);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
index 3ee390ba2c..807dde8f41 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
@@ -32,39 +32,41 @@ color: red !important;
 `h1` 元素應包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素應包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 元素應有 `id`， 值爲 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 `h1` 元素應有一個內聯樣式 `color: white`。
 
 ```js
-assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
+const commentessCode = __helpers.removeHtmlComments(code);
+assert.match(commentessCode, /<h1.*style/gi);
+assert.match(commentessCode, /<h1.*style.*color\s*?:/gi);
 ```
 
 `pink-text` class 應有 `!important` 關鍵詞 ，以覆蓋其他聲明。
 
 ```js
-assert(
-  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
-);
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g);
 ```
 
 `h1` 元素應爲粉紅色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
index 0e9b410b65..7b13a2459c 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
@@ -40,43 +40,45 @@ We just proved that browsers read CSS from top to bottom in order of their decla
 `h1` 元素應包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素應包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 元素的 id 應爲 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'),'orange-text');
 ```
 
 應只有一個 `h1` 元素。
 
 ```js
-assert($('h1').length === 1);
+assert.lengthOf(document.querySelectorAll('h1'), 1);
 ```
 
 應存在名爲 `orange-text` 的 id 選擇器。
 
 ```js
-assert(code.match(/#orange-text\s*{/gi));
+assert.match(__helpers.removeCssComments(code), /#orange-text\s*{/gi);
 ```
 
 不要在 `h1` 元素裏面使用 `style` 屬性。
 
 ```js
-assert(!code.match(/<h1.*style.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<h1.*style.*>/gi);
 ```
 
 `h1` 元素的字體顏色應爲橘色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 165, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
index 3eeffbc98f..92c52caa97 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -28,31 +28,33 @@ So we've proven that id declarations override class declarations, regardless of
 `h1` 元素應包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素應包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 的 id 屬性值應爲 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 `h1` 元素應含有行內樣式。
 
 ```js
-assert(document.querySelector('h1[style]'));
+assert.exists(document.querySelector('h1[style]'));
 ```
 
 `h1` 元素的字體顏色應該爲白色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 255, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 255, 255)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
index e3f7e8de44..95eda8f2ee 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
@@ -34,25 +34,27 @@ class="class1 class2"
 `h1` 元素應包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素應包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `blue-text` 和 `pink-text` 需同時應用於 `h1` 元素上。
 
 ```js
-assert($('.pink-text').hasClass('blue-text'));
+assert.isTrue(document.querySelector('.pink-text').classList.contains('blue-text'));
 ```
 
 `h1` 元素的顏色應爲藍色。
 
 ```js
-assert($('h1').css('color') === 'rgb(0, 0, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
index a40148901b..207d277b63 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -26,19 +26,21 @@ Sometimes your HTML elements will receive multiple styles that conflict with one
 `h1` 元素應含有 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `<style>` 標籤應含有一個可以改變 `color` 的 `pink-text` class。
 
 ```js
-assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g);
 ```
 
 `h1` 元素的字體顏色應爲粉色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
index 2c86fe60b5..54551af760 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
@@ -28,12 +28,9 @@ Make all of your `p` elements use the `monospace` font.
 Your `p` elements should use the font `monospace`.
 
 ```js
-assert(
-  $('p')
-    .not('.red-text')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const notRed = document.querySelector('p:not(.red-text)');
+const fontFamily = window.getComputedStyle(notRed)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
index 8efcc9289a..16db905a8c 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -30,7 +30,7 @@ In addition to classes, each HTML element can also have an `id` attribute.
 `form` 元素的 id 應爲 `cat-photo-form`。
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/size-your-images.md
index 25c7348748..b07a1bbf5f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/size-your-images.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/size-your-images.md
@@ -29,19 +29,18 @@ CSS has a property called `width` that controls an element's width. Just like wi
 `img` 元素應包含 `smaller-image` class。
 
 ```js
-assert(
-  $("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
-    .trim().split(/\s+/g).includes('smaller-image')
-);
+const relaxingCatImage = document.querySelector("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']");
+const catImageClass = relaxingCatImage.getAttribute('class').trim().split(/\s+/g);
+assert.include(catImageClass, 'smaller-image');
 ```
 
 圖片寬度應爲 100px。
 
 ```js
-assert(
-  $('img').width() < 200 &&
-    code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
-);
+const image = document.querySelector('img');
+const width = image.getBoundingClientRect().width;
+assert.isBelow(width, 200); 
+assert.match(__helpers.removeCssComments(code), /\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
index 11baf82107..1ded8a1d33 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
@@ -36,33 +36,27 @@ p {
 h2 元素的字體應設置爲 `Lobster`。
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/^"?lobster/i)
-);
+const h2Element = document.querySelector('h2');
+const fontFamily = window.getComputedStyle(h2Element)['font-family']; 
+assert.match(fontFamily, /^"?lobster/i);
 ```
 
 當 `Lobster` 字體失效時，h2 元素應該降級使用 `monospace` 字體。
 
 ```js
-assert(
-  /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi);
 ```
 
 通過添加`<!--`，註釋掉 `Lobster` 字體的引入。
 
 ```js
-assert(new RegExp('<!--[^fc]', 'gi').test(code));
+assert.match(code, /<!--[^fc]/gi);
 ```
 
 確保註釋要以 `-->` 結束。
 
 ```js
-assert(new RegExp('[^fc]-->', 'gi').test(code));
+assert.match(code, /[^fc]-->/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
index 6de6d8bbf2..c13843e4dc 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
@@ -16,34 +16,42 @@ Classes allow you to use the same CSS styles on multiple HTML elements. You can
 `h2` 元素應該是紅色的。
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 `h2` 元素應含有 `red-text` class。
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 第一個 `p` 元素應爲紅色。
 
 ```js
-assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
+const paragraph = document.querySelectorAll('p')[0];
+const color = window.getComputedStyle(paragraph )['color'];
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 第二和第三個 `p` 元素不應爲紅色。
 
 ```js
-assert(
-  !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
-    !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
-);
+const paragraph2 = document.querySelectorAll('p')[1];
+const paragraph3 = document.querySelectorAll('p')[2];
+
+const color2 = window.getComputedStyle(paragraph2)['color'];
+const color3 = window.getComputedStyle(paragraph3)['color'];
+
+assert.notStrictEqual(color2, 'rgb(255, 0, 0)');
+assert.notStrictEqual(color3, 'rgb(255, 0, 0)');
 ```
 
 第一個 `p` 元素應該包含 `red-text` class。
 
 ```js
-assert($('p:eq(0)').hasClass('red-text'));
+assert.isTrue(document.querySelectorAll('p')[0].classList.contains('red-text'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-the-html-body-element.md
index f0a639f10b..2e63b16223 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-the-html-body-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/style-the-html-body-element.md
@@ -30,23 +30,22 @@ body {
 `body` 元素的 `background-color` 應爲黑色。
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color'];
+
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 確保 CSS 規則格式書寫正確，左右大括號也應匹配。
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 Your CSS rule should end with a semicolon.
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
index 8d8e3d22a0..38cc36f44e 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
@@ -26,18 +26,19 @@ The last several challenges all set an element's margin or padding with pixels (
 class 爲 `red-box` 的元素應含有 `padding` 屬性。
 
 ```js
-assert(
-  $('.red-box').css('padding-top') != '0px' &&
-    $('.red-box').css('padding-right') != '0px' &&
-    $('.red-box').css('padding-bottom') != '0px' &&
-    $('.red-box').css('padding-left') != '0px'
-);
+const redBox =document.querySelector('.red-box'); 
+const style = window.getComputedStyle(redBox); 
+
+assert.notEqual(style['padding-top'], '0px');
+assert.notEqual(style['padding-right'], '0px');
+assert.notEqual(style['padding-bottom'], '0px');
+assert.notEqual(style['padding-left'], '0px');
 ```
 
 class 爲 `red-box` 的元素的 `padding` 屬性值應爲 1.5em。
 
 ```js
-assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
+assert.match(__helpers.removeCssComments(code), /\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
index 191338bda9..f33050279d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -34,25 +34,27 @@ Classes are reusable styles that can be added to HTML elements.
 `h2` 元素應爲紅色。
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2'); 
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 `h2` 元素應有一個 `red-text` class。
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 樣式表應該聲明一個 `red-text` class，顏色爲 `red`。
 
 ```js
-assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g);
 ```
 
 不應在 `h2` 元素裏使用行內樣式 `style="color: red"`。
 
 ```js
-assert($('h2').attr('style') === undefined);
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
index fca17c44c6..9cb079769a 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
@@ -26,41 +26,25 @@ Apply the `--penguin-skin` variable to the `background` property of the `penguin
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
index 761078f1a1..25d1267f09 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
@@ -22,21 +22,13 @@ CSS Variables can simplify the way you use media queries.
 `:root` 中的 `--penguin-size` 值應爲 `200px`。
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 `:root` 中的 `--penguin-skin` 值應爲 `black`。
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
index 340d55344c..1ee7db3aaf 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -26,49 +26,57 @@ Many people feel overwhelmed by the possibilities of more than 16 million colors
 文本內容爲 `I am red!` 的 `h1` 元素的字體顏色 `color` 應該爲紅色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 應使用紅色的縮寫十六進制代碼，而不是十六進制代碼 `#FF0000`。
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
+assert.match(code,/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am green!` 的 `h1` 元素的字體顏色 `color` 應該爲綠色。
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 應使用綠色的縮寫十六進制代碼，而不是十六進制代碼 `#00FF00`。
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am cyan!` 的 `h1` 元素的字體顏色 `color` 應該爲藍綠色。
 
 ```js
-assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+const cyanText = document.querySelector('.cyan-text');
+const color = window.getComputedStyle(cyanText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 255)');
 ```
 
 應使用青色的簡寫十六進制代碼，而不是十六進制代碼 `#00FFFF`。
 
 ```js
-assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am fuchsia!` 的 `h1` 元素的字體顏色 `color` 應該爲紫紅色。
 
 ```js
-assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+const fuchsiaText = document.querySelector('.fuchsia-text');
+const color = window.getComputedStyle(fuchsiaText)['color']; 
+assert.strictEqual(color,'rgb(255, 0, 255)');
 ```
 
 應使用紫紅色的簡寫十六進制代碼，而不是十六進制代碼 `#FF00FF`。
 
 ```js
-assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
index d9f4231ede..d6a0993e95 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
@@ -32,28 +32,29 @@ One cool thing about `id` attributes is that, like classes, you can style them u
 `form` 元素的 id 應爲 `cat-photo-form`。
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 `form` 元素應含有 `background-color` 屬性，顏色爲綠色。
 
 ```js
-assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
+const catPhotoForm = document.querySelector('#cat-photo-form');
+const backgroundColor = window.getComputedStyle(catPhotoForm)['background-color'];
+assert.strictEqual(backgroundColor, 'rgb(0, 128, 0)');
 ```
 
 確保 `form` 元素的 `id` 設置正確。
 
 ```js
-assert(
-  code.match(/<form.*cat-photo-form.*>/gi) &&
-    code.match(/<form.*cat-photo-form.*>/gi).length > 0
-);
+assert.match(__helpers.removeHtmlComments(code), /<form.*cat-photo-form.*>/gi);
+assert.lengthOf(__helpers.removeHtmlComments(code).match(/<form.*cat-photo-form.*>/gi), 1)
 ```
 
 不要在 `form` 元素上添加其他 `class` 屬性或者 `style` 行內樣式。
 
 ```js
-assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*style.*>/gi);
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*class.*>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
index 7d84a741ba..3ab18f8745 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
@@ -30,43 +30,29 @@ You have been adding `id` or `class` attributes to elements that you wish to spe
 應使用 `type` 屬性選擇器來匹配複選框。
 
 ```js
-assert(
-  code.match(
-    /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi);
 ```
 
 複選框的上外邊距應爲 10px。
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginTop') === '10px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginTop = window.getComputedStyle(checkbox)['margin-top']; 
+  assert.strictEqual(marginTop, '10px');
+});
 ```
 
 複選框的下外邊距應爲 15px。
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginBottom') === '15px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginBottom = window.getComputedStyle(checkbox)['margin-bottom']; 
+  assert.strictEqual(marginBottom, '15px');
+});
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
index 00c60af541..8c85bcc855 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -28,35 +28,40 @@ Use Clockwise Notation to give the element with the `blue-box` class a margin of
 Your `blue-box` class should give the top of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 Your `blue-box` class should give the right of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft, '40px');
 ```
 
 You should use the clockwise notation to set the margin of `blue-box` class.
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const cssCode = __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(cssCode, /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
index 382f0449b0..90a85d9d6a 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
@@ -26,35 +26,40 @@ padding: 10px 20px 10px 20px;
 class 爲 `blue-box` 的元素的上內邊距 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 class 爲 `blue-box` 的元素的右內邊距 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 class 爲 `blue-box` 的元素的下內邊距 `padding` 應爲 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 class 爲 `blue-box` 的元素的左內邊距 `padding` 應爲 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 應該按照順時針排序，彙總聲明的方式來設置 `blue-box` 的內邊距。
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const css =  __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(css, /\.blue-box\s*{[\s\S]*padding\s*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
index e415c23e52..d1230e1013 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
@@ -43,39 +43,38 @@ With CSS, there are hundreds of CSS properties that you can use to change the wa
 應刪除 `h2` 元素的 `style` 樣式。
 
 ```js
-assert(!$('h2').attr('style'));
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 應創建一個 `style` 樣式聲明區域。
 
 ```js
-assert($('style') && $('style').length >= 1);
+assert.exists(document.querySelector('style:not(.fcc-hide-header)'));
+assert.isAtLeast(document.querySelectorAll('style:not(.fcc-hide-header)').length, 1);
 ```
 
 `h2` 元素顏色應爲藍色。
 
 ```js
-assert($('h2').css('color') === 'rgb(0, 0, 255)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 確保 `h2` 選擇器的內容被花括號所包圍，樣式規則應以分號結束。
 
 ```js
-assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /h2\s*\{\s*color\s*:.*;\s*\}/g);
 ```
 
 `style` 標籤應符合語法，且應有一個結束標籤。
 
 ```js
-assert(
-  code.match(/<\/style>/g) &&
-    code.match(/<\/style>/g).length ===
-      (
-        code.match(
-          /<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
-        ) || []
-      ).length
-);
+assert.match(__helpers.removeHtmlComments(code), /<\/style>/g);
+
+const closingElementLength = __helpers.removeHtmlComments(code).match(/<\/style>/g).length;
+const openingElementsLength = __helpers.removeHtmlComments(code).match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g).length;
+assert.strictEqual(closingElementLength, openingElementsLength);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
index bc1c9d0381..29375b8fa2 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
@@ -22,25 +22,19 @@ dashedName: use-css-variables-to-change-several-elements-at-once
 應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class 聲明中的 `--penguin-belly` 變量值應爲 `white`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class 聲明中的 `--penguin-beak` 變量值應爲 `orange`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
index ff410d829d..1aec3f0313 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
@@ -30,17 +30,15 @@ body {
 `body` 元素的 `background-color` 應爲黑色。
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 應該使用黑色的十六進制代碼，而不是 `black` 這個詞。
 
 ```js
-assert(
-  code.match(
-    /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
-  )
-);
+assert.match(code, /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
index 7552f29119..ccf9832f59 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -30,49 +30,58 @@ To review, hex codes use 6 hexadecimal digits to represent colors, two each for
 文本內容爲 `I am red!` 的 `h1` 元素的 `color` 值應該爲紅色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 應使用 `hex code` 替換 `red`。
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
+assert.match(code, /\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am green!` 的 `h1` 元素的 `color` 值應該爲綠色。
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 應使用 `hex code` 替換 `green` 關鍵詞。
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
+assert.match(code, /\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am dodger blue!` 的 `h1` 元素的 `color` 值應該爲道奇藍色。
 
 ```js
-assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+const blueText = document.querySelector('.dodger-blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(30, 144, 255)');
 ```
 
 應使用 `hex code` 替換 `dodgerblue`。
 
 ```js
-assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
+assert.match(code, /\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi);
 ```
 
 文本內容爲 `I am orange!` 的 `h1` 元素的 `color` 值應該爲橘色。
 
 ```js
-assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+const orangeText = document.querySelector('.orange-text');
+const color = window.getComputedStyle(orangeText)['color']; 
+
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 應使用 `hex code` 替換 `orange`。
 
 ```js
-assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
+assert.match(code, /\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
index 4bbcb0fd85..c6ba82db18 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -22,65 +22,57 @@ Just like with hex code, you can mix colors in RGB by using combinations of diff
 文本內容爲 `I am red!` 的 `h1` 元素的 `color` 值應爲紅色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 紅色應使用 `rgb` 值來表示。
 
 ```js
-assert(
-  code.match(
-    /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(code, /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi);
 ```
 
 文本內容爲 `I am orchid!` 的 `h1` 元素的 `color` 應爲淡紫色。
 
 ```js
-assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+const orchidText = document.querySelector('.orchid-text');
+const color = window.getComputedStyle(orchidText)['color']; 
+assert.strictEqual(color, 'rgb(218, 112, 214)');
 ```
 
 淡紫色應使用 `rgb` 值來表示。
 
 ```js
-assert(
-  code.match(
-    /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi);
 ```
 
 文本內容爲 `I am blue!` 的 `h1` 元素的 `color` 應爲藍色。
 
 ```js
-assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+const blueText = document.querySelector('.blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 藍色應使用 `rgb` 值來表示。
 
 ```js
-assert(
-  code.match(
-    /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi);
 ```
 
 文本內容爲 `I am sienna!` 的 `h1` 元素的 `color` 應爲赭黃色。
 
 ```js
-assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+const siennaText = document.querySelector('.sienna-text');
+const color = window.getComputedStyle(siennaText)['color']; 
+assert.strictEqual(color, 'rgb(160, 82, 45)');
 ```
 
 赭黃色應使用 `rgb` 值來表示。
 
 ```js
-assert(
-  code.match(
-    /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
index a280b1cfad..3bf8e3d2f9 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
@@ -44,13 +44,15 @@ Let's replace the hex code in our `body` element's background color with the RGB
 Your `body` element should have a black background.
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 You should use `rgb` to give your `body` element a background of black.
 
 ```js
-assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
+assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
index 86d1c232b1..064bc75462 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
@@ -26,33 +26,30 @@ Add a button as the last element of your `form` element with a type of `submit`,
 Your `form` should have a `button` inside it.
 
 ```js
-assert($('form').children('button').length > 0);
+const form = document.querySelector('form');
+const children = form.querySelectorAll(`:scope ${"button"}`); 
+assert.isNotEmpty(children); 
 ```
 
 Your submit button should have the attribute `type` set to `submit`.
 
 ```js
-assert($('button').attr('type') === 'submit');
+assert.strictEqual(document.querySelector('button').getAttribute('type'), 'submit');
 ```
 
 Your submit button should only have the text `Submit`.
 
 ```js
-assert(
-  $('button')
-    .text()
-    .match(/^\s*submit\s*$/gi)
-);
+const text = document.querySelector('button').textContent;
+assert.match(text,/^\s*submit\s*$/gi);
 ```
 
 Your `button` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.strictEqual(code.match(/<\/button>/g).length,code.match(/<button/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
index 2e6a948172..6c524df726 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -45,25 +45,22 @@ Note that `img` is a void element.
 你的網頁上應該有一張圖片。
 
 ```js
-assert($('img').length);
+assert.exists(document.querySelector('img'));
 ```
 
 你的圖片應該有一個 `src` 屬性，其值爲貓咪圖片的 url。
 
 ```js
-assert(/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i.test($('img').attr('src')));
+const url = document.querySelector('img').getAttribute('src');
+assert.match(url,/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i);
 ```
 
 你的圖片元素的 `alt` 屬性值不應爲空。
 
 ```js
-assert(
-  $('img').attr('alt') &&
-    $('img').attr('alt').length &&
-    /<(?:img|IMG)\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
-      __helpers.removeWhiteSpace(code)
-    )
-);
+assert.exists(document.querySelector('img').getAttribute('alt'));
+assert.isNotEmpty(document.querySelector('img').getAttribute('alt'));
+assert.match(__helpers.removeWhiteSpace(code),/<(?:img|IMG)\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
index 8ce9cba016..522d5780d4 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
@@ -28,31 +28,28 @@ Placeholder text is what is displayed in your `input` element before your user h
 給現有的 `input` 輸入框添加一個 `placeholder` 屬性。
 
 ```js
-assert($('input[placeholder]').length > 0);
+assert.notEmpty(document.querySelectorAll('input[placeholder]'));
 ```
 
 設置 `placeholder` 屬性的值爲 `cat photo URL`。
 
 ```js
-assert(
-  $('input') &&
-    $('input').attr('placeholder') &&
-    $('input')
-      .attr('placeholder')
-      .match(/cat\s+photo\s+URL/gi)
-);
+assert.exists(document.querySelector('input'));
+assert.exists(document.querySelector('input').getAttribute('placeholder'));
+const placeholder = document.querySelector('input').getAttribute('placeholder');
+assert.match(placeholder,/cat\s+photo\s+URL/gi);
 ```
 
 `input` 元素不該有結束標籤。
 
 ```js
-assert(!code.match(/<input.*\/?>.*<\/input>/gi));
+assert.notMatch(code,/<input.*\/?>.*<\/input>/gi);
 ```
 
 `input` 輸入框的語法必須正確。
 
 ```js
-assert($('input[type=text]').length > 0);
+assert.notEmpty(document.querySelectorAll('input[type=text]'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
index fe4c4efaab..60789abc38 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
@@ -26,13 +26,13 @@ You can set a checkbox or radio button to be checked by default using the `check
 表單的第一個單選按鈕應被默認選中。
 
 ```js
-assert($('input[type="radio"]').prop('checked'));
+assert.isTrue(document.querySelector('input[type="radio"]').checked);
 ```
 
 表單的第一個複選框應被默認選中。
 
 ```js
-assert($('input[type="checkbox"]').prop('checked'));
+assert.isTrue(document.querySelector('input[type="checkbox"]').checked);
 ```
 
 不應該更改 `Indoor` 標籤的內部文本。
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/comment-out-html.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
index 68e8ee0af6..7a484942f3 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
@@ -22,35 +22,33 @@ Remember that in order to start a comment, you need to use `<!--` and to end a c
 應註釋掉 `h1` 元素，這樣它就從網頁上消失了。
 
 ```js
-assert($('h1').length === 0);
+assert.isEmpty(document.querySelectorAll('h1'));
 ```
 
 `h2` 元素應保持原樣，這樣網頁上還能看到它。
 
 ```js
-assert($('h2').length > 0);
+assert.isNotEmpty(document.querySelectorAll('h2'));
 ```
 
 應註釋掉 `p` 元素，這樣它就從網頁上消失了。
 
 ```js
-assert($('p').length === 0);
+assert.isEmpty(document.querySelectorAll('p'));
 ```
 
 每一個註釋都應以 `-->` 結尾。
 
 ```js
-assert(code.match(/[^fc]-->/g).length > 1);
+assert.isAbove(code.match(/[^fc]-->/g).length, 1);
 ```
 
 不要更改 `h1`、`h2`、`p` 元素的順序。
 
 ```js
-assert(
-  code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
-    code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
-    code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
-);
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[0],'<h1>');
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[1],'<h2>');
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[2],'<p>');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
index cd08cd45c3..c961b83023 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
@@ -33,39 +33,35 @@ HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet po
 應存在一個 `ul` 無序列表。
 
 ```js
-assert($('ul').length > 0);
+assert.isNotEmpty(document.querySelectorAll('ul'));
 ```
 
 應在 `ul` 無序列表中添加三個 `li` 條目。
 
 ```js
-assert($('ul li').length > 2);
+assert.lengthOf(document.querySelectorAll('ul li'),3);
 ```
 
 確保 `ul` 無序列表有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/ul>/gi) &&
-    code.match(/<ul/gi) &&
-    code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
-);
+assert.match(code,/<\/ul>/gi);
+assert.match(code,/<ul/gi);
+assert.strictEqual(code.match(/<\/ul>/gi).length,code.match(/<ul/gi).length);
 ```
 
 確保每個 `li` 條目都有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/li>/gi) &&
-    code.match(/<li[\s>]/gi) &&
-    code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
-);
+assert.match(code,/<\/li>/gi);
+assert.match(code,/<li[\s>]/gi);
+assert.strictEqual(code.match(/<\/li>/gi).length,code.match(/<li[\s>]/gi).length);
 ```
 
 每個 `li` 元素不應只包含空字符串或只包含空格。
 
 ```js
-assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
+assert.isEmpty([...document.querySelectorAll('ul li')].filter((item) => item.textContent.trim() === ""));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
index 80e8692731..26e591fce0 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
@@ -28,27 +28,23 @@ You can build web forms that actually submit data to a server using nothing more
 
 ```js
 const inputElem = document.querySelector('form input');
-assert(
-  inputElem.getAttribute('type') === 'text' &&
-    inputElem.getAttribute('placeholder') === 'cat photo URL'
-);
+assert.strictEqual(inputElem.getAttribute('type'),'text'); 
+assert.strictEqual(inputElem.getAttribute('placeholder'),'cat photo URL');
 ```
 
 `form` 的 `action` 屬性值應爲 `https://www.freecatphotoapp.com/submit-cat-photo`。
 
 ```js
-const action = $('form').attr('action');
-assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
+const action = document.querySelector('form').getAttribute('action');
+assert.match(action,/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i);
 ```
 
 `form` 元素應有開始標籤和結束標籤。
 
 ```js
-assert(
-  code.match(/<\/form>/g) &&
-    code.match(/<form [^<]*>/g) &&
-    code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
-);
+assert.match(code,/<\/form>/g);
+assert.match(code,/<form [^<]*>/g);
+assert.strictEqual(code.match(/<\/form>/g).length,code.match(/<form [^<]*>/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
index 7f54887da2..faaeb7f8f4 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
@@ -34,37 +34,33 @@ Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than o
 表單中應存在三個複選框。
 
 ```js
-assert($('input[type="checkbox"]').length > 2);
+assert.lengthOf(document.querySelectorAll('input[type="checkbox"]'),3);
 ```
 
 每個複選框都應該被嵌套進 `label` 元素中。
 
 ```js
-assert($('label > input[type="checkbox"]:only-child').length > 2);
+assert.lengthOf(document.querySelectorAll('label > input[type="checkbox"]:only-child'),3);
 ```
 
 確保 `label` 元素有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/label>/g) &&
-    code.match(/<label/g) &&
-    code.match(/<\/label>/g).length === code.match(/<label/g).length
-);
+assert.match(code,/<\/label>/g);
+assert.match(code,/<label/g);
+assert.strictEqual(code.match(/<\/label>/g).length,code.match(/<label/g).length)
 ```
 
 複選框的 `name` 屬性值均應爲 `personality`。
 
 ```js
-assert(
-  $('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
-);
+assert.lengthOf([...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.name === "personality"),3);
 ```
 
 每個複選框都應該在 `form` 標籤內。
 
 ```js
-assert($('label').parent().get(0).tagName.match('FORM'));
+assert.strictEqual(document.querySelector('label').parentNode.tagName,'FORM');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
index 37cd3e3300..7114f0fd98 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
@@ -48,55 +48,50 @@ Add a pair of radio buttons to your form, each nested in its own `label` element
 Your page should have two `radio` button elements.
 
 ```js
-assert($('input[type="radio"]').length > 1);
+assert.lengthOf(document.querySelectorAll('input[type="radio"]'),2);
 ```
 
 Your radio buttons should be given the `name` attribute of `indoor-outdoor`.
 
 ```js
-assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
+assert.lengthOf([...document.querySelectorAll('input[type="radio"]')].filter(input => input.name === "indoor-outdoor"),2);
 ```
 
 Each of your two radio button elements should be nested in its own `label` element.
 
 ```js
-assert($('label > input[type="radio"]:only-child').length > 1);
+assert.lengthOf(document.querySelectorAll('label > input[type="radio"]:only-child'),2);
 ```
 
 Each of your `label` elements should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/label>/g) &&
-    code.match(/<label/g) &&
-    code.match(/<\/label>/g).length === code.match(/<label/g).length
-);
+assert.match(code,/<\/label>/g);
+assert.match(code,/<label/g);
+assert.strictEqual(code.match(/<\/label>/g).length,code.match(/<label/g).length);
 ```
 
 One of your radio buttons should have the label `indoor`.
 
 ```js
-assert(
-  $('label')
-    .text()
-    .match(/indoor/gi)
-);
+const labelTexts = [...document.querySelectorAll('label')].map(label => label.textContent);
+const hasMatch = labelTexts.some(label =>  label.match(/indoor/gi));
+assert.isTrue(hasMatch); 
 ```
 
 One of your radio buttons should have the label `outdoor`.
 
 ```js
-assert(
-  $('label')
-    .text()
-    .match(/outdoor/gi)
-);
+const labelTexts = [...document.querySelectorAll('label')].map(label => label.textContent);
+const hasMatch = labelTexts.some(label => label.match(/outdoor/gi));
+assert.isTrue(hasMatch); 
 ```
 
 Each of your radio button elements should be added within the `form` tag.
 
 ```js
-assert($('label').parent().get(0).tagName.match('FORM'));
+const labelParent = document.querySelector('label').parentNode;
+assert.strictEqual(labelParent.tagName,'FORM');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
index 4d2dfd20dd..9f9e486569 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -30,7 +30,7 @@ Note that `input` is a void element.
 網頁中應存在一個類型爲 `text` 的 `input` 輸入框。
 
 ```js
-assert($('input[type=text]').length > 0);
+assert.isNotEmpty(document.querySelectorAll('input[type=text]'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
index a3ac0de3b7..2c8ad2e64a 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
@@ -33,80 +33,76 @@ HTML has another special element for creating <dfn>ordered lists</dfn>, or numbe
 應包含一個有序列表，內容是貓咪最討厭的三樣東西（`Top 3 things cats hate:`）。
 
 ```js
-assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
+const previousElement = document.querySelector('ol').previousElementSibling; 
+assert.match(previousElement.textContent,/Top 3 things cats hate:/i);
 ```
 
 應包含有一個無序列表，內容是貓咪最喜歡的東西（`Things cats love:`）。
 
 ```js
-assert(/Things cats love:/i.test($('ul').prev().text()));
+const previousElement = document.querySelector('ul').previousElementSibling; 
+assert.match(previousElement.textContent,/Things cats love:/i);
 ```
 
 頁面應只包含一個 `ul` 元素。
 
 ```js
-assert.equal($('ul').length, 1);
+assert.lengthOf(document.querySelectorAll('ul'), 1);
 ```
 
 頁面應只包含一個 `ol` 元素。
 
 ```js
-assert.equal($('ol').length, 1);
+assert.lengthOf(document.querySelectorAll('ol'), 1);
 ```
 
 `ul` 無序列表中應包含 3 個 `li` 元素。
 
 ```js
-assert.equal($('ul li').length, 3);
+assert.lengthOf(document.querySelectorAll('ul li'), 3);
 ```
 
 `ol` 有序列表應該包含 3 個 `li` 元素。
 
 ```js
-assert.equal($('ol li').length, 3);
+assert.lengthOf(document.querySelectorAll('ol li'), 3);
 ```
 
 `ul` 無序列表應有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/ul>/g) &&
-    code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
-);
+assert.match(code,/<\/ul>/g);
+assert.strictEqual(code.match(/<\/ul>/g).length ,code.match(/<ul>/g).length);
 ```
 
 `ol` 有序列表應有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/ol>/g) &&
-    code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
-);
+assert.match(code,/<\/ol>/g);
+assert.strictEqual(code.match(/<\/ol>/g).length ,code.match(/<ol>/g).length);
 ```
 
 `li` 元素應有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/li>/g) &&
-    code.match(/<li>/g) &&
-    code.match(/<\/li>/g).length === code.match(/<li>/g).length
-);
+assert.match(code,/<\/li>/g);
+assert.match(code,/<li>/g);
+assert.strictEqual(code.match(/<\/li>/g).length ,code.match(/<li>/g).length);
 ```
 
 無序列表裏的 `li` 元素內容不應爲空。
 
 ```js
-$('ul li').each((i, val) =>
-  assert(__helpers.removeWhiteSpace(val.textContent))
+[...document.querySelectorAll('ul li')].forEach((val) =>
+  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
 );
 ```
 
 有序列表裏的 `li` 元素內容不應該爲空。
 
 ```js
-$('ol li').each((i, val) =>
-  assert(!!__helpers.removeWhiteSpace(val.textContent))
+[...document.querySelectorAll('ol li')].forEach((val) =>
+  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
 );
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
index 50dfd3bfcd..d63c46da6d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
@@ -37,19 +37,19 @@ The challenges so far have covered specific HTML elements and their uses. Howeve
 網頁中應包含 `<!DOCTYPE html>` 標籤。
 
 ```js
-assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
+assert.match(code,/<!DOCTYPE\s+?html\s*?>/gi);
 ```
 
 網頁中應只存在一個 `html` 元素。
 
 ```js
-assert($('html').length == 1);
+assert.lengthOf(document.querySelectorAll('html'), 1);
 ```
 
 `h1` 元素應該位於 `html` 元素內部。
 
 ```js
-assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
+assert.match(code,/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
index 849eb5e6bc..ea40fd73e1 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
@@ -39,14 +39,16 @@ You can add another level of organization in your HTML document within the `html
 
 ```js
 const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
-assert(headElems && headElems.length === 1);
+assert.exists(headElems); 
+assert.lengthOf(headElems,1);
 ```
 
 網頁應只有一個 `body` 元素。
 
 ```js
 const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
-assert(bodyElems && bodyElems.length === 1);
+assert.exists(bodyElems); 
+assert.lengthOf(bodyElems,1);
 ```
 
 `head` 應爲 `html` 的子元素。
@@ -61,7 +63,7 @@ if (htmlChildren) {
 
   foundHead = children.match(/<head\s*>.*<\/head\s*>/);
 }
-assert(foundHead);
+assert.exists(foundHead);
 ```
 
 `body` 應爲 `html` 的子元素。
@@ -75,7 +77,7 @@ if (htmlChildren) {
   const { children } = htmlChildren.groups;
   foundBody = children.match(/<body\s*>.*<\/body\s*>/);
 }
-assert(foundBody);
+assert.exists(foundBody);
 ```
 
 `title` 應爲 `head` 的子元素。
@@ -89,7 +91,7 @@ if (headChildren) {
   const { children } = headChildren.groups;
   foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
 }
-assert(foundTitle);
+assert.exists(foundTitle);
 ```
 
 `h1` 和 `p` 都應爲 `body` 的子元素。
@@ -107,7 +109,7 @@ if (bodyChildren) {
   const numPs = ps ? ps.length : 0;
   foundElems = numH1s === 1 && numPs === 1;
 }
-assert(foundElems);
+assert.exists(foundElems);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
index 68b4d9ba3e..0c9bbfbab1 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
@@ -22,19 +22,20 @@ Our phone doesn't have much vertical space.
 應刪除 `h1` 元素。
 
 ```js
-assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
+assert.notMatch(code,/<h1>/gi);
+assert.notMatch(code,/<\/h1>/gi);
 ```
 
 應保留 `h2` 元素。
 
 ```js
-assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
+assert.match(code,/<h2>[\w\W]*<\/h2>/gi);
 ```
 
 應保留 `p` 元素。
 
 ```js
-assert(code.match(/<p>[\w\W]*<\/p>/gi));
+assert.match(code,/<p>[\w\W]*<\/p>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
index f2a6d809d6..f814b8f4c8 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
@@ -24,7 +24,7 @@ Lorem ipsum text 自 16 世紀以來就在排版中被用作佔位符，這一
 你的 `p` 元素應包含 “kitty ipsum” 文本的前面幾個詞。
 
 ```js
-assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
+assert.match(document.querySelector('p').textContent,/Kitty(\s)+ipsum/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
index 180e42061c..e7300783a5 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
@@ -24,34 +24,32 @@ Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece
 應創建一個 `h2` 元素。
 
 ```js
-assert($('h2').length > 0);
+assert.lengthOf(document.querySelectorAll('h2'),1);
 ```
 
 `h2` 元素應該有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/h2>/g) &&
-    code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
-);
+assert.match(code,/<\/h2>/g);
+assert.strictEqual(code.match(/<\/h2>/g).length,code.match(/<h2>/g).length);
 ```
 
 `h2` 元素的內容應爲：`CatPhotoApp`。
 
 ```js
-assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
+assert.match(document.querySelector('h2').textContent,/cat(\s)?photo(\s)?app/gi);
 ```
 
 `h1` 元素的內容應爲：`Hello World`。
 
 ```js
-assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+assert.match(document.querySelector('h1').textContent,/hello(\s)+world/gi);
 ```
 
 `h1` 元素應出現在 `h2` 元素之前。
 
 ```js
-assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
+assert.match(code,/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
index 6f2c109185..68e43432a1 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
@@ -28,22 +28,20 @@ The `p` element is the preferred element for paragraph text on websites. `p` is
 應包含一個 `p` 元素。
 
 ```js
-assert($('p').length > 0);
+assert.lengthOf(document.querySelectorAll('p'),1);
 ```
 
 `p` 元素的內容文本應爲 `Hello Paragraph`。
 
 ```js
-assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
+assert.match(document.querySelector('p').textContent,/hello(\s)+paragraph/gi);
 ```
 
 `p` 元素應有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
index b22442cd2c..bbdeabd7c7 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
@@ -35,46 +35,46 @@ HTML5 introduces more descriptive HTML tags. These include `main`, `header`, `fo
 頁面中應該有兩個 `p` 元素。
 
 ```js
-assert($('p').length > 1);
+assert.lengthOf(document.querySelectorAll('p'),2);
 ```
 
 每個 `p` 元素都應有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 你的 `p` 元素應包含 `kitty ipsum` 文本的前面幾個詞。
 
 ```js
-assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
+assert.match(document.querySelectorAll('p')[1].textContent,/Purr\s+jump\s+eat/gi);
 ```
 
 應該存在 `main` 元素。
 
 ```js
-assert($('main').length === 1);
+assert.lengthOf(document.querySelectorAll('main'),1);
 ```
 
 `main` 元素應有兩個段落元素作爲它的子元素。
 
 ```js
-assert($('main').children('p').length === 2);
+const main = document.querySelector('main');
+const children = main.querySelectorAll("p"); 
+assert.lengthOf(children,2);
 ```
 
 `main` 的開始標籤應位於第一個段落之前。
 
 ```js
-assert(code.match(/<main>\s*?<p>/g));
+assert.match(code,(/<main>\s*?<p>/g));
 ```
 
 `main` 的結束標籤應位於第二個段落之後。
 
 ```js
-assert(code.match(/<\/p>\s*?<\/main>/g));
+assert.match(code,(/<\/p>\s*?<\/main>/g));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
index c77c14602a..f052e65e29 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
@@ -28,22 +28,20 @@ You can use `a` (*anchor*) elements to link to content outside of your web page.
 `a` 元素應有錨文本 `cat photos`。
 
 ```js
-assert(/cat photos/gi.test($('a').text()));
+assert.match(document.querySelector('a').textContent,/cat photos/gi);
 ```
 
 `a` 元素應鏈接到 `https://www.freecatphotoapp.com`。
 
 ```js
-assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
+assert.match(document.querySelector('a').getAttribute('href'),/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i);
 ```
 
 確保 `a` 元素有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.strictEqual(code.match(/<\/a>/g).length,code.match(/<a/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
index c833916e22..90ead2795e 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
@@ -36,45 +36,37 @@ dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
 頁面中應只存在一個 `footer` 元素。
 
 ```js
-assert($('a').length == 1);
+assert.lengthOf(document.querySelectorAll('a'), 1);
 ```
 
 `a` 的 `href` 屬性值應爲 `#footer`。
 
 ```js
-assert($('footer').length == 1);
+assert.lengthOf(document.querySelectorAll('footer'),1);
 ```
 
 `a` 不應有 `target` 屬性。
 
 ```js
-assert($('a').eq(0).attr('href') == '#footer');
+assert.strictEqual(document.querySelector('a').getAttribute('href'), '#footer');
 ```
 
 `a` 標籤不應有 `target` 屬性。
 
 ```js
-assert(
-  typeof $('a').eq(0).attr('target') == typeof undefined ||
-    $('a').eq(0).attr('target') == true
-);
+assert.notExists(document.querySelector('a').getAttribute('target'));
 ```
 
 `a` 元素的文本應該是 “Jump to Bottom”。
 
 ```js
-assert(
-  $('a')
-    .eq(0)
-    .text()
-    .match(/Jump to Bottom/gi)
-);
+assert.match(document.querySelector('a').textContent,/Jump to Bottom/gi);
 ```
 
 `footer` 標籤應該有一個 `id` 屬性，值爲 “footer”。
 
 ```js
-assert($('footer').eq(0).attr('id') == 'footer');
+assert.strictEqual(document.querySelector('footer').getAttribute('id'),'footer');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
index 4a2932a84d..6221300e6a 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
@@ -24,7 +24,7 @@ Sometimes you want to add `a` elements to your website before you know where the
 `a` 的 `href` 屬性值應爲 "#"。
 
 ```js
-assert($('a').attr('href') === '#');
+assert.strictEqual(document.querySelector('a').getAttribute('href'),'#');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
index 0d6989a9ab..1eaf2062b3 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -53,82 +53,61 @@ Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.free
 應該只有一個 `a` 元素。
 
 ```js
-assert(
-  $('a').length  === 1 
-);
+assert.lengthOf(document.querySelectorAll('a'), 1 );
 ```
 
 `a` 元素應該鏈接到 “`https://www.freecatphotoapp.com`”。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]').length  === 1 
-);
+assert.lengthOf(document.querySelectorAll('a[href="https://www.freecatphotoapp.com"]'),1);
 ```
 
 `a` 元素應有錨文本 `cat photos`。
 
 ```js
-assert(
-  $('a')
-    .text()
-    .match(/cat\sphotos/gi)
-);
+assert.match(document.querySelector('a').textContent,/cat\sphotos/gi)
 ```
 
 應該創建一個新的 `p` 元素。 頁面中應至少包含 3 個 `p` 標籤。
 
 ```js
-assert($('p') && $('p').length > 2);
+assert.lengthOf(document.querySelectorAll('p'),3)
 ```
 
 `a` 應嵌套在新創建的 `p` 元素內。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
-);
+const anchorParent = document.querySelector('a[href="https://www.freecatphotoapp.com"]').parentNode;
+assert.strictEqual(anchorParent.tagName,"P")
 ```
 
 `p` 元素應該包含文本 `View more`（在它後面有一個空格）。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]')
-    .parent()
-    .text()
-    .match(/View\smore\s/gi)
-);
+const textContent = document.querySelector('a[href="https://www.freecatphotoapp.com"]').parentNode.textContent;
+assert.match(textContent,/View\smore\s/gi);
 ```
 
 `a` 元素 <em>不</em> 應有文本 `View more`。
 
 ```js
-assert(
-  !$('a')
-    .text()
-    .match(/View\smore/gi)
-);
+assert.notMatch(document.querySelector('a').textContent,/View\smore/gi); 
 ```
 
 確保每個 `p` 元素有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<p/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.match(code,/<p/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 確保每個 `a` 元素有結束標籤。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<a/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.match(code,/<a/g);
+assert.strictEqual(code.match(/<\/a>/g).length,code.match(/<a/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
index 99b7d5e984..83a6fc574f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
@@ -26,28 +26,32 @@ The `div` element, also known as a division element, is a general purpose contai
 所有的 `p` 元素都應嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('p').length > 1);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('p');
+assert.isAbove(children.length,1);
 ```
 
 所有的 `ul` 元素都應嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('ul').length > 0);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('ul');
+assert.notEmpty(children);
 ```
 
 所有的 `ol` 元素都應嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('ol').length > 0);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('ol');
+assert.notEmpty(children);
 ```
 
 確保該 `div` 元素有閉合標籤.
 
 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div>/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.strictEqual(code.match(/<\/div>/g).length,code.match(/<div>/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
index b20002d3ba..fe035bf0a9 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
@@ -42,7 +42,7 @@ Welcome to freeCodeCamp's HTML coding challenges. These will walk you through we
 `h1` 元素的內容文本應爲 `Hello World`。
 
 ```js
-assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+assert.match(document.querySelector('h1').textContent,/hello(\s)+world/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
index 7f8ea52195..bee21c2ed2 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
@@ -30,23 +30,25 @@ You can make elements into links by nesting them within an `a` element.
 應將 `img` 嵌套進 `a` 元素中。
 
 ```js
-assert($('a').children('img').length > 0);
+const anchor = document.querySelectorAll('a')[1];
+const children = anchor.querySelectorAll("img");
+assert.notEmpty(children);
 ```
 
 你的 `a` 元素應該是一個死鏈接，具有值爲 `#` 的 `href` 屬性。
 
 ```js
-assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
+const anchor = document.querySelectorAll('a')[1];
+const parentHREF = anchor.querySelector("img").parentNode.getAttribute('href');
+assert.match(parentHREF,new RegExp('#'));
 ```
 
 每個 `a` 元素都應該有一個結束標籤。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<a/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.match(code,/<a/g);
+assert.strictEqual(code.match(/<\/a>/g).length, code.match(/<a/g).length)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/uncomment-html.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
index bb302c673f..aad9c4dfc4 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
@@ -24,25 +24,27 @@ Uncomment your `h1`, `h2` and `p` elements.
 Your `h1` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('h1').length > 0);
+assert.notEmpty(document.querySelectorAll('h1'));
 ```
 
 Your `h2` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('h2').length > 0);
+assert.notEmpty(document.querySelectorAll('h2'));
 ```
 
 Your `p` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('p').length > 0);
+assert.notEmpty(document.querySelectorAll('p'));
 ```
 
 No trailing comment tags should be visible on the page (i.e. `-->`).
 
 ```js
-assert(!$('*:contains("-->")')[1]);
+const elements = document.querySelectorAll('*');
+const potentialComments = Array.from(elements).filter(el => el.textContent.includes('-->'));
+assert.notExists(potentialComments[1])
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
index 768ef29291..4eb55e7485 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
@@ -24,7 +24,7 @@ You can require specific form fields so that your user will not be able to submi
 `input` 元素應有 `required` 屬性。
 
 ```js
-assert($('input').prop('required'));
+assert.isTrue(document.querySelector('input').required);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
index 3b81d9d552..f1b90d657b 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
@@ -34,49 +34,36 @@ When a form gets submitted, the data is sent to the server and includes entries
 應有一個單選按鈕的 `value` 屬性值爲 `indoor`。
 
 ```js
-assert(
-  $('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
-    .length > 0
-);
+const indoorRadioButton = [...document.querySelectorAll('label > input[type="radio"]')].filter(x => x.value === "indoor");
+assert.notEmpty(indoorRadioButton)
 ```
 
 應有一個單選按鈕的 `value` 屬性值爲 `outdoor`。
 
 ```js
-assert(
-  $('label:contains("Outdoor") > input[type="radio"]').filter(
-    "[value='outdoor']"
-  ).length > 0
-);
+const outdoorRadioButton = [...document.querySelectorAll('label > input[type="radio"]')].filter(x => x.value === "outdoor");
+assert.notEmpty(outdoorRadioButton);
 ```
 
 應有一個複選框的 `value` 屬性值爲 `loving`。
 
 ```js
-assert(
-  $('label:contains("Loving") > input[type="checkbox"]').filter(
-    "[value='loving']"
-  ).length > 0
-);
+const lovingCheckbox = [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "loving");
+assert.notEmpty(lovingCheckbox); 
 ```
 
 應有一個複選框的 `value` 屬性值爲 `lazy`。
 
 ```js
-assert(
-  $('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
-    .length > 0
-);
+const lazyCheckbox = [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "lazy");
+assert.notEmpty(lazyCheckbox); 
 ```
 
 應有一個複選框的 `value` 屬性值爲 `energetic`。
 
 ```js
-assert(
-  $('label:contains("Energetic") > input[type="checkbox"]').filter(
-    "[value='energetic']"
-  ).length > 0
-);
+const energeticCheckbox =  [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "energetic");
+assert.notEmpty(energeticCheckbox);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
index a05b3a39f9..e8abc41886 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
@@ -22,49 +22,66 @@ Add the CSS property `display: flex` to all of the following items - note that t
 Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 Your `header` should have a `display` property set to `flex`.
 
 ```js
-assert($('header').css('display') == 'flex');
+const header = document.querySelector('header');
+const displayStyle = window.getComputedStyle(header)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `footer` should have a `display` property set to `flex`.
 
 ```js
-assert($('footer').css('display') == 'flex');
+const footer = document.querySelector('footer');
+const displayStyle = window.getComputedStyle(footer)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `h3` should have a `display` property set to `flex`.
 
 ```js
-assert($('h3').css('display') == 'flex');
+const h3Element = document.querySelector('h3');
+const displayStyle = window.getComputedStyle(h3Element)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `h4` should have a `display` property set to `flex`.
 
 ```js
-assert($('h4').css('display') == 'flex');
+const h4Element = document.querySelector('h4');
+const displayStyle = window.getComputedStyle(h4Element)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.profile-name` should have a `display` property set to `flex`.
 
 ```js
-assert($('.profile-name').css('display') == 'flex');
+const profileName = document.querySelector('.profile-name');
+const displayStyle = window.getComputedStyle(profileName)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.follow-btn` should have a `display` property set to `flex`.
 
 ```js
-assert($('.follow-btn').css('display') == 'flex');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.stats` should have a `display` property set to `flex`.
 
 ```js
-assert($('.stats').css('display') == 'flex');
+const stats = document.querySelector('.stats');
+const displayStyle = window.getComputedStyle(stats)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 # --seed--
@@ -142,18 +159,17 @@ assert($('.stats').css('display') == 'flex');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -171,7 +187,7 @@ assert($('.stats').css('display') == 'flex');
     font-family: Arial, sans-serif;
   }
   header {
-   display: flex;
+    display: flex;
   }
   header .profile-thumbnail {
     width: 50px;
@@ -191,7 +207,8 @@ assert($('.stats').css('display') == 'flex');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -226,7 +243,11 @@ assert($('.stats').css('display') == 'flex');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -236,18 +257,17 @@ assert($('.stats').css('display') == 'flex');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
index c285cfb745..6fa5c2e048 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
@@ -31,7 +31,9 @@ Try the other options for the `align-items` property in the code editor to see t
 The `#box-container` element should have an `align-items` property set to a value of `center`.
 
 ```js
-assert($('#box-container').css('align-items') == 'center');
+const boxContainer = document.querySelector('#box-container');
+const alignment = window.getComputedStyle(boxContainer)['align-items'];
+assert.strictEqual(alignment, 'center');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
index a3ae00be8a..ee38e8cf01 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
@@ -31,7 +31,10 @@ Sometimes the flex items within a flex container do not fill all the space in th
 `#box-container` 所選擇的元素應有 `justify-content` 屬性，且其屬性值應爲 `center`。
 
 ```js
-assert($('#box-container').css('justify-content') == 'center');
+const boxContainer = document.querySelector('#box-container');
+const justifyDirection =
+  window.getComputedStyle(boxContainer)['justify-content'];
+assert.strictEqual(justifyDirection, 'center');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
index 4dbe269968..4deb410422 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
@@ -20,13 +20,18 @@ The tweet embed `header` and `footer` used the `flex-direction` property earlier
 `.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.profile-name` 元素應有一個值爲 `column` 的`flex-direction` 屬性。
 
 ```js
-assert($('.profile-name').css('flex-direction') == 'column');
+const profileName = document.querySelector('.profile-name');
+const flexDirection = window.getComputedStyle(profileName)['flex-direction'];
+assert.strictEqual(flexDirection, 'column');
 ```
 
 # --seed--
@@ -38,7 +43,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -61,7 +67,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -93,7 +100,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -103,18 +114,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -131,7 +141,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -154,7 +165,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -186,7 +198,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -196,18 +212,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
index 9f3a3c38bc..109f6074c6 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
@@ -20,19 +20,22 @@ The `header` and `footer` in the tweet embed example have child items that could
 `.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `header` 應有 `flex-direction` 屬性，其值應爲 `row`。
 
 ```js
-assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
+assert.match(code, /header\s*?{[^}]*?flex-direction:\s*?row;/g);
 ```
 
 `footer` 應有 `flex-direction` 屬性，其值應爲 `row`。
 
 ```js
-assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
+assert.match(code, /footer\s*?{[^}]*?flex-direction:\s*?row;/g);
 ```
 
 # --seed--
@@ -66,7 +69,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -102,7 +106,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -112,18 +120,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -162,7 +169,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -198,7 +206,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -208,18 +220,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
index 501416b7c2..e53400c96c 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
@@ -22,7 +22,9 @@ Add the CSS property `display` to `#box-container` and set its value to `flex`.
 `#box-container` should have the `display` property set to a value of `flex`.
 
 ```js
-assert($('#box-container').css('display') == 'flex');
+const boxContainer = document.querySelector('#box-container');
+const displayStyle = window.getComputedStyle(boxContainer)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
index fe51f94ae9..96df85d0f8 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
@@ -20,13 +20,18 @@ The last challenge introduced the `align-items` property and gave an example. Th
 `.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.follow-btn` 元素應有值爲 `center` 的 `align-items` 屬性。
 
 ```js
-assert($('.follow-btn').css('align-items') == 'center');
+const followButton = document.querySelector('.follow-btn');
+const alignItems = window.getComputedStyle(followButton)['align-items'];
+assert.strictEqual(alignItems, 'center');
 ```
 
 # --seed--
@@ -38,7 +43,8 @@ assert($('.follow-btn').css('align-items') == 'center');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -63,7 +69,8 @@ assert($('.follow-btn').css('align-items') == 'center');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -95,7 +102,11 @@ assert($('.follow-btn').css('align-items') == 'center');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -105,18 +116,17 @@ assert($('.follow-btn').css('align-items') == 'center');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -133,7 +143,8 @@ assert($('.follow-btn').css('align-items') == 'center');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -158,7 +169,8 @@ assert($('.follow-btn').css('align-items') == 'center');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -190,7 +202,11 @@ assert($('.follow-btn').css('align-items') == 'center');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -200,18 +216,17 @@ assert($('.follow-btn').css('align-items') == 'center');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-self-property.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
index c3dc184652..be098504d8 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
@@ -22,13 +22,17 @@ The final property for flex items is `align-self`. This property allows you to a
 `#box-1` 元素應具有 `align-self` 屬性，其屬性值應爲 `center`。
 
 ```js
-assert($('#box-1').css('align-self') == 'center');
+const boxOne = document.querySelector('#box-1');
+const alignment = window.getComputedStyle(boxOne)['align-self'];
+assert.strictEqual(alignment, 'center');
 ```
 
 `#box-2` 元素應具有 `align-self` 屬性，其屬性值應爲 `flex-end`。
 
 ```js
-assert($('#box-2').css('align-self') == 'flex-end');
+const boxTwo = document.querySelector('#box-2');
+const alignment = window.getComputedStyle(boxTwo)['align-self'];
+assert.strictEqual(alignment, 'flex-end');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
index 5de5d17421..455e6ccde5 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
@@ -22,25 +22,29 @@ The `flex-basis` property specifies the initial size of the item before CSS make
 `#box-1` 元素應具有 `flex-basis` 屬性。
 
 ```js
-assert($('#box-1').css('flex-basis') != 'auto');
+const boxOne = document.querySelector('#box-1');
+const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
+assert.notStrictEqual(flexBasis, 'auto');
 ```
 
 `#box-1` 的 `flex-basis` 屬性值應爲 `10em`。
 
 ```js
-assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
+assert.match(code, /#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g);
 ```
 
 `#box-2` 元素應具有 `flex-basis` 屬性。
 
 ```js
-assert($('#box-2').css('flex-basis') != 'auto');
+const boxTwo = document.querySelector('#box-2');
+const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
+assert.notStrictEqual(flexBasis, 'auto');
 ```
 
 `#box-2` 的 `flex-basis` 屬性值應爲 `20em`。
 
 ```js
-assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
+assert.match(code, /#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
index cd4c3c9d60..ff6a863409 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
@@ -20,7 +20,9 @@ The last two challenges used the `flex-direction` property set to `row`. This pr
 `#box-container` 應有 `flex-direction` 屬性，其屬性值應爲 `column`。
 
 ```js
-assert($('#box-container').css('flex-direction') == 'column');
+const boxContainer = document.querySelector('#box-container');
+const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
+assert.strictEqual(flexDirection, 'column');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
index 02d756561a..c4e2245932 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
@@ -24,7 +24,9 @@ Adding `display: flex` to an element turns it into a flex container. This makes
 `#box-container` 元素應有 `flex-direction` 屬性，其屬性值應爲 `row-reverse`。
 
 ```js
-assert($('#box-container').css('flex-direction') == 'row-reverse');
+const boxContainer = document.querySelector('#box-container');
+const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
+assert.strictEqual(flexDirection, 'row-reverse');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
index 185323c13a..7c3673f7d7 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
@@ -22,13 +22,17 @@ The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shr
 `#box-1` 元素應具有 `flex-grow` 屬性，其屬性值應爲 `1`。
 
 ```js
-assert($('#box-1').css('flex-grow') == '1');
+const boxOne = document.querySelector('#box-1');
+const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
+assert.equal(flexGrow, '1');
 ```
 
 `#box-2` 元素應具有 `flex-grow` 屬性，其屬性值應爲 `2`。
 
 ```js
-assert($('#box-2').css('flex-grow') == '2');
+const boxTwo = document.querySelector('#box-2');
+const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
+assert.equal(flexGrow, '2');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
index 39a834fd7f..febedd744d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
@@ -26,27 +26,33 @@ There is a shortcut available to set several flex properties at once. The `flex-
 `#box-1` 元素應具有 `flex` 屬性，其屬性值應爲 `2 2 150px`。
 
 ```js
-assert(
-  $('#box-1').css('flex-grow') == '2' &&
-    $('#box-1').css('flex-shrink') == '2' &&
-    $('#box-1').css('flex-basis') == '150px'
-);
+const boxOne = document.querySelector('#box-1');
+const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
+const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
+const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
+
+assert.equal(flexGrow, '2');
+assert.equal(flexShrink, '2');
+assert.equal(flexBasis, '150px');
 ```
 
 `#box-2` 元素應具有 `flex` 屬性，其屬性值應爲 `1 1 150px`。
 
 ```js
-assert(
-  $('#box-2').css('flex-grow') == '1' &&
-    $('#box-2').css('flex-shrink') == '1' &&
-    $('#box-2').css('flex-basis') == '150px'
-);
+const boxTwo = document.querySelector('#box-2');
+const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
+const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
+const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
+
+assert.equal(flexGrow, '1');
+assert.equal(flexShrink, '1');
+assert.equal(flexBasis, '150px');
 ```
 
 應使用 `flex` 的簡寫屬性爲 `#box-1` 和 `#box-2` 添加規則。
 
 ```js
-assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
+assert.lengthOf(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g), 2);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
index 1c30ee8402..898f4428d2 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
@@ -24,13 +24,17 @@ So far, all the properties in the challenges apply to the flex container (the pa
 `#box-1` 元素應具有 `flex-shrink` 屬性，其屬性值應爲 `1`。
 
 ```js
-assert($('#box-1').css('flex-shrink') == '1');
+const boxOne = document.querySelector('#box-1');
+const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
+assert.equal(flexShrink, '1');
 ```
 
 `#box-2` 元素應具有 `flex-shrink` 屬性，其屬性值應爲 `2`。
 
 ```js
-assert($('#box-2').css('flex-shrink') == '2');
+const boxTwo = document.querySelector('#box-2');
+const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
+assert.equal(flexShrink, '2');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
index cc027815f1..b86b7adaaf 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
@@ -26,7 +26,9 @@ The current layout has too many boxes for one row. Add the CSS property `flex-wr
 The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
 
 ```js
-assert($('#box-container').css('flex-wrap') == 'wrap');
+const boxContainer = document.querySelector('#box-container');
+const flexWrap = window.getComputedStyle(boxContainer)['flex-wrap'];
+assert.strictEqual(flexWrap, 'wrap');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
index ba80434766..c06a7aa457 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
@@ -20,16 +20,18 @@ The last challenge showed an example of the `justify-content` property. For the
 `.follow-btn` 應在頁面上呈現。 請關閉廣告攔截器等任何擴展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.profile-name` 元素的 `justify-content` 屬性可選用以下屬性值：`center`、`flex-start`、`flex-end`、`space-between`、`space-around` 或 `space-evenly`。
 
 ```js
-assert(
-  code.match(
-    /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
-  )
+assert.match(
+  code,
+  /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
 );
 ```
 
@@ -42,7 +44,8 @@ assert(
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -66,7 +69,8 @@ assert(
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -98,7 +102,11 @@ assert(
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -108,18 +116,17 @@ assert(
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -136,7 +143,8 @@ assert(
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -160,7 +168,8 @@ assert(
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -192,7 +201,11 @@ assert(
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -202,18 +215,17 @@ assert(
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
index a86b2c6c58..cf88f38338 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
@@ -20,13 +20,17 @@ The `order` property is used to tell CSS the order of how flex items appear in t
 `#box-1` 元素應具有 `order` 屬性，其屬性值應爲 `2`。
 
 ```js
-assert($('#box-1').css('order') == '2');
+const boxOne = document.querySelector('#box-1');
+const order = window.getComputedStyle(boxOne)['order'];
+assert.strictEqual(order, '2');
 ```
 
 `#box-2` 元素應具有 `order` 屬性，其屬性值應爲 `1`。
 
 ```js
-assert($('#box-2').css('order') == '1');
+const boxTwo = document.querySelector('#box-2');
+const order = window.getComputedStyle(boxTwo)['order'];
+assert.strictEqual(order, '1');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
index 1aec16cadc..03053ef6fd 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
@@ -29,7 +29,10 @@ Simply creating a grid element doesn't get you very far. You need to define the
 class 爲 `container` 的元素應具有 `grid-template-columns` 屬性，該屬性應有三個屬性值，均爲 `100px`。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColumns === '100px 100px 100px');
+const templateColumns = new __helpers.CSSHelp(document).getStyle(
+  '.container'
+)?.gridTemplateColumns;
+assert.strictEqual(templateColumns, '100px 100px 100px');
 ```
 
 # --seed--
@@ -38,11 +41,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColum
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -68,5 +81,9 @@ assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColum
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: 100px 100px 100px;}</style>
+<style>
+  .container {
+    grid-template-columns: 100px 100px 100px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
index feae1f80ac..7fc2986288 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
@@ -20,10 +20,9 @@ dashedName: add-gaps-faster-with-grid-gap
 `container` class 應該有一個 `grid-gap` 屬性，在行之間設置 `10px` 的間距，在列之間設置 `20px` 的間距。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -65,5 +74,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-gap: 10px 20px;}</style>
+<style>
+  .container {
+    grid-gap: 10px 20px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
index 14d7ff5ec1..ed2d7af66f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
@@ -20,10 +20,9 @@ The grid you created in the last challenge will set the number of rows automatic
 類爲 `container` 的元素應具有 `grid-template-rows` 屬性，且該屬性的兩個屬性值均爲 `50px`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -64,5 +73,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-rows: 50px 50px;}</style>
+<style>
+  .container {
+    grid-template-rows: 50px 50px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
index cc2697ed78..a6142eec1f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
@@ -20,10 +20,9 @@ Sometimes you want all the items in your CSS Grid to share the same alignment. Y
 class 爲 `container` 的元素應具有 `justify-items` 屬性且屬性值應爲 `center`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -67,5 +76,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {justify-items: center;}</style>
+<style>
+  .container {
+    justify-items: center;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
index 3a4c8598c3..50e17b74f9 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
@@ -20,8 +20,9 @@ Using the `align-items` property on a grid container will set the vertical align
 class 爲 `container` 的元素應具有 `align-items` 屬性且屬性值應爲 `end`。
 
 ```js
-assert(
-  code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -31,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -65,5 +76,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {align-items: end;}</style>
+<style>
+  .container {
+    align-items: end;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
index 415df5aa4c..3f8503a359 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
@@ -26,8 +26,9 @@ In CSS Grid, the content of each item is located in a box which is referred to a
 class 爲 `item2` 的元素應具有 `justify-self` 屬性且屬性值應爲 `center`。
 
 ```js
-assert(
-  code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -37,7 +38,9 @@ assert(
 
 ```html
 <style>
-  .item1{background: LightSkyBlue;}
+  .item1 {
+    background: LightSkyBlue;
+  }
 
   .item2 {
     background: LightSalmon;
@@ -47,9 +50,15 @@ assert(
     /* Only change code above this line */
   }
 
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -75,5 +84,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item2 {justify-self: center;}</style>
+<style>
+  .item2 {
+    justify-self: center;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
index e9ca111c59..486b39387d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
@@ -20,7 +20,7 @@ Just as you can align an item horizontally, there's a way to align an item verti
 class 爲 `item3` 的元素應具有 `align-self` 屬性且屬性值應爲 `end`。
 
 ```js
-assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
+assert.match(code, /.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -29,8 +29,12 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
 
   .item3 {
     background: PaleTurquoise;
@@ -40,8 +44,12 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
     /* Only change code above this line */
   }
 
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -67,5 +75,9 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.item3 {align-self: end;}</style>
+<style>
+  .item3 {
+    align-self: end;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
index 752bd51baa..7027ead150 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
@@ -26,10 +26,9 @@ grid-column-gap: 10px;
 class 爲 `container` 的元素應具有 `grid-column-gap` 屬性且屬性值應爲 `20px`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -72,5 +81,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-column-gap: 20px;}</style>
+<style>
+  .container {
+    grid-column-gap: 20px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
index 989a5054ef..ed7023d4d7 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
@@ -20,8 +20,9 @@ You can add a gap in between the rows of a grid using `grid-row-gap` in the same
 class 爲 `container` 的元素應具有 `grid-row-gap` 屬性且屬性值應爲 `5px`。
 
 ```js
-assert(
-  code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -31,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -64,5 +75,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-row-gap: 5px;}</style>
+<style>
+  .container {
+    grid-row-gap: 5px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
index 5e328c4891..6df043a965 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
@@ -26,10 +26,9 @@ repeat(auto-fill, minmax(60px, 1fr));
 class 爲 `container` 的元素應具有 `grid-template-columns` 屬性，且屬性值應使用 `repeat` 和 `auto-fill`，以便將最小寬度爲 `60px`、最大寬度爲 `1fr` 的列填充至網格。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -91,11 +100,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
index cbd6595365..52789835fc 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
@@ -22,10 +22,9 @@ dashedName: create-flexible-layouts-using-auto-fit
 `container2` class 應該有一個 `grid-template-columns` 屬性，通過 `repeat` 和 `auto-fit` 將網格中的列的寬度設置爲最小 `60px`，最大 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -35,11 +34,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -87,5 +96,12 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  }
+  .container2 {
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-grids-within-grids.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-grids-within-grids.md
index 47ca6f4c67..ed77d32eb0 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-grids-within-grids.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-grids-within-grids.md
@@ -21,17 +21,16 @@ Turning an element into a grid only affects the behavior of its direct descendan
 class 爲 `item3` 的元素應具有 `grid-template-columns` 屬性且屬性值應爲 `auto` 和 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
 );
 ```
 
 class 爲 `item3` 的元素應具有 `display` 屬性且屬性值應爲 `grid`。
 
 ```js
-assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+assert.match(code, /.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -50,9 +49,9 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
     grid-template-rows: auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "advert header"
-      "advert content"
-      "advert footer";
+      'advert header'
+      'advert content'
+      'advert footer';
   }
   .item1 {
     background: LightSkyBlue;
@@ -85,7 +84,6 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
   .itemTwo {
     background: BlanchedAlmond;
   }
-
 </style>
 
 <div class="container">
@@ -102,5 +100,10 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
+<style>
+  .item3 {
+    grid-template-columns: auto 1fr;
+    display: grid;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-your-first-css-grid.md
index 4aad99ccea..60ce101824 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-your-first-css-grid.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/create-your-first-css-grid.md
@@ -22,7 +22,7 @@ Turn any HTML element into a grid container by setting its `display` property to
 `container` class 應具有 `display` 屬性，屬性值應爲 `grid`。
 
 ```js
-assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+assert.match(code, /.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -31,11 +31,21 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -60,5 +70,9 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.container {display: grid;}</style>
+<style>
+  .container {
+    display: grid;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
index 9da696a638..30a193131d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
@@ -12,9 +12,9 @@ You can group cells of your grid together into an <dfn>area</dfn> and give the a
 
 ```css
 grid-template-areas:
-  "header header header"
-  "advert content content"
-  "advert footer footer";
+  'header header header'
+  'advert content content'
+  'advert footer footer';
 ```
 
 上面的代碼將網格單元格分成四個區域：`header`、`advert`、`content` 和 `footer`。 每個單詞代表一個單元格，每對引號代表一行。
@@ -28,12 +28,9 @@ grid-template-areas:
 class 爲 `container` 的元素應具有 `grid-template-areas` 屬性，和示例類似，但是 `footer` 區域跨越整個底部行。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(
-      /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
-    )
+assert.match(
+  __helpers.removeCssComments(code),
+  /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?["|']\s*?header\s*?header\s*?header\s*?["|']\s*?["|']\s*?advert\s*?content\s*?content\s*?["|']\s*?["|']\s*?footer\s*?footer\s*?footer\s*?["|']\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -43,11 +40,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -60,9 +67,9 @@ assert(
     grid-gap: 10px;
     grid-template-areas:
     /* Only change code below this line */
-      "header header header"
-      "advert content content"
-      "advert footer footer";
+      'header header header'
+      'advert content content'
+      'advert footer footer';
     /* Only change code above this line */
   }
 </style>
@@ -80,11 +87,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -97,9 +114,9 @@ assert(
     grid-gap: 10px;
 
     grid-template-areas:
-      "header header header"
-      "advert content content"
-      "footer footer footer";
+      'header header header'
+      'advert content content'
+      'footer footer footer';
   }
 </style>
 
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
index 39472c0f76..5e1b4fa5c9 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
@@ -26,10 +26,9 @@ grid-template-columns: 100px minmax(50px, 200px);
 class 爲 `container` 的元素應使用 `grid-template-columns` 屬性設置 3 列，其中，每列最小寬度應爲 `90px`，最大寬度應爲 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -73,5 +82,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(3, minmax(90px, 1fr));
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
index 5491dc8115..bb5b2f6c2d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
@@ -28,10 +28,9 @@ After creating an area template for your grid container, as shown in the previou
 class 爲 `item5` 的元素應具有 `grid-area` 屬性且屬性值應爲 `footer`。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -41,10 +40,18 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -64,9 +71,9 @@ assert(
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
     grid-template-areas:
-      "header header header"
-      "advert content content"
-      "footer footer footer";
+      'header header header'
+      'advert content content'
+      'footer footer footer';
   }
 </style>
 
@@ -82,5 +89,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item5 {grid-area: footer;}</style>
+<style>
+  .item5 {
+    grid-area: footer;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
index c7c7d40c00..8bd6fdc8ca 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
@@ -42,10 +42,9 @@ grid-template-columns: 1fr 50px 1fr 50px 20px;
 class 爲 `container` 的元素應具有 `grid-template-columns` 屬性，其屬性值應設置爲重複 3 列，且每列寬度爲 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -55,11 +54,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -89,5 +98,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
index 2b568b5db6..a96c366169 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
@@ -34,10 +34,9 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
 `container` 類應該有一個 `grid-template-columns` 屬性，該屬性具有以下寬度的三列：`1fr`、`100px` 和 `2fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -47,11 +46,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -79,5 +88,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
+<style>
+  .container {
+    grid-template-columns: 1fr 100px 2fr;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
index 16c7ec6069..cfc74b5764 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
@@ -12,13 +12,16 @@ dashedName: use-grid-area-without-creating-an-areas-template
 The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
 
 ```css
-item1 { grid-area: 1/1/2/4; }
+item1 {
+  grid-area: 1/1/2/4;
+}
 ```
 
 這裏使用了你之前學習的網格線編號來定義網格項的區域。 上例中數字代表這些值：
 
 ```css
-grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
+grid-area: horizontal line to start at / vertical line to start at / horizontal
+  line to end at / vertical line to end at;
 ```
 
 因此，示例中的網格項將佔用第 1 條水平網格線（起始）和第 2 條水平網格線（終止）之間的行，及第 1 條垂直網格線（起始）和第 4 條垂直網格線（終止）之間的列。
@@ -32,10 +35,9 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal
 class 爲 `item5` 的元素應具有 `grid-area` 屬性，且位於水平第三和第四條線、垂直第一和第四條線之間的區域。
 
 ```js
-assert(
-  code.match(
-    /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -45,10 +47,18 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -82,5 +92,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item5 {grid-area: 3/1/4/4;}</style>
+<style>
+  .item5 {
+    grid-area: 3/1/4/4;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
index 27fe9db01d..69f3797bdf 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
@@ -36,18 +36,19 @@ grid-column: 1 / 3;
 class 爲 `item5` 的元素應具有 `grid-column` 屬性。
 
 ```js
-assert(
-  __helpers
-    .removeWhiteSpace($('style').text())
-    .match(/\.item5{.*grid-column:.*}/g)
+const styleElement = document.querySelector('style:not(.fcc-hide-header)');
+assert.match(
+  __helpers.removeWhiteSpace(styleElement.textContent),
+  /\.item5{.*grid-column:.*}/g
 );
 ```
 
 class 爲 `item5` 的元素應具有 `grid-column` 屬性，其屬性值應將元素設置爲佔用網格的最後兩列。
 
 ```js
-const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
-const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
+const itemFive = document.querySelector('.item5');
+const colStart = getComputedStyle(itemFive).gridColumnStart;
+const colEnd = getComputedStyle(itemFive).gridColumnEnd;
 const result = colStart.toString() + colEnd.toString();
 const correctResults = [
   '24',
@@ -60,7 +61,7 @@ const correctResults = [
   'span 2auto',
   'autospan 2'
 ];
-assert(correctResults.includes(result));
+assert.include(correctResults, result);
 ```
 
 # --seed--
@@ -69,10 +70,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -107,10 +116,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
index d3cbb7600e..83ecc9c00a 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
@@ -20,16 +20,19 @@ Of course, you can make items consume multiple rows just like you can with colum
 class 爲 `item5` 的元素應具有 `grid-row` 屬性。
 
 ```js
-assert(
-  __helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
+const styleElement = document.querySelector('style:not(.fcc-hide-header)');
+assert.match(
+  __helpers.removeWhiteSpace(styleElement.textContent),
+  /\.item5{.*grid-row:.*}/g
 );
 ```
 
 class 爲 `item5` 的元素應具有 `grid-row` 屬性，其屬性值應將元素設置爲佔用網格的最後兩行。
 
 ```js
-const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
-const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
+const itemFive = document.querySelector('.item5');
+const rowStart = getComputedStyle(itemFive).gridRowStart;
+const rowEnd = getComputedStyle(itemFive).gridRowEnd;
 const result = rowStart.toString() + rowEnd.toString();
 const correctResults = [
   '24',
@@ -42,7 +45,7 @@ const correctResults = [
   'span 2auto',
   'autospan 2'
 ];
-assert(correctResults.includes(result));
+assert.include(correctResults, result);
 ```
 
 # --seed--
@@ -51,10 +54,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -89,10 +100,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
index 7a8bf07eb0..539bb920d0 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
@@ -22,12 +22,9 @@ CSS Grid can be an easy way to make your site more responsive by using media que
 當網頁可視區域的寬度爲 `400px` 或以上時，class 爲 `container` 的元素應具有 `grid-template-areas` 屬性，其屬性值能夠使 footer 和 header 區域分別佔據頂行和底行，advert 和 content 區域分別佔據中間行的左列和右列。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(
-      /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
-    )
+assert.match(
+  __helpers.removeCssComments(code),
+  /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?["|']\s*?header\s*?header\s*?["|']\s*?["|']\s*?advert\s*?content\s*?["|']\s*?["|']\s*?footer\s*?footer\s*?["|']\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -67,30 +64,30 @@ assert(
     grid-template-rows: 50px auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "header"
-      "advert"
-      "content"
-      "footer";
+      'header'
+      'advert'
+      'content'
+      'footer';
   }
 
-  @media (min-width: 300px){
-    .container{
+  @media (min-width: 300px) {
+    .container {
       grid-template-columns: auto 1fr;
       grid-template-rows: auto 1fr auto;
       grid-template-areas:
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
     }
   }
 
-  @media (min-width: 400px){
-    .container{
+  @media (min-width: 400px) {
+    .container {
       grid-template-areas:
       /* Only change code below this line */
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
       /* Only change code above this line */
     }
   }
@@ -138,29 +135,29 @@ assert(
     grid-template-rows: 50px auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "header"
-      "advert"
-      "content"
-      "footer";
+      'header'
+      'advert'
+      'content'
+      'footer';
   }
 
-  @media (min-width: 300px){
-    .container{
+  @media (min-width: 300px) {
+    .container {
       grid-template-columns: auto 1fr;
       grid-template-rows: auto 1fr auto;
       grid-template-areas:
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
     }
   }
 
-  @media (min-width: 400px){
-    .container{
+  @media (min-width: 400px) {
+    .container {
       grid-template-areas:
-        "header header"
-        "advert content"
-        "footer footer";
+        'header header'
+        'advert content'
+        'footer footer';
     }
   }
 </style>
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
index 7d09ebc2c1..d7cc73d06f 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
@@ -16,13 +16,17 @@ Media Queries are a new technique introduced in CSS3 that change the presentatio
 下面是一個媒體查詢的例子，當設備寬度小於或等於 `100px` 時返回內容：
 
 ```css
-@media (max-width: 100px) { /* CSS Rules */ }
+@media (max-width: 100px) {
+  /* CSS Rules */
+}
 ```
 
 以下定義的媒體查詢，是當設備高度大於或等於 `350px` 時返回內容：
 
 ```css
-@media (min-height: 350px) { /* CSS Rules */ }
+@media (min-height: 350px) {
+  /* CSS Rules */
+}
 ```
 
 注意，只有當媒體類型與所使用的設備的類型匹配時，媒體查詢中定義的 CSS 才生效。
@@ -37,21 +41,30 @@ Media Queries are a new technique introduced in CSS3 that change the presentatio
 
 ```js
 const media = new __helpers.CSSHelp(document).getCSSRules('media');
-assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
+assert.isTrue(
+  media.some(x => x.media?.mediaText?.includes('(max-height: 800px)'))
+);
 ```
 
 當設備 `height` 小於等於 `800px` 時，`p` 元素的 `font-size` 應爲 `10px`。
 
 ```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
-assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia(
+  '(max-height: 800px)'
+);
+assert.strictEqual(
+  rules?.find(x => x.selectorText === 'p')?.style?.fontSize,
+  '10px'
+);
 ```
 
 當設備 `height` 大於 `800px` 時，`p` 元素的 `font-size` 應爲 `20px`。
 
 ```js
-const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
-assert(ifPFirst?.style?.fontSize === '20px');
+const ifPFirst = new __helpers.CSSHelp(document)
+  .getCSSRules()
+  ?.find(x => x?.selectorText === 'p' || x?.media);
+assert.strictEqual(ifPFirst?.style?.fontSize, '20px');
 ```
 
 # --seed--
@@ -69,7 +82,14 @@ assert(ifPFirst?.style?.fontSize === '20px');
   /* Only change code above this line */
 </style>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
 
 # --solutions--
@@ -87,5 +107,12 @@ assert(ifPFirst?.style?.fontSize === '20px');
   }
 </style>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
index ef8e8847fb..3fc99ad403 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
@@ -28,13 +28,13 @@ img {
 `responsive-img` 類應將 `max-width` 設置爲 `100%`。
 
 ```js
-assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
+assert.strictEqual(getComputedStyle(document.querySelector('.responsive-img')).maxWidth, '100%');
 ```
 
 `responsive-img` 類應將 `height` 設置爲 `auto`。
 
 ```js
-assert(code.match(/height:\s*?auto;/g));
+assert.match(code, /height:\s*?auto;/g);
 ```
 
 # --seed--
@@ -53,24 +53,38 @@ img {
 }
 </style>
 
-<img class="responsive-img" src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img
+  class="responsive-img"
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
 ```
 
 # --solutions--
 
 ```html
 <style>
-.responsive-img {
-  max-width: 100%;
-  height: auto;
-}
-
-img {
-  width: 600px;
-}
+  .responsive-img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  img {
+    width: 600px;
+  }
 </style>
 
-<img class="responsive-img" src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img
+  class="responsive-img"
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
index 48cd5adfed..f034ff33e7 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
@@ -18,7 +18,9 @@ Instead of using `em` or `px` to size text, you can use viewport units for respo
 下面這個例子是設置 `body` 標籤的寬度爲視窗寬度的 30%。
 
 ```css
-body { width: 30vw; }
+body {
+  width: 30vw;
+}
 ```
 
 # --instructions--
@@ -30,20 +32,18 @@ body { width: 30vw; }
 `h2` 元素的 `width` 應爲 80vw。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
+assert.match(
+  __helpers.removeCssComments(code),
+  /h2\s*?{\s*?width:\s*?80vw;\s*?}/g
 );
 ```
 
 `p` 元素的 `width` 應爲 75vmin。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
+assert.match(
+  __helpers.removeCssComments(code),
+  /p\s*?{\s*?width:\s*?75vmin;\s*?}/g
 );
 ```
 
@@ -57,7 +57,14 @@ assert(
 </style>
 
 <h2>Importantus Ipsum</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
 
 # --solutions--
@@ -65,13 +72,20 @@ assert(
 ```html
 <style>
   h2 {
-      width: 80vw;
+    width: 80vw;
   }
   p {
-      width: 75vmin;
+    width: 75vmin;
   }
 </style>
 
 <h2>Importantus Ipsum</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
index 6eed2fc0b6..49c5a3161d 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
@@ -15,9 +15,12 @@ With the increase of internet connected devices, their sizes and specifications
 
 ```html
 <style>
-  img { height: 250px; width: 250px; }
+  img {
+    height: 250px;
+    width: 250px;
+  }
 </style>
-<img src="coolPic500x500" alt="A most excellent picture">
+<img src="coolPic500x500" alt="A most excellent picture" />
 ```
 
 # --instructions--
@@ -29,13 +32,13 @@ With the increase of internet connected devices, their sizes and specifications
 `img` 標籤的 `width` 屬性值應爲 100px。
 
 ```js
-assert(document.querySelector('img').width === 100);
+assert.strictEqual(document.querySelector('img').width, 100);
 ```
 
 `img` 標籤的 `height` 屬性值應爲 100px。
 
 ```js
-assert(document.querySelector('img').height === 100);
+assert.strictEqual(document.querySelector('img').height, 100);
 ```
 
 # --seed--
@@ -43,22 +46,26 @@ assert(document.querySelector('img').height === 100);
 ## --seed-contents--
 
 ```html
-<style>
-
-</style>
+<style></style>
 
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg"
+  alt="freeCodeCamp sticker that says 'Because CamperBot Cares'"
+/>
 ```
 
 # --solutions--
 
 ```html
 <style>
-  img { 
-    height: 100px; 
-    width: 100px; 
+  img {
+    height: 100px;
+    width: 100px;
   }
 </style>
 
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg"
+  alt="freeCodeCamp sticker that says 'Because CamperBot Cares'"
+/>
 ```
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
index d5fda67c89..3a4891fa49 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
@@ -72,7 +72,7 @@ dashedName: build-a-25--5-clock
 
 **用戶故事 #28:** 音頻元素帶有id爲 `beep` 必須停止播放並且倒退回開頭，當id爲 `reset` 的元素被點擊時.
 
-你可以構建你的項目通過 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用這個codepen模板</a> 並且點擊`Save` 去創建你自己的作品. 或者你可以使用這個CDN鏈接去運行測試在你喜歡的任何環境: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+你可以構建你的項目通過 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用這個codepen模板</a> 並且點擊`Save` 去創建你自己的作品. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 一旦你完成了，提交你通過所有測試的工作項目URL.
 
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
index f8d4f065ab..9dd196f391 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
@@ -41,7 +41,7 @@ dashedName: build-a-drum-machine
 - [Kick](https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3)
 - [Closed-HH](https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3)
 
-你可以通過 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 並單擊 `Save` 來創建你自己的筆，從而構建你的項目。 或者你可以使用此 CDN 鏈接在你喜歡的任何環境中運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+你可以通過 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 並單擊 `Save` 來創建你自己的筆，從而構建你的項目。 If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 完成項目並通過所有測試後，請輸入你的項目在 CodePen 上的鏈接並提交。
 
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
index ec468c0f72..386f861030 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
@@ -52,7 +52,7 @@ dashedName: build-a-javascript-calculator
 -   **Immediate Execution Logic:** `11.5`
 -   **公式／表達式邏輯：** `32.5`
 
-你可以<a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用 CodePen 模版</a>創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。
 
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
index 5f407848ca..c8857ad870 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
@@ -29,7 +29,7 @@ dashedName: build-a-markdown-previewer
 
 **可選獎勵（你不需要通過此測試）：** 我的 markdown 預覽器解釋回車符並將其呈現爲 `br`（換行符）元素。
 
-你可以通過 <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 並單擊 `Save` 來創建你自己的筆，從而構建你的項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 當你完成了本項目，並且項目通過所有測試，請提交項目的 URL。
 
diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
index 5bd04a5775..428982885b 100644
--- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
+++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
@@ -37,7 +37,7 @@ dashedName: build-a-random-quote-machine
 
 **用戶故事 #11：** `#quote-box` 包裝元素應水平居中。 請在瀏覽器縮放級別爲 100% 且頁面最大化的情況下運行測試。
 
-你可以<a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用這份 CodePen 模版</a>來創建你的新項目，點擊 `Save` 即可創建屬於你自己的項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 當你完成了本項目並且該項目所有測試運行通過，請提交項目的 URL。
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
index 2af2ac1b09..721fa81284 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
@@ -22,6 +22,8 @@ fetch('/json/cats.json')
 
 ```
 
+Note: The `fetch()` method uses `GET` as the default `HTTP` method. This means you don’t need to specify it explicitly for basic data retrieval.
+
 逐行解釋一下代碼。
 
 第一行是發起請求。 `fetch(URL)` 向指定的 URL 發起 `GET` 請求。 這個方法返回一個 Promise。
diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
index 5617bf6496..0833450179 100644
--- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
+++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
@@ -212,15 +212,29 @@ async (getUserInput) => {
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
     });
-    if (addRes.ok) {
-      const actual = await addRes.json();
-      assert.deepEqual(actual, expected);
-      assert.isString(actual.description);
-      assert.isNumber(actual.duration);
-      assert.isString(actual.date);
-    } else {
+    assert.isTrue(addRes.ok);
+    if (!addRes.ok) {
       throw new Error(`${addRes.status} ${addRes.statusText}`);
     }
+    const responseBody = await addRes.json();
+    assert.isString(responseBody.description);
+    assert.isNumber(responseBody.duration);
+    assert.isString(responseBody.date);
+    assert.equal(responseBody._id, expected._id);
+    assert.equal(responseBody.username, expected.username);
+    assert.equal(responseBody.description, expected.description);
+    assert.equal(responseBody.duration, expected.duration);
+    const receivedDate = new Date(responseBody.date);
+    const expectedDate = new Date(expected.date); // Jan 1, 1990
+    const allowedPreviousDate = new Date(expectedDate);
+    allowedPreviousDate.setDate(expectedDate.getDate() - 1); // Dec 31, 1989
+    const isValidDate =
+      receivedDate.toDateString() === expectedDate.toDateString() ||
+      receivedDate.toDateString() === allowedPreviousDate.toDateString();
+    assert.isTrue(
+      isValidDate,
+      `Expected date to be ${expectedDate.toDateString()} or ${allowedPreviousDate.toDateString()}, but got ${receivedDate.toDateString()}`
+    );
   } else {
     throw new Error(`${res.status} ${res.statusText}`);
   }
@@ -495,26 +509,38 @@ async(getUserInput) => {
 The `date` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string. Use the `dateString` format of the `Date` API.
 
 ```js
-async(getUserInput) => {
+async (getUserInput) => {
   const url = getUserInput('url');
   const res = await fetch(url + '/api/users', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
-    body: `username=fcc_test_${Date.now()}`.substring(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
   });
-  if(res.ok) {
-    const {_id, username} = await res.json();
+
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const currentDate = new Date();
+    const expectedDates = [
+      new Date(currentDate.setDate(currentDate.getDate() - 1)).toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', ''),
+      new Date().toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', ''),
+      new Date(currentDate.setDate(currentDate.getDate() + 1)).toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', '')
+    ];
     const expected = {
       username,
       description: 'test',
       duration: 60,
       _id,
-      date: new Date().toLocaleDateString("en-US", {
-        timeZone: "UTC", weekday: "short", month: "short",
-        day: "2-digit", year: "numeric"
-      }).replaceAll(',', '')
     };
     const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
       method: 'POST',
@@ -523,13 +549,13 @@ async(getUserInput) => {
       },
       body: `description=${expected.description}&duration=${expected.duration}`
     });
-    if(addRes.ok) {
+    if (addRes.ok) {
       const logRes = await fetch(url + `/api/users/${_id}/logs`);
-      if(logRes.ok){
-        const {log} = await logRes.json();
+      if (logRes.ok) {
+        const { log } = await logRes.json();
         const exercise = log[0];
         assert.isString(exercise.date);
-        assert.equal(exercise.date, expected.date);
+        assert.include(expectedDates, exercise.date); // Check if date matches any valid dates
       } else {
         throw new Error(`${logRes.status} ${logRes.statusText}`);
       }
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 2b21c51155..eccbf1c3ec 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -711,6 +711,358 @@ t.result.wasSuccessful()
 })
 ```
 
+Title at the top of `create_spend_chart` chart should say `Percentage spent by category`.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+
+    def test_create_spend_chart(self):
+        self.food.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        chart = budget.create_spend_chart([self.food])
+        expected = "Percentage spent by category"
+        self.assertEqual(chart.split("\\n")[0], expected, "Chart should have correct title.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should have correct percentages down the left side.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+
+    def test_create_spend_chart(self):
+        self.food.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        chart = budget.create_spend_chart([self.food])
+        percentages = ["100|", " 90|", " 80|", " 70|", " 60|", " 50|", " 40|", " 30|", " 20|", " 10|", "  0|"]
+        for line, percent in zip(chart.split("\\n")[1:], percentages):
+           self.assertTrue(line.startswith(percent), "Chart correct percentages in the vertical axis.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+The height of each bar on the `create_spend_chart` chart should be rounded down to the nearest 10.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(78)
+        self.entertainment.withdraw(22)
+        self.business.withdraw(8)
+
+    def test_create_spend_chart_rounding_close_to_upper_and_lower_ten(self):
+        chart_lines = budget.create_spend_chart([self.food, self.entertainment]).split("\\n")[1:12]
+        result_lines = '''100|
+ 90|
+ 80|
+ 70| o
+ 60| o
+ 50| o
+ 40| o
+ 30| o
+ 20| o  o
+ 10| o  o
+  0| o  o'''.split("\\n")
+
+        self.assertEqual(len(chart_lines), len(result_lines), "Lines missing in chart.")
+        for actual, expected in zip(chart_lines, result_lines):
+            self.assertTrue(actual.startswith(expected), "Expected different rounding of bars.")
+
+
+    def test_create_spend_chart_rounding_single_digit(self):
+        chart_lines = budget.create_spend_chart([self.business, self.food, self.entertainment]).split("\\n")[1:12]
+        result_lines = '''100|
+ 90|
+ 80|
+ 70|    o
+ 60|    o
+ 50|    o
+ 40|    o
+ 30|    o
+ 20|    o  o
+ 10|    o  o
+  0| o  o  o'''.split("\\n")
+
+        self.assertEqual(len(chart_lines), len(result_lines), "Lines missing in chart.")
+        for actual, expected in zip(chart_lines, result_lines):
+            self.assertTrue(actual.startswith(expected), "Expected different rounding of bars.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+Each line in `create_spend_chart` chart should have the same length. Bars for different categories should be separated by two spaces, with additional two spaces after the final bar.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(78)
+        self.entertainment.withdraw(22)
+        self.business.withdraw(8)
+
+
+    def test_create_spend_chart_chart_lines_have_expected_length(self):
+        chart_categories = [[self.food, self.entertainment], [self.business, self.food, self.entertainment]]
+
+        expected_lengths = [len(line) for line in ["  0| o  o  ", "  0| o  o  o  "]]
+        expected_chart_lines = 11
+
+        for categories, expected_length in zip(chart_categories, expected_lengths):
+            chart_lines = budget.create_spend_chart(categories).split("\\n")[1:12]
+
+            self.assertEqual(len(chart_lines), expected_chart_lines, "Lines missing in chart.")
+            for actual in chart_lines:
+                self.assertEqual(len(actual), expected_length, "Expected different length of the chart line. Check that all spacing is exact.")
+`);
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` should correctly show horizontal line below the bars. Using three `-` characters for each category, and in total going two characters past the final bar.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+
+    def test_create_spend_chart_horizontal_bar(self):
+        chart_categories = [[self.business], [self.business, self.food], [self.business, self.food, self.entertainment]]
+        horizontal_lines = ["    ----", "    -------", "    ----------"]
+        for categories, expected in zip(chart_categories, horizontal_lines):
+            actual = budget.create_spend_chart(categories).split("\\n")[12]
+            self.assertEqual(actual, expected, "Expected different horizontal bar. Check that all spacing is exact.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should not have new line character at the end.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+
+    def test_create_spend_chart_no_ending_new_line(self):
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+        actual = budget.create_spend_chart([self.business, self.food, self.entertainment])
+        self.assertFalse(actual.endswith("\\n"), "Expected chart to not have new line at the end.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should have each category name written vertically below the bar. Each line should have the same length, each category should be separated by two spaces, with additional two spaces after the final category.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+
+    def test_create_spend_chart_names_two_categories(self):
+        chart = budget.create_spend_chart([self.food, self.entertainment])
+        actual = "\\n".join(chart.split("\\n")[13:]).rstrip("\\n")
+        expected = "     F  E  \\n     o  n  \\n     o  t  \\n     d  e  \\n        r  \\n        t  \\n        a  \\n        i  \\n        n  \\n        m  \\n        e  \\n        n  \\n        t  "
+        self.assertEqual(actual, expected, "Expected different category names written vertically below the bar. Check that all spacing is exact.")
+
+    def test_create_spend_chart_names_three_categories(self):
+        chart = budget.create_spend_chart([self.business, self.food, self.entertainment])
+        actual = "\\n".join(chart.split("\\n")[13:]).rstrip("\\n")
+        expected = "     B  F  E  \\n     u  o  n  \\n     s  o  t  \\n     i  d  e  \\n     n     r  \\n     e     t  \\n     s     a  \\n     s     i  \\n           n  \\n           m  \\n           e  \\n           n  \\n           t  "
+        self.assertEqual(actual, expected, "Expected different category names written vertically below the bar. Check that all spacing is exact.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
 `create_spend_chart` should print a different chart representation. Check that all spacing is exact. Open your browser console with F12 for more details.
 
 ```js
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
index 278f93b305..de9a174b6c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
@@ -8,12 +8,11 @@ dashedName: build-a-personal-portfolio-webpage
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a>. **Do not copy this demo project**.
-
+**目標：** 構建一個功能類似於 <a href="https: personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a> 的應用程序。 **請勿複製此演示項目**。
 
 **用戶需求:**
 
-1. Your portfolio should have a welcome section with an `id` of `welcome-section`
+1. 你的作品集應該有一個歡迎部分，其 `id` 爲 `welcome-section`
 1. 歡迎部分應該有一個包含文本的 `h1` 元素
 1. 你的作品集應該有一個 `id` 爲 `projects` 的項目部分
 1. 項目部分應該包含至少一個 `class` 爲 `project-tile` 的元素來保存項目
@@ -34,8 +33,8 @@ dashedName: build-a-personal-portfolio-webpage
 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。
 
 ```js
-const el = document.getElementById('welcome-section')
-assert(!!el);
+const el = document.getElementById('welcome-section');
+assert.isNotNull(el);
 ```
 
 你的 `#welcome-section` 元素應該包含一個 `h1` 元素。
@@ -54,25 +53,21 @@ assert.isAbove(
 assert.isAbove(
   document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
   0,
-  'h1 element in welcome section should contain your name or camper ' +
-    'name '
+  'h1 element in welcome section should contain your name or camper ' + 'name '
 );
 ```
 
 你應該有一個 `id` 爲 `projects` 的項目部分。
 
 ```js
-const el = document.getElementById('projects')
-assert(!!el);
+const el = document.getElementById('projects');
+assert.isNotNull(el);
 ```
 
 你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。
 
 ```js
-assert.isAbove(
-  document.querySelectorAll('#projects .project-tile').length,
-  0
-);
+assert.isAbove(document.querySelectorAll('#projects .project-tile').length, 0);
 ```
 
 你的 `#projects` 元素應該包含至少一個 `a` 元素。
@@ -85,35 +80,33 @@ assert.isAbove(document.querySelectorAll('#projects a').length, 0);
 
 ```js
 const el = document.getElementById('navbar');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。
 
 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+  nav => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );
 
-assert.isAbove(
-  links.length,
-  0,
-  'Navbar should contain an anchor link '
-);
+assert.isAbove(links.length, 0, 'Navbar should contain an anchor link ');
 ```
 
 你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.tagName === 'A')
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.target === '_blank')
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的作品集應該至少有一個媒體查詢。
@@ -121,14 +114,15 @@ assert(!!el && el.target === '_blank')
 ```js
 const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
 const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 你的 `#navbar` 元素應該始終位於視口的頂部。
 
 ```js
 (async () => {
-  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+  const timeout = milliseconds =>
+    new Promise(resolve => setTimeout(resolve, milliseconds));
 
   const navbar = document.getElementById('navbar');
   assert.approximately(
@@ -136,7 +130,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     0,
     15,
     "Navbar's parent should be body and it should be at the top of " +
-    'the viewport '
+      'the viewport '
   );
 
   window.scroll(0, 500);
@@ -147,8 +141,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     navbar?.getBoundingClientRect().top,
     0,
     15,
-    'Navbar should be at the top of the viewport even after ' +
-    'scrolling '
+    'Navbar should be at the top of the viewport even after ' + 'scrolling '
   );
   window.scroll(0, 0);
 })();
@@ -223,7 +216,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 ```css
-nav{
+nav {
   position: fixed;
   width: 100%;
   text-align: right;
@@ -233,37 +226,37 @@ nav{
   background-color: #000000;
   color: #ffffff;
 }
-@media (max-width: 500px){
-  nav{
+@media (max-width: 500px) {
+  nav {
     display: none;
   }
 }
-a{
+a {
   color: #ffffff;
 }
-main{
+main {
   text-align: center;
   background-color: black;
-  font-family:Pacifico
+  font-family: Pacifico;
 }
-h1{
+h1 {
   font-size: 48pt;
 }
-h2{
+h2 {
   font-size: 24pt;
 }
-p{
+p {
   font-size: 12pt;
 }
-#welcome-section{
-  background-color:#251a4a;
-  color: #FFFFFF;
+#welcome-section {
+  background-color: #251a4a;
+  color: #ffffff;
   display: table-cell;
   vertical-align: middle;
   width: 100vw;
   height: 100vh;
 }
-#projects{
+#projects {
   background-color: #060a9c;
   color: #ffffff;
   display: table-cell;
@@ -271,7 +264,7 @@ p{
   width: 100vw;
   height: 100vh;
 }
-#contact{
+#contact {
   background-color: #03300b;
   color: #ffffff;
   display: table-cell;
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
index 8fc3f62fa0..1e23e7869f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
@@ -8,7 +8,7 @@ dashedName: build-a-product-landing-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>. **請勿複製此演示項目**。
 
 **用戶需求:**
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 4325031341..317c4bf399 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -8,7 +8,7 @@ dashedName: build-a-survey-form
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>. **請勿複製此演示項目**。
 
 **用戶需求:**
 
@@ -38,327 +38,368 @@ dashedName: build-a-survey-form
 你應該有一個 `id` 爲 `title` 的 `h1` 元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.tagName === 'H1')
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'H1');
 ```
 
 你的 `#title` 元素不應爲空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你應該有一個 `id` 爲 `description` 的 `p` 元素。
 
 ```js
-const el = document.getElementById('description')
-assert(!!el && el.tagName === 'P')
+const el = document.getElementById('description');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'P');
 ```
 
 你的 `#description` 不應爲空。
 
 ```js
-const el = document.getElementById('description')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('description');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你應該有一個 `id` 爲 `survey-form` 的 `form` 元素。
 
 ```js
-const el = document.getElementById('survey-form')
-assert(!!el && el.tagName === 'FORM')
+const el = document.getElementById('survey-form');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'FORM');
 ```
 
 你應該有一個 `id` 爲 `name` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#name` 元素應該具有 `type` 爲 `text`。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.type === 'text')
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'text');
 ```
 
 你的 `#name` 元素應該在表單中是必填項。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.required)
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 你的 `#name` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #name')
-assert(!!el)
+const el = document.querySelector('#survey-form #name');
+assert.isNotNull(el);
 ```
 
 你應該有一個 `id` 爲 `email` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#email` 元素應該具有 `type` 爲 `email`。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.type === 'email')
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'email');
 ```
 
 你的 `#email` 元素應該需要輸入。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.required)
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 你的 `#email` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #email')
-assert(!!el)
+const el = document.querySelector('#survey-form #email');
+assert.isNotNull(el);
 ```
 
 你應該有一個 `id` 爲 `number` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#number` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #number')
-assert(!!el)
+const el = document.querySelector('#survey-form #number');
+assert.isNotNull(el);
 ```
 
 你的 `#number` 元素應該具有 `type` 爲 `number`。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.type === 'number')
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'number');
 ```
 
 你的 `#number` 應該有一個值爲數字的 `min` 屬性。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.min && isFinite(el.min))
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotEmpty(el.min);
+assert.isTrue(isFinite(el.min));
 ```
 
 你的 `#number` 應該有一個值爲數字的 `max` 屬性。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.max && isFinite(el.max))
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotEmpty(el.max);
+assert.isTrue(isFinite(el.max));
 ```
 
 你應該有一個 `id` 爲 `name-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('name-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('name-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你應該有一個 `id` 爲 `email-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('email-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('email-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你應該有一個 `id` 爲 `number-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('number-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('number-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你的 `#name-label` 應包含描述輸入的文本。
 
 ```js
-const el = document.getElementById('name-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('name-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#email-label` 應包含描述輸入的文本。
 
 ```js
-const el = document.getElementById('email-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('email-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#number-label` 應該包含描述輸入的文本。
 
 ```js
-const el = document.getElementById('number-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('number-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #name-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #name-label');
+assert.isNotNull(el);
 ```
 
 你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #email-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #email-label');
+assert.isNotNull(el);
 ```
 
 你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #number-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #number-label');
+assert.isNotNull(el);
 ```
 
 你的 `#name` 元素應該有 `placeholder` 屬性與佔位符文本。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你的 `#email` 元素應該有 `placeholder` 屬性與佔位符文本。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你的 `#number` 元素應該有 `placeholder` 屬性與佔位符文本。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你應該有一個 `id` 爲 `dropdown` 的 `select` 元素。
 
 ```js
-const el = document.getElementById('dropdown')
-assert(!!el && el.tagName === 'SELECT')
+const el = document.getElementById('dropdown');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'SELECT');
 ```
 
 你的 `#dropdown` 應該至少有兩個可選擇（未禁用）`option` 元素。
 
 ```js
-const els = document.querySelectorAll('#dropdown option:not([disabled])')
-assert(els.length >= 2)
+const els = document.querySelectorAll('#dropdown option:not([disabled])');
+assert.isAtLeast(els.length, 2);
 ```
 
 你的 `#dropdown` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #dropdown')
-assert(!!el)
+const el = document.querySelector('#survey-form #dropdown');
+assert.isNotNull(el);
 ```
 
 你應該有至少兩個 `input` 元素，`type` 爲 `radio`（單選按鈕）。
 
 ```js
-const els = document.querySelectorAll('input[type="radio"]')
-assert(els.length >= 2)
+const els = document.querySelectorAll('input[type="radio"]');
+assert.isAtLeast(els.length, 2);
 ```
 
 你至少應該有兩個單選按鈕，是 `#survey-form` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#survey-form input[type="radio"]')
-assert(els.length >= 2)
+const els = document.querySelectorAll('#survey-form input[type="radio"]');
+assert.isAtLeast(els.length, 2);
 ```
 
 你所有的單選按鈕都應該有一個 `value` 屬性和值。
 
 ```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll(
+  'input[type="radio"][value=""], input[type="radio"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 你所有的單選按鈕都應該有一個 `name` 屬性和值。
 
 ```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll(
+  'input[type="radio"][name=""], input[type="radio"]:not([name])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 每個單選按鈕組應至少有 2 個單選按鈕。
 
 ```js
 const radioButtons = document.querySelectorAll('input[type="radio"]');
-const groups = {}
+const groups = {};
 
 if (radioButtons) {
   radioButtons.forEach(el => {
-    if (!groups[el.name]) groups[el.name] = []
-    groups[el.name].push(el)
-  })
+    if (!groups[el.name]) groups[el.name] = [];
+    groups[el.name].push(el);
+  });
 }
 
-const groupKeys = Object.keys(groups)
+const groupKeys = Object.keys(groups);
 
 groupKeys.forEach(key => {
-  if (groups[key].length < 2) assert(false)
-})
+  if (groups[key].length < 2) assert(false);
+});
 
-assert(groupKeys.length > 0)
+assert.isAbove(groupKeys.length, 0);
 ```
 
 你應該至少有兩個 `input` 元素，`type` 爲 `checkbox`（複選框），它們是 `#survey-form` 的子元素。
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
-assert(els.length >= 2)
+assert.isAtLeast(els.length, 2);
 ```
 
 你在 `#survey-form` 中的所有複選框都應該有 `value` 屬性和值。
 
 ```js
-const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
-const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]');
+const els2 = document.querySelectorAll(
+  '#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 你至少應該有一個 `textarea` 元素，它是 `#survey-form` 的子元素。
 
 ```js
-const el = document.querySelector('#survey-form textarea')
-assert(!!el)
+const el = document.querySelector('#survey-form textarea');
+assert.isNotNull(el);
 ```
 
 你應該有一個 `id` 爲 `submit` 的 `input` 或 `button` 元素。
 
 ```js
-const el = document.getElementById('submit')
-assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
+const el = document.getElementById('submit');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'INPUT' || el.tagName === 'BUTTON');
 ```
 
 你的 `#submit` 元素應該具有 `type` 爲 `submit`。
 
 ```js
-const el = document.getElementById('submit')
-assert(!!el && el.type === 'submit')
+const el = document.getElementById('submit');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'submit');
 ```
 
 你的 `#submit` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #submit')
-assert(!!el)
+const el = document.querySelector('#survey-form #submit');
+assert.isNotNull(el);
 ```
 
 # --seed--
@@ -508,7 +549,10 @@ body {
   background: #3a3240;
   color: white;
 }
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
   background: #3a3240;
   color: white;
 }
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
index 35a106af0f..cc46c9ced3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
@@ -8,7 +8,7 @@ dashedName: build-a-technical-documentation-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>. **請勿複製此演示項目**。
 
 **用戶需求:**
 
@@ -37,141 +37,147 @@ dashedName: build-a-technical-documentation-page
 你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。
 
 ```js
-const el = document.getElementById('main-doc')
-assert(!!el)
+const el = document.getElementById('main-doc');
+assert.isNotNull(el);
 ```
 
 你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc section');
+assert.isAtLeast(els.length, 5);
 ```
 
 你所有的 `.main-section` 元素都應該是 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (el.tagName !== 'SECTION') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'SECTION') {
+    assert.fail();
+  }
+});
+assert.isAbove(els.length, 0);
 ```
 
 你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc .main-section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc .main-section');
+assert.isAtLeast(els.length, 5);
 ```
 
 每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
-})
-assert(els.length > 0)
+  if (el.firstElementChild?.tagName !== 'HEADER') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你的 `header` 元素不應爲空。
 
 ```js
-const els = document.querySelectorAll('header')
+const els = document.querySelectorAll('header');
 els.forEach(el => {
-  if (el.innerText?.length <= 0) assert(false)
-})
-assert(els.length > 0)
+  if (el.innerText?.length <= 0) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.main-section` 元素都應該有 `id`。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (!el.id || el.id === '') assert(false)
-})
-assert(els.length > 0)
+  if (!el.id || el.id === '') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
-  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
-})
-assert(els.length > 0)
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_');
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 在你的 `.main-section` 元素中總計應有至少 10 個 `p` 元素
 
 ```js
-const els = document.querySelectorAll('.main-section p')
-assert(els.length >= 10)
+const els = document.querySelectorAll('.main-section p');
+assert.isAtLeast(els.length, 10);
 ```
 
 所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section code')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section code');
+assert.isAtLeast(els.length, 5);
 ```
 
 所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section li')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section li');
+assert.isAtLeast(els.length, 5);
 ```
 
 你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。
 
 ```js
-const el = document.getElementById('navbar')
-assert(!!el && el.tagName === 'NAV')
+const el = document.getElementById('navbar');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'NAV');
 ```
 
 你的 `#navbar` 應該只有一個 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('#navbar header')
-assert(els.length === 1)
+const els = document.querySelectorAll('#navbar header');
+assert.lengthOf(els, 1);
 ```
 
 你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。
 
 ```js
-const els = document.querySelectorAll('a.nav-link')
-assert(els.length >= 1)
+const els = document.querySelectorAll('a.nav-link');
+assert.isAtLeast(els.length, 1);
 ```
 
 你所有的 `.nav-link` 元素都應該是錨元素（`a`）。
 
 ```js
-const els = document.querySelectorAll('.nav-link')
+const els = document.querySelectorAll('.nav-link');
 els.forEach(el => {
-  if (el.tagName !== 'A') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'A') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.nav-link` 元素都應該在 `#navbar` 中。
 
 ```js
-const els1 = document.querySelectorAll('.nav-link')
-const els2 = document.querySelectorAll('#navbar .nav-link')
-assert(els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.nav-link');
+const els2 = document.querySelectorAll('#navbar .nav-link');
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。
 
 ```js
-const els1 = document.querySelectorAll('.main-section')
-const els2 = document.querySelectorAll('.nav-link')
-assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.main-section');
+const els2 = document.querySelectorAll('.nav-link');
+assert.isNotEmpty(els1);
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 `#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接（`a`）之前。
@@ -179,54 +185,66 @@ assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
 ```js
 const navLinks = document.querySelectorAll('#navbar a.nav-link');
 const header = document.querySelector('#navbar header');
-navLinks.forEach((navLink) => {
+navLinks.forEach(navLink => {
   if (
-    (
-      header.compareDocumentPosition(navLink) &
-      Node.DOCUMENT_POSITION_PRECEDING
-    ) 
-  ) assert(false)
+    header.compareDocumentPosition(navLink) & Node.DOCUMENT_POSITION_PRECEDING
+  )
+    assert.fail();
 });
-assert(!!header)
+assert.isNotNull(header);
 ```
 
 每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。
 
 ```js
-const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
-  el.firstElementChild?.innerText?.trim().toUpperCase()
-)
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(
+  el => el.firstElementChild?.innerText?.trim().toUpperCase()
+);
 const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
   el.innerText?.trim().toUpperCase()
-)
-const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
-assert(headerText.length > 0 && linkText.length > 0 && remainder.length === 0)
+);
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1);
+
+assert.isNotEmpty(headerText);
+assert.isNotEmpty(linkText);
+assert.isEmpty(remainder);
 ```
 
 每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。
 
 ```js
-const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
-const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
-const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
-assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.getAttribute('href')
+);
+const mainSectionIDs = Array.from(
+  document.querySelectorAll('.main-section')
+).map(el => el.id);
+const missingHrefValues = mainSectionIDs.filter(
+  str => hrefValues.indexOf('#' + str) === -1
+);
+assert.isNotEmpty(hrefValues);
+assert.isNotEmpty(mainSectionIDs);
+assert.isEmpty(missingHrefValues, 0);
 ```
 
 你的 `#navbar` 元素應該始終位於視口的頂部。
 
 ```js
-const el = document.getElementById('navbar')
-const left1 = el?.offsetLeft
-const left2 = el?.offsetLeft
-assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+const el = document.getElementById('navbar');
+const left1 = el?.offsetLeft;
+assert.isNotNull(el);
+assert.isAtLeast(left1, -15);
+assert.isAtMost(left1, 15);
 ```
 
 你的技術文檔項目應該使用至少一個媒體查詢。
 
 ```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el =>
+  el.getAttribute('media')
+);
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media');
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 # --seed--
@@ -501,7 +519,7 @@ a:hover {
   left: -5px;
   padding: 5px;
   text-align: center;
-  color: #92869c
+  color: #92869c;
 }
 @media (min-width: 480px) {
   #navbar {
@@ -510,7 +528,7 @@ a:hover {
 }
 main {
   margin-left: 220px;
-  color: #92869c
+  color: #92869c;
 }
 header {
   font-size: 20pt;
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
index ed5362b122..1c77606c65 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
@@ -8,8 +8,7 @@ dashedName: build-a-tribute-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
-
+**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>. **請勿複製此演示項目**。
 
 **用戶需求:**
 
@@ -32,111 +31,125 @@ dashedName: build-a-tribute-page
 你應該有一個 `main` 元素且該元素的 `id` 爲 `main`.
 
 ```js
-const el = document.getElementById('main')
-assert(!!el && el.tagName === 'MAIN')
+const el = document.getElementById('main');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'MAIN');
 ```
 
 你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 應該是 `#main` 的子元素。
 
 ```js
-const el1 = document.querySelector('#main #img-div')
-const el2 = document.querySelector('#main #image')
-const el3 = document.querySelector('#main #img-caption')
-const el4 = document.querySelector('#main #tribute-info')
-const el5 = document.querySelector('#main #tribute-link')
-assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+const el1 = document.querySelector('#main #img-div');
+const el2 = document.querySelector('#main #image');
+const el3 = document.querySelector('#main #img-caption');
+const el4 = document.querySelector('#main #tribute-info');
+const el5 = document.querySelector('#main #tribute-link');
+assert.isNotNull(el1);
+assert.isNotNull(el2);
+assert.isNotNull(el3);
+assert.isNotNull(el4);
+assert.isNotNull(el5);
 ```
 
 你應該有一個`id`爲`title`的元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el)
+const el = document.getElementById('title');
+assert.isNotNull(el);
 ```
 
 id爲 `#title` 的元素不應爲空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText, 0);
 ```
 
 你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-div')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+const el = document.getElementById('img-div');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGURE');
 ```
 
 你應該有一個 `id` 爲 `image` 的 `img` 元素。
 
 ```js
-const el = document.getElementById('image')
-assert(!!el && el.tagName === 'IMG')
+const el = document.getElementById('image');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'IMG');
 ```
 
 你的 `#image` 元素應該是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #image')
-assert(!!el)
+const el = document.querySelector('#img-div #image');
+assert.isNotNull(el);
 ```
 
 你應該有一個 `id` 爲 `img-caption` 的 `figcaption` 元素或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGCAPTION');
 ```
 
 你的 `#img-caption` 元素應該是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #img-caption')
-assert(!!el)
+const el = document.querySelector('#img-div #img-caption');
+assert.isNotNull(el);
 ```
 
 id爲 `#img-caption` 的元素不應爲空。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你應該有一個 `id` 爲 `tribute-info` 的元素。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
 ```
 
 id爲 `#tribute-info` 的元素不應爲空。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你應該有一個 `id` 爲 `tribute-link` 的 `a` 元素。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.tagName === 'A')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 id爲 `#tribute-link` 的元素的 `href` 屬性應該有值。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && !!el.href && el.href.length > 0)
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.isNotNull(el.href);
+assert.isNotEmpty(el.href);
 ```
 
 id爲 `#tribute-link` 的元素的 `target` 屬性應該設置爲 `_blank`。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.target === '_blank')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 `img` 元素應該有 `display` 樣式且值應爲 `block`。
@@ -144,8 +157,8 @@ assert(!!el && el.target === '_blank')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('display')
-assert(style === 'block')
+const style = imgStyle?.getPropertyValue('display');
+assert.strictEqual(style, 'block');
 ```
 
 id爲 `#image` 的元素應該有 `max-width` 樣式且值爲 `100%`。
@@ -153,8 +166,8 @@ id爲 `#image` 的元素應該有 `max-width` 樣式且值爲 `100%`。
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('max-width')
-assert(style === '100%')
+const style = imgStyle?.getPropertyValue('max-width');
+assert.strictEqual(style, '100%');
 ```
 
 id爲 `#image` 的元素的 `height` 樣式值應爲 `auto`。
@@ -166,9 +179,9 @@ const imgStyle = window.getComputedStyle(img);
 const oldDisplayValue = imgStyle.getPropertyValue('display');
 const oldDisplayPriority = imgStyle.getPropertyPriority('display');
 img?.style.setProperty('display', 'none', 'important');
-const heightValue = imgStyle?.getPropertyValue('height')
+const heightValue = imgStyle?.getPropertyValue('height');
 img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
-assert(heightValue === 'auto')
+assert.strictEqual(heightValue, 'auto');
 ```
 
 id爲 `#image` 的元素應該在其父元素內居中。
@@ -183,7 +196,8 @@ const img = document.getElementById('image'),
   parentRight = imgParent?.getBoundingClientRect().right,
   leftMargin = imgLeft - parentLeft,
   rightMargin = parentRight - imgRight;
-assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+assert.isBelow(leftMargin - rightMargin, 6);
+assert.isBelow(rightMargin - leftMargin, 6);
 ```
 
 # --seed--
@@ -208,12 +222,10 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
     <link
       href="https://fonts.googleapis.com/css?family=Pacifico"
       rel="stylesheet"
-
     />
     <link
       href="https://fonts.googleapis.com/css?family=Lobster"
       rel="stylesheet"
-
     />
     <link href="styles.css" rel="stylesheet" />
     <title>Tribute Page</title>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
index 186309cbb1..c4cad97a05 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
+在 `header` 中，通過嵌套一個 `img`、`h1` 和 `nav` 元素來提供有關頁面的上下文。
 
 `img` 標籤應該指向 `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`，`id` 屬性值爲 `logo`，`alt` 文本爲 `freeCodeCamp`。
 
@@ -57,7 +57,7 @@ assert.equal(document.querySelector('img')?.id, 'logo');
 assert.equal(document.querySelector('img')?.alt, 'freeCodeCamp');
 ```
 
-You should give the `h1` element the text `HTML/CSS Quiz`.
+你應該將 `h1` 元素的文本設置爲 `HTML/CSS Quiz`。
 
 ```js
 assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
index 9a7919d148..956311a19a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
@@ -9,7 +9,7 @@ dashedName: step-8
 
 A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
 
-Currently, the `img` is assuming its default size, which is too large. CSS has a `max` function which returns the largest of a set of comma-separated values. 例如：
+`img` 當前是默認尺寸，這個尺寸太大。 CSS 提供了一個 `max` 函數，它返回一組由逗號分隔的值中最大的值。 例如：
 
 ```css
 img {
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
index e864b1363e..0fc6594039 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
@@ -1,6 +1,6 @@
 ---
 id: 614202874ca576084fca625f
-title: Step 16
+title: 步驟 16
 challengeType: 0
 dashedName: step-16
 ---
@@ -9,83 +9,83 @@ dashedName: step-16
 
 Every `region` role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the `aria-labelledby` attribute.
 
-Add the following `aria-labelledby` attributes to the `section` elements:
+給 `section` 元素添加以下 `aria-labelledby` 屬性：
 
 - `student-info`
 - `html-questions`
 - `css-questions`
 
-Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
+然後，在每個 `section` 元素中，嵌套一個 `h2` 元素，其 `id` 與相應的 `aria-labelledby` 屬性匹配。 給每個 `h2` 添加適當的文本內容。
 
 # --hints--
 
-You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
+你應該給第一個 `section` 元素添加值爲 `student-info` 的 `aria-labelledby` 屬性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
 ```
 
-You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
+你應該給第二個 `section` 元素添加值爲 `html-questions` 的 `aria-labelledby` 屬性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
 ```
 
-You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
+你應該給第三個 `section` 元素添加值爲 `css-questions` 的 `aria-labelledby` 屬性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
 ```
 
-You should nest one `h2` element within the first `section` element.
+你應該在第一個 `section` 元素中嵌套一個 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should nest one `h2` element within the second `section` element.
+你應該在第二個 `section` 元素中嵌套一個 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should nest one `h2` element within the third `section` element.
+你應該在第三個 `section` 元素中嵌套一個 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should give the first `h2` element an `id` attribute of `student-info`.
+你應該給第一個 `h2` 元素添加 `id` 爲 `student-info`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
 ```
 
-You should give the second `h2` element an `id` attribute of `html-questions`.
+你應該給第二個 `h2` 元素添加 `id` 爲 `html-questions`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
 ```
 
-You should give the third `h2` element an `id` attribute of `css-questions`.
+你應該給第三個 `h2` 元素添加 `id` 爲 `css-questions`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
 ```
 
-You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
+你應該給第一個 `h2` 元素添加適當的文本內容。 _提示：我會使用 `Student Info`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
 ```
 
-You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
+你應該給第二個 `h2` 元素添加適當的文本內容。 _提示：我會使用 `HTML`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
 ```
 
-You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
+你應該給第三個 `h2` 元素添加適當的文本內容。 _提示：我會使用 `CSS`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
index d40c808617..bfef581db7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
@@ -7,7 +7,7 @@ dashedName: step-24
 
 # --description--
 
-The question numbers are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the element, is to add text only a screen reader can read.
+The question numbers are not descriptive enough. 對於視力受損的用戶來說尤其如此。 解決這個問題的方法之一是在元素中添加只有屏幕閱讀器才能讀取的文本，而無需在元素中添加可見文本。
 
 爲每個 `h3` 元素添加一個 `class` 爲 `sr-only` 的 `span` 元素。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index d649b8298d..32ee22866f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -9,117 +9,117 @@ dashedName: step-32
 
 Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text.
 
-The text should either be `True` or `False`.
+文本應爲 `True` 或 `False`。
 
 # --hints--
 
-You should give the first `label` element text content.
+你應該給第一個 `label` 元素添加文本內容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
 ```
 
-You should give the second `label` element text content.
+你應該給第二個 `label` 元素添加文本內容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
 ```
 
-You should give the third `label` element text content.
+你應該給第三個 `label` 元素添加文本內容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
 ```
 
-You should give the fourth `label` element text content.
+你應該給第四個 `label` 元素添加文本內容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
 ```
 
-You should place the first `label` text content after the `input` element.
+你應該將第一個 `label` 文本內容放在 `input` 元素之後。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the second `label` text content after the `input` element.
+你應該將第二個 `label` 文本內容放在 `input` 元素之後。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the third `label` text content after the `input` element.
+你應該將第三個 `label` 文本內容放在 `input` 元素之後。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the fourth `label` text content after the `input` element.
+你應該將第四個 `label` 文本內容放在 `input` 元素之後。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should give the first `label` the text `True` or `False`.
+你應該給第一個 `label` 添加文本 `True` 或 `False`。
 
 ```js
 assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
 ```
 
-You should give the second `label` the text `True`.
+你應該給第二個`label` 添加文本 `True`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(0) === 'False' ? l(1) === 'True' : true);
 ```
 
-You should give the second `label` the text `False`.
+你應該給第二個`label` 添加文本 `False`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(0) === 'True' ? l(1) === 'False' : true);
 ```
 
-You should give the third `label` the text `True` or `False`.
+你應該給第三個 `label` 添加文本 `True` 或 `False`。
 
 ```js
 assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
 ```
 
-You should give the fourth `label` the text `True`.
+你應該給第四個`label` 添加文本 `True`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(2) === 'False' ? l(3) === 'True' : true);
 ```
 
-You should give the fourth `label` the text `False`.
+你應該給第四個`label` 添加文本 `False`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(2) === 'True' ? l(3) === 'False' : true);
 ```
 
-You should give the first `input` a `value` matching the `label` text content.
+你應該給第一個 `input` 添加一個與 `label` 文本內容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
 ```
 
-You should give the second `input` a `value` matching the `label` text content.
+你應該給第二個 `input` 添加一個與 `label` 文本內容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
 ```
 
-You should give the third `input` a `value` matching the `label` text content.
+你應該給第三個 `input` 添加一個與 `label` 文本內容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
 ```
 
-You should give the fourth `input` a `value` matching the `label` text content.
+你應該給第四個 `input` 添加一個與 `label` 文本內容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index fd9231e81c..a30e65b8cd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -7,7 +7,7 @@ dashedName: step-45
 
 # --description--
 
-Back to styling the page. Select the list elements within the navigation bar, and give them the following styles:
+繼續爲頁面添加樣式。 選擇導航欄中的列表元素，並給它們添加下面的樣式：
 
 ```css
 color: #dfdfe2;
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index e101aa5c81..bac949b793 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -1,6 +1,6 @@
 ---
 id: 614796cb8086be482d60e0ac
-title: Step 46
+title: 步驟 46
 challengeType: 0
 dashedName: step-46
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 8b1535e90e..1f000d4b77 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -1,6 +1,6 @@
 ---
 id: 614878f7a412310647873015
-title: Step 48
+title: 步驟 48
 challengeType: 0
 dashedName: step-48
 ---
@@ -9,29 +9,29 @@ dashedName: step-48
 
 Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them.
 
-Then, fix the `header` to the top of the viewport.
+然後，將 `header` 固定到視口的頂部。
 
 # --hints--
 
-You should give the `header` a `justify-content` of `space-between`.
+你應該給 `header` 添加 `justify-content` 值爲 `space-between`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
 ```
 
-You should give the `header` an `align-items` of `center`.
+你應該給 `header` 添加 `align-items` 值爲 `center`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
 ```
 
-You should give the `header` a `position` of `fixed`.
+你應該給 `header` 添加 `position` 值爲 `fixed`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
 ```
 
-You should give the `header` a `top` of `0`.
+你應該給 `header` 添加 `top` 值爲 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 54550b4156..0036adbfcc 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -1,6 +1,6 @@
 ---
 id: 614883b6fa720e09fb167de9
-title: Step 53
+title: 步驟 53
 challengeType: 0
 dashedName: step-53
 ---
@@ -11,31 +11,31 @@ Add padding to the top and left of the `.info` elements, and set the other value
 
 # --hints--
 
-You should use the `.info` selector.
+你應該使用 `.info` 選擇器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
 ```
 
-You should give `.info` a `padding-top` of at least `1px`.
+你應該給 `.info` 添加 `padding-top` 值至少爲 `1px`。
 
 ```js
 assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
 ```
 
-You should give `.info` a `padding-right` of `0`.
+你應該給 `.info` 添加 `padding-right` 值爲 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
 ```
 
-You should give `.info` a `padding-bottom` of `0`.
+你應該給 `.info` 添加 `padding-bottom` 值爲 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
 ```
 
-You should give `.info` a `padding-left` of at least `1px`.
+你應該給 `.info` 添加 `padding-left` 值至少爲 `1px`。
 
 ```js
 assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index c60a777f43..553301a83e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -1,6 +1,6 @@
 ---
 id: 6148dfab9b54c110577de165
-title: Step 62
+title: 步驟 62
 challengeType: 0
 dashedName: step-62
 ---
@@ -21,31 +21,31 @@ border: 3px solid #3b3b4f;
 
 # --hints--
 
-You should use the `button` element selector.
+你應該使用 `button` 元素選擇器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
 ```
 
-You should give `button` a `display` of `block`.
+你應該給 `button` 添加 `display` 值爲 `block`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
 ```
 
-You should give `button` a `margin` of `40px auto`.
+你應該給 `button` 添加 `margin` 值爲 `40px auto`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
 ```
 
-You should give `button` a `width` of `40%`.
+你應該給 `button` 添加 `width` 值爲 `40%`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
 ```
 
-You should give `button` a `padding` of `15px`.
+你應該給 `button` 添加 `padding` 值爲 `15px`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
@@ -57,13 +57,13 @@ You should give `button` a `font-size` of `1.438rem`.
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '1.438rem');
 ```
 
-You should give `button` a `background` of `#d0d0d5`.
+你應該給 `button` 添加 `background` 值爲 `#d0d0d5`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)');
 ```
 
-You should give `button` a `border` of `3px solid #3b3b4f`.
+你應該給 `button` 添加 `border` 值爲 `3px solid #3b3b4f`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
index 08a915b3ee..d14b706d95 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -11,31 +11,31 @@ To let visitors know the cafe was founded in 2020, add a `p` element below the `
 
 # --hints--
 
-You should have an opening `<p>` tag.
+你應該有一個 `<p>` 開始標籤。
 
 ```js
 assert(code.match(/<p>/i));
 ```
 
-You should have a closing `</p>` tag.
+你應該有一個 `</p>` 結束標籤。
 
 ```js
 assert(code.match(/<\/p>/i));
 ```
 
-You should not change your existing `h1` element. Make sure you did not delete the closing tag.
+你不應該改變你現有的 `h1` 元素。 確認你沒有刪除結束標籤。
 
 ```js
 assert.lengthOf(document.querySelectorAll('h1'),1);
 ```
 
-Your `p` element should be below your `h1` element.
+你的 `p` 元素應該在 `h1` 元素的下面。
 
 ```js
 assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'H1');
 ```
 
-Your `p` element should have the text `Est. 2020`.
+你的 `p` 元素應該有文本 `Est. 2020`。
 
 ```js
 assert(document.querySelector("p").innerText === "Est. 2020");
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
index 6d62eb9e33..a918299235 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -1,29 +1,29 @@
 ---
 id: 5f344fad8bf01691e71a30eb
-title: Step 10
+title: 步驟 10
 challengeType: 0
 dashedName: step-10
 ---
 
 # --description--
 
-Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element.
+到目前爲止，在你創建的內容的演示和外觀方面，你一直受到限制。 To start taking control, add a `style` element within the `head` element.
 
 # --hints--
 
-Your code should have an opening `<style>` tag.
+你應該有一個 `<style>` 開始標籤。
 
 ```js
 assert(code.match(/<style\s*>/i));
 ```
 
-Your code should have a closing `</style>` tag.
+你應該有一個 `</style>` 結束標籤。
 
 ```js
 assert(code.match(/<\/style\s*>/));
 ```
 
-Your `style` element should be nested in your `head` element.
+你的 `style` 元素都應嵌套在 `head` 元素中。
 
 ```js
 assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
index da68438a6d..f95d06314b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -32,7 +32,7 @@ const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.
 assert(hasBackground)
 ```
 
-Your `body` element should have the coffee beans background image.
+你的 `body` 元素應該有咖啡豆的背景圖片。
 
 ```js
 const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
index 6799cc6390..31c55d54e7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -7,7 +7,7 @@ dashedName: step-38
 
 # --description--
 
-That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
+更接近了，但是價格沒有保持在右邊。 這是由於 `inline-block` 元素只會佔用其內容的寬度。 爲了將它們展開，請向 `flavor` 和 `price` 類選擇器添加 `width` 屬性，每個屬性的值均爲 `50%`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
index 58b21f8f32..a58379ca71 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -7,7 +7,7 @@ dashedName: step-32
 
 # --description--
 
-The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right.
+風味和價格目前堆疊在一起，並以各自的 `p` 元素居中。 如果風味在左，價格在右，那就好看多了。
 
 給 `French Vanilla` `p` 元素添加 `flavor` class。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
index 40f5fb4cc8..43fcd352f6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade99dda4e6071a85dfd
-title: Step 46
+title: 步驟 46
 challengeType: 0
 dashedName: step-46
 ---
@@ -11,19 +11,19 @@ You will come back to styling the menu in a few steps, but for now, go ahead and
 
 # --hints--
 
-You should have an opening `section` tag.
+你應該有一個 `section` 開始標籤。
 
 ```js
 assert.lengthOf(code.match(/<section>/ig) ,2);
 ```
 
-You should have a closing `section` tag.
+你應該有一個 `section` 結束標籤。
 
 ```js
 assert.lengthOf(code.match(/<\/section>/ig) ,2);
 ```
 
-You should not change the existing `main` element.
+你不應該改變你現有的 `main` 元素。
 
 ```js
 assert.lengthOf (document.querySelectorAll('main'), 1);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index c17e90981a..298916ab66 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -7,13 +7,13 @@ dashedName: step-66
 
 # --description--
 
-You can use an `hr` element to display a divider between sections of different content.
+你可以使用 `hr` 元素在不同內容的部分之間顯示一個分隔符。
 
 首先，在具有 `established` 類的 `p` 元素和第一個 `section` 元素之間添加一個 `hr` 元素。
 
 # --hints--
 
-You should add an `hr` element.
+你應該添加一個 `hr` 元素。
 
 ```js
 assert.match(code, /<hr\s?\/?>/i);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
index 97c1544aaa..dd5c26a6d8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -7,7 +7,7 @@ dashedName: step-56
 
 # --description--
 
-The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
+菜單的當前寬度將總是佔到 `body` 元素寬度的80%。 在一個非常寬的屏幕上，咖啡和甜點看起來與它們的價格相差甚遠。
 
 給 `menu` 類添加一個 `max-width` 的屬性，其值爲 `500px`，以防止它變得太寬。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
index 4f0339968e..8b2a2290dd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -7,7 +7,7 @@ dashedName: step-54
 
 # --description--
 
-That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
+這看起來更好。 現在嘗試在菜單的頂部和底部添加相同的 `20px` 填充。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
index d4e0282dd3..26943092da 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -13,21 +13,21 @@ It is a bit boring for all the text to have the same `font-family`. You can stil
 
 # --hints--
 
-You should use an `h1, h2` selector.
+你應該使用 `h1, h2` 選擇器。
 
 ```js
 const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
 assert(h1h2Selector);
 ```
 
-You should set the `font-family` to `Impact`.
+你應該把 `font-family` 設置爲 `Impact`。
 
 ```js
 const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact');
 assert(hasFontFamily);
 ```
 
-Your `h1` element should have a `font-family` of `Impact`.
+你的 `h1` 元素應該有一個 `Impact` 的 `font-family`。
 
 ```js
 const h1Element = document.querySelector("h1"); 
@@ -36,7 +36,7 @@ const headingFont = window.getComputedStyle(h1Element)?.getPropertyValue('font-f
 assert.match(headingFont,/impact/i);
 ```
 
-Your `h2` element should have a `font-family` of `Impact`.
+你的 `h2` 元素應該有一個 `Impact` 的 `font-family`。
 
 ```js
 const h2Element = document.querySelector("h2"); 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
index b64bbc0933..c46b70aa97 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
@@ -1,40 +1,40 @@
 ---
 id: 5f3ef6e0f8c230bdd2349716
-title: Step 62
+title: 步驟 62
 challengeType: 0
 dashedName: step-62
 ---
 
 # --description--
 
-The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers.
+標題元素（如 `h1`、`h2`）的排版是由用戶瀏覽器的默認值設置的。
 
-Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
+添加兩個新的類型選擇器（`h1` 和 `h2`）。 對兩者都使用 `font-size` 屬性，但對 `h1` 使用 `40px`，對 `h2` 使用 `30px` 的值。
 
 # --hints--
 
-You should use an `h1` selector.
+你應該使用 `h1` 選擇器。
 
 ```js
 const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
 assert(hasH1);
 ```
 
-You should use an `h2` selector.
+你應該使用 `h2` 選擇器。
 
 ```js
 const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
 assert(hasH2);
 ```
 
-Your `h1` element should have a `font-size` of `40px`.
+你的 `h1` 元素應該有一個 `40px` 的 `font-size`。
 
 ```js
 const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
 assert(h1FontSize === '40px');
 ```
 
-Your `h2` element should have a `font-size` of `30px`.
+你的 `h2` 元素應該有一個 `30px` 的 `font-size`。
 
 ```js
 const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
index caef467031..a7e7faf900 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
@@ -7,7 +7,7 @@ dashedName: step-86
 
 # --description--
 
-Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
+現在頂部的間隔看起來很好。 The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
 
 要減少地址 `p` 元素下方的默認 margin 空間，請創建一個名爲 `address` 的 class 選擇器，併爲 `margin-bottom` 屬性設置值 `5px`。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
index 0dfb88f527..8913ea79b4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f4701b942c824109626c3d8
-title: Step 76
+title: 步驟 76
 challengeType: 0
 dashedName: step-76
 ---
@@ -11,13 +11,13 @@ Now add the `bottom-line` class to the second `hr` element so the styling is app
 
 # --hints--
 
-You should add the `class` attribute with the value `bottom-line`.
+你應該添加具有 `bottom-line` 值的 `class` 屬性。
 
 ```js
 assert.match(code,/class=('|")bottom-line\1/i);
 ```
 
-Your `bottom-line` class should be applied to your second `hr` element.
+你的 `bottom-line` 類應該應用於你的第二個 `hr` 元素。
 
 ```js
 const hrList = document.querySelectorAll("hr"); 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
index a42127840a..b67b76afed 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -7,7 +7,7 @@ dashedName: step-34
 
 # --description--
 
-Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text.
+接着，你想要將價格（price）右對齊。 Add a class named `price` to your `p` element that has `3.00` as its text.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
index 16b268d65c..ee271b53c7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
@@ -11,25 +11,25 @@ Create a selector for your `.wheel` element. Start by setting the `border` to `2
 
 # --hints--
 
-You should have a `.wheel` selector.
+你應該有一個 `.wheel` 選擇器。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
 ```
 
-Your `.wheel` selector should have a `border` property set to `2px solid black`.
+你的 `.wheel` 選擇器應該有一個 `border` 屬性設置爲 `2px solid black`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
 ```
 
-Your `.wheel` selector should have a `border-radius` property set to `50%`.
+你的 `.wheel` 選擇器應該將 `border-radius` 屬性設置爲 `50%`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
 ```
 
-Your `.wheel` selector should have a `margin-left` property set to `50px`.
+你的 `.wheel` 選擇器應該有一個 `margin-left` 屬性設置爲 `50px`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
index c7cc4432ee..b97b6c6ba9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
@@ -1,6 +1,6 @@
 ---
 id: 617ace7d831f9c16a569b38a
-title: Step 5
+title: 步驟 5
 challengeType: 0
 dashedName: step-5
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
index aafa3ed834..952cedab1d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
@@ -1,6 +1,6 @@
 ---
 id: 616d47bc9eedc4bc7f621bec
-title: Step 10
+title: 步驟 10
 challengeType: 0
 dashedName: step-10
 ---
@@ -11,25 +11,25 @@ Next, within the `div` element, add another `div` element and give it a class of
 
 # --hints--
 
-Your new `div` element should have an opening tag.
+你的新 `div` 元素應該有一個開始標籤。
 
 ```js
 assert([...code.matchAll(/<div.*?>/gi)][1]);
 ```
 
-Your new `div` element should have a closing tag.
+你的新 `div` 元素應該有一個結束標籤。
 
 ```js
 assert([...code.matchAll(/<\/div\s*>/gi)][1]);
 ```
 
-You should nest your new `div` element within the `div` with the class `container`.
+你應該使用類 `container` 將新的 `div` 元素嵌套在 `div` 中。
 
 ```js
 assert(document.querySelector('.container')?.children[0]?.localName === 'div');
 ```
 
-You should give your new `div` element a class of `marker`.
+你應該給你的新 `div` 元素一個 `marker` 類。
 
 ```js
 const containerChildren = [...document.querySelector('.container')?.children];
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
index a700b99247..a0b54f0fea 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
@@ -1,6 +1,6 @@
 ---
 id: 61764f7e5240eb7ccc7f6a0a
-title: Step 18
+title: 步驟 18
 challengeType: 0
 dashedName: step-18
 ---
@@ -11,13 +11,13 @@ Then, create a new CSS rule that targets the class `one` and set its `background
 
 # --hints--
 
-You should use a class selector to target the class `one`.
+你應該使用類選擇器來定位類 `one`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one'));
 ```
 
-Your `.one` CSS rule should have a `background-color` property set to `red`.
+你的 `.one` CSS 規則應該將 `background-color` 屬性設置爲 `red`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
index 809eb2c4fc..8e646a285e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
@@ -9,7 +9,7 @@ dashedName: step-21
 
 There are two main color models: the <dfn>additive</dfn> RGB (red, green, blue) model used in electronic devices, and the <dfn>subtractive</dfn> CMYK (cyan, magenta, yellow, black) model used in print.
 
-In this project, you'll work with the RGB model. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. An easy way to see this is with the CSS `rgb` function.
+在這個項目中，將使用 RGB 模型。 這意味着顏色從黑色開始，色值隨着紅色、綠色和藍色數值變化而變化。 一個簡單的方法是使用 CSS `rgb` 函數。
 
 Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`.
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
index 8cfc55dded..10268ec372 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
@@ -13,9 +13,9 @@ A function is a piece of code that can take an input and perform a specific acti
 rgb(red, green, blue);
 ```
 
-Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color.
+Each red, green, and blue value is a number from `0` to `255`. `0` 表示該顏色的 0%，並且是黑色。 `255` 意味着該顏色的 100%。
 
-In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`.
+在 `.one` 的CSS規則中，修改 `rgb` 函數中的 `red`的值。 對於 `rgb` 函數，將紅色的值設置爲 `255`，將綠色的值設置爲 `0`，將藍色的值設置爲 `0`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
index 1798faa04c..731f36337e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
@@ -1,6 +1,6 @@
 ---
 id: 617bb5624a75e86463b7e638
-title: Step 28
+title: 步驟 28
 challengeType: 0
 dashedName: step-28
 ---
@@ -9,11 +9,11 @@ dashedName: step-28
 
 <dfn>Secondary colors</dfn> are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values.
 
-To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green.
+要創建第一個間色，黃色，請在 `.one` CSS 規則中更新 `rgb` 函數，以組合純紅色和純綠色。
 
 # --hints--
 
-Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`.
+你的 `.one` CSS 規則應該有一個 `background-color` 屬性設置爲 `rgb(255, 255, 0)`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
index d303fe43fe..bb57986f63 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
@@ -11,7 +11,7 @@ And in the `h1` CSS rule, remove the `background-color` property and value to go
 
 # --hints--
 
-Your `h1` CSS rule should not have a `background-color` property or value.
+你的 `h1` CSS 規則不應具有 `background-color` 屬性或值。
 
 ```js
 const backgroundColorInstances = code.match(/background-color:.*;/gi);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
index 664e87c49e..6e1b3e9acf 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
@@ -7,7 +7,7 @@ dashedName: step-71
 
 # --description--
 
-Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`.
+創建一個定位 `sleeve` 類的新 CSS 規則。 Set the `width` property to `110px`, and the `height` property to `25px`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
index abe6ce28aa..c0171f763b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
@@ -1,6 +1,6 @@
 ---
 id: 61b092eb9e7fc020b43b1bb2
-title: Step 72
+title: 步驟 72
 challengeType: 0
 dashedName: step-72
 ---
@@ -9,7 +9,7 @@ dashedName: step-72
 
 To make the marker look more realistic, give the sleeve a transparent white color.
 
-First, set the sleeve element's `background-color` to `white`.
+首先，將筆筒元素的 `background-color` 設置爲 `white`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
index c3168768e8..3c56ae5517 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
@@ -1,13 +1,13 @@
 ---
 id: 61b09f739aa6572d2064f9b8
-title: Step 84
+title: 步驟 84
 challengeType: 0
 dashedName: step-84
 ---
 
 # --description--
 
-The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border.
+The black color of your border looks pretty harsh against the more transparent sleeve. 你可以使用 Alpha 通道來降低黑色邊框的不透明度。
 
 For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity.
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
index 671a217791..66a387c337 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
@@ -9,11 +9,11 @@ dashedName: step-85
 
 太棒了。 Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers.
 
-Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers.
+爲綠色和藍色彩筆添加筆蓋和筆筒。 你只需從紅色筆中複製 `div` 元素，並將其粘貼到其他兩支筆中。
 
 # --hints--
 
-Your green marker `div` should contain two `div` elements.
+你的綠色筆 `div` 應該包含兩個 `div` 元素。
 
 ```js
 const greenMarkerChildren = [...document.querySelector('.green')?.children];
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
index 1cc0c1b359..bccfb0b2b5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
@@ -1,6 +1,6 @@
 ---
 id: 61b3183655ec10efd8c0bb07
-title: Step 92
+title: 步驟 92
 challengeType: 0
 dashedName: step-92
 ---
@@ -9,17 +9,17 @@ dashedName: step-92
 
 The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors.
 
-In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now.
+在 `.green` 和 `.blue` CSS 規則中，更新 `box-shadow` 屬性的值，使 `offsetX` 爲`0`，`offsetY` 爲 `0`，`blurRadius` 爲 `20px`，`spreadRadius` 爲 `0`。 將顏色保留爲 `green` 和 `blue`。
 
 # --hints--
 
-Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`.
+你的 `.green` CSS 規則應該有一個 `box-shadow` 簡寫屬性，其值爲 `0 0 20px 0 green`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
 ```
 
-Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`.
+你的 `.blue` CSS 規則應該有一個 `box-shadow` 簡寫屬性，並且其值爲 `0 0 20px 0 blue`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
index e7c4a50a02..a5fe568960 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -11,62 +11,62 @@ Next, give each `img` a `src` attribute according to its order in the document.
 
 # --hints--
 
-All nine of your `img` elements should have a `src` attribute.
+九個 `img` 元素都應該具有 `src` 屬性。
 
 ```js
 const images = [...document.querySelectorAll('img')];
 assert(images.every(image => image.getAttribute('src')));
 ```
 
-Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+第一個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
 ```
 
-Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+第二個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
 ```
 
-Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+第三個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
 ```
 
-Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+第四個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
 ```
 
-Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+第五個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
 ```
 
-Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+第六個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
 ```
 
-Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+第七個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
 ```
 
-Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+第八個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
 ```
 
-Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+第九個 `img` 元素的 `src` 屬性的值應該設置爲 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
index 8791af72f9..881fe02681 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
@@ -1,6 +1,6 @@
 ---
 id: 6153893900438b4643590367
-title: Step 13
+title: 步驟 13
 challengeType: 0
 dashedName: step-13
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
index c1857ab186..535389dacc 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -1,6 +1,6 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: Step 17
+title: 步驟 17
 challengeType: 0
 dashedName: step-17
 ---
@@ -9,7 +9,7 @@ dashedName: step-17
 
 The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
 
-Give your `.gallery` selector a `justify-content` property with `center` as the value.
+將 `.gallery` 選擇器的 `justify-content` 屬性設置爲 `center`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
index 916aca0b17..bd2f5a1302 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
@@ -1,6 +1,6 @@
 ---
 id: 6143a778bffc206ac6b1dbe3
-title: Step 17
+title: 步驟 17
 challengeType: 0
 dashedName: step-17
 ---
@@ -15,13 +15,13 @@ Instead of a series of coding challenges, people will be in their code editor pa
 
 # --hints--
 
-You should add a sixth `p` element to the `.text` element.
+你應該將第六個 `p` 元素添加到 `.text` 元素。
 
 ```js
 assert(document.querySelectorAll('.text p')?.length === 7)
 ```
 
-Your sixth `p` element should have the provided text.
+你的第六個 `p` 元素應該包含提供的文本。
 
 ```js
 assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.')
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
index 13581439ba..c3326799d3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
@@ -11,13 +11,13 @@ Create an `h1` selector, and set the `font-family` property to `Anton` with the
 
 # --hints--
 
-You should have an `h1` selector.
+應該有一個 `h1` 選擇器。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('h1'));
 ```
 
-Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`.
+你的 `h1` 選擇器應該有一個 `font-family` 屬性設置爲 `Anton`，並使用 `sans-serif` 作爲備用字體。
 
 ```js
 const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily;
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
index 5344cdbce7..c564cb5b2b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
@@ -1,6 +1,6 @@
 ---
 id: 6148d94fdf6a5d6899f8ff15
-title: Step 67
+title: 步驟 67
 challengeType: 0
 dashedName: step-67
 ---
@@ -11,7 +11,7 @@ Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`.
 
 # --hints--
 
-Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`.
+你的 `.text-with-images` 選擇器應該有一個 `margin-bottom` 屬性，設置爲 `3rem`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
index 440e737773..4813e46c7d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
@@ -9,11 +9,11 @@ dashedName: step-6
 
 Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`.
 
-You will remove this later on when you have worked on the CSS.
+稍後當你處理 CSS 時，你將刪除它。
 
 # --hints--
 
-Your `img` element should have a `width` attribute set to `400`.
+你的 `img` 元素應該有一個 `width` 屬性值爲 `400`。
 
 ```js
 assert(document.querySelector('img')?.getAttribute('width') === '400');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
index 39d2becaa7..6dc073c901 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
@@ -1,6 +1,6 @@
 ---
 id: 6199429802b7c10dc79ff871
-title: Step 35
+title: 步驟 35
 challengeType: 0
 dashedName: step-35
 ---
@@ -11,19 +11,19 @@ Position the `.penguin-head` element `10%` from the top, and `25%` from the left
 
 # --hints--
 
-You should give `.penguin-head` a `top` property.
+應該設置 `.penguin-head` 的 `top` 屬性。
 
 ```js
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
 ```
 
-You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+應該設置 `.penguin-head` 的 `top` 值爲 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
 ```
 
-You should give `.penguin-head` a `left` property.
+應該設置 `.penguin-head` 的 `left` 屬性。
 
 ```js
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
index b0619ac852..1b72af56e9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
@@ -11,43 +11,43 @@ Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `backgr
 
 # --hints--
 
-You should use the `.face` selector.
+你應該使用 `.face` 選擇器。
 
 ```js
 assert.match(code, /\.face\s*\{/);
 ```
 
-You should give `.face` a `width` property.
+你應該給 `.face` 元素一個 `width` 屬性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
 ```
 
-You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+你應該給 `.face` 一個 `width` 爲 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
 ```
 
-You should give `.face` a `height` property.
+你應該給 `.face` 元素一個 `height` 屬性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
 ```
 
-You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+你應該給 `.face` 一個 `height` 爲 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
 ```
 
-You should give `.face` a `background-color` property.
+你應該給 `.face` 元素一個 `background-color` 屬性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
 ```
 
-You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+你應該給 `.face` 一個 `background-color` 爲 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
index ca096090f1..763df6b425 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
@@ -7,7 +7,7 @@ dashedName: step-54
 
 # --description--
 
-So far, the `.face` and `.chin` elements have the same `background-color`.
+到目前爲止，`.face` 和 `.chin` 具有相同的 `background-color`。
 
 Create a custom CSS property called `--penguin-face`, and set it to `white`.
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
index e650139f7e..dc5ed9d351 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -1,6 +1,6 @@
 ---
 id: 619d1e7a8e81a61c5a819dc4
-title: Step 78
+title: 步驟 78
 challengeType: 0
 dashedName: step-78
 ---
@@ -11,7 +11,7 @@ For the shirt's final touch, set the `color` to `#6a6969`.
 
 # --hints--
 
-You should give `.shirt` a `color` of `#6a6969`.
+你應該將 `.shirt` 的 `color` 設置爲 `#6a6969`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
index ac97b33ea2..305826ea71 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
@@ -1,6 +1,6 @@
 ---
 id: 619d333b738e3c2b5d58b095
-title: Step 98
+title: 步驟 98
 challengeType: 0
 dashedName: step-98
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
index 2d4a8b2c94..e4e4bffaaf 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
@@ -1,41 +1,41 @@
 ---
 id: 5d822fd413a79914d39e98ca
-title: Step 2
+title: 步驟 2
 challengeType: 0
 dashedName: step-2
 ---
 
 # --description--
 
-Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. Be sure to set the language to English.
+在 `DOCTYPE` 下方添加開始和結束 `html` 標籤，以便你可以開始放置一些代碼。 確保將語言設置爲英語。
 
 # --hints--
 
-Your `DOCTYPE` declaration should be at the beginning of your HTML.
+`DOCTYPE` 聲明應位於 HTML 的開頭。
 
 ```js
 assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
 ```
 
-Your `html` element should have an opening tag, and `lang` attribute with value of `en`.
+`html` 元素應該有一個開始標籤，`lang` 屬性的值應該爲 `en`。
 
 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
 ```
 
-Your `html` element should have a closing tag.
+`html` 元素應該有一個結束標籤。
 
 ```js
 assert(code.match(/<\/html\s*>/));
 ```
 
-Your `html` tags should be in the correct order.
+`html` 標籤順序應該正確。
 
 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
 ```
 
-You should only have one `html` element.
+應該只有一個 `html` 元素。
 
 ```js
 assert(document.querySelectorAll('html').length === 1);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
index 73ab6e248e..5b9a78cce5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e98d7
-title: Step 15
+title: 步驟 15
 challengeType: 0
 dashedName: step-15
 ---
@@ -9,17 +9,17 @@ dashedName: step-15
 
 To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
 
-Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+將你在上一步創建的變量 `--building-color1` 作爲 `.bb1a` 類的 `background-color` 屬性的值。
 
 # --hints--
 
-The `background-color` of the `.bb1a` element should be set.
+`.bb1a` 元素的 `background-color` 應該被設置。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
 ```
 
-You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+你應該使用 `var(--building-color1)` 來設置 `.bb1a` 元素的 `background-color`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
index 1bdcf6c85c..77bd8f9d40 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
@@ -7,23 +7,23 @@ dashedName: step-20
 
 # --description--
 
-The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. 使用 `align-items` 和 `justify-content` 在元素的底部均勻地排布建築物。
 
 # --hints--
 
-You should add a `display` of `flex` to the `background-buildings` class.
+你應該給 `background-buildings` 類添加 `display` 爲 `flex`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
 ```
 
-You should add an `align-items` of `flex-end` to the `background-buildings` class.
+你應該給 `background-buildings` 類添加 `align-items` 爲 `flex-end`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
 ```
 
-You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+你應該給 `background-buildings` 類添加 `justify-content` 爲 `space-evenly`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
index 7a37ea473e..fd2dc3e267 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+創建另一個名爲 `--building-color4` 的變量，併爲其賦值 `#538cc6`。 這次確保它在 `:root` 選擇器中。 然後用它來填充最後一個建築物。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
index 503c83d041..c0765a03ce 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
@@ -7,29 +7,29 @@ dashedName: step-33
 
 # --description--
 
-You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+你應該優化你的代碼。 Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
 
 # --hints--
 
-You should not remove the `.foreground-buildings` declaration.
+你不應刪除 `.foreground-buildings` 聲明。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
 ```
 
-You should remove the `position` property from `.foreground-buildings`.
+你應該從 `.foreground-buildings` 中刪除 `position` 屬性。
 
 ```js
 assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
 ```
 
-You should remove the `top` property from `.foreground-buildings`.
+你應該從 `.foreground-buildings` 中刪除 `top` 屬性。
 
 ```js
 assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
 ```
 
-You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+你應該將值爲 `absolute` 的 `position` 屬性添加到 `.background-buildings, .foreground-buildings`。
 
 ```js
 function eitherOr() {
@@ -39,7 +39,7 @@ function eitherOr() {
 assert.equal(eitherOr()?.position, 'absolute');
 ```
 
-You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+你應該將值爲 `0` 的 `top` 屬性添加到 `.background-buildings, .foreground-buildings`。
 
 ```js
 function eitherOr() {
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
index e14bb31145..a381a23dd6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
@@ -7,17 +7,17 @@ dashedName: step-38
 
 # --description--
 
-Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. 如果你不記得了，CSS 中的註釋看起來像這樣：`/* Comment here */`。
 
 # --hints--
 
-You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+你應該在 `.bb1` 選擇器上方添加註釋 `BACKGROUND BUILDINGS - "bb" stands for "background building"`。
 
 ```js
 assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
 ```
 
-You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+你應該在 `.fb1` 選擇器上方添加註釋 `FOREGROUND BUILDINGS - "fb" stands for "foreground building"`。
 
 ```js
 assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
index df845e24a9..f95349cc04 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
@@ -7,7 +7,7 @@ dashedName: step-40
 
 # --description--
 
-Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+CSS 中的漸變是一種跨元素距離在顏色之間過渡的方法。 它們應用於 `background` 屬性，語法如下所示：
 
 ```css
 gradient-type(
@@ -16,29 +16,29 @@ gradient-type(
 );
 ```
 
-In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+在示例中，`color1` 在頂部是實心的，`color2` 在底部是實心的，並且在它們之間均勻地從一個過渡到下一個。 在 `.bb1a` 中，在 `background-color` 屬性下添加 `background` 屬性。 將其設置爲 `linear-gradient` 類型的梯度，使用 `--building-color1` 作爲其第一種顏色，使用 `--window-color1` 作爲第二種顏色。
 
 # --hints--
 
-You should apply a `background` to `.bb1a` right after the `background-color`.
+你應該給 `.bb1a` 應用 `background`，就在 `background-color` 後面。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
 ```
 
-You should give the `background` a `linear-gradient`.
+你應該給 `background` 一個 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
 ```
 
-You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+你應該給 `background` 一個以 `var(--building-color1)` 開始的 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
 ```
 
-You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+你應該給 `background` 一個以 `var(--window-color1)` 結束的 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
index 6ac084ea86..2cc7701939 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
@@ -11,7 +11,7 @@ It's a little hidden behind the foreground buildings, but you can see the three
 
 # --hints--
 
-You should remove the `background-color` property and value from `.bb1d`
+你應該從 `.bb1d` 中刪除 `background-color` 屬性和值。
 
 ```js
 assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
index 347dc3f8e4..ab858ca9e0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
@@ -7,7 +7,7 @@ dashedName: step-50
 
 # --description--
 
-Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. 這將被用作該建築物的間色。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
index 21b2a0c453..4cbc41794b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
@@ -7,7 +7,7 @@ dashedName: step-59
 
 # --description--
 
-On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+構建下一棟樓！ Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
index 3f416454ef..e57460708a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
@@ -1,17 +1,17 @@
 ---
 id: 5d822fd413a79914d39e9915
-title: Step 106
+title: 步驟 106
 challengeType: 0
 dashedName: step-106
 ---
 
 # --description--
 
-You don't need the `background-color` for this building anymore so you can remove that property.
+你不再需要此建築物的 `background-color`，因此你可以刪除該屬性。
 
 # --hints--
 
-You should remove the `background-color` of `.fb5`.
+你應該刪除 `.fb5` 的 `background-color`。
 
 ```js
 assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
index 38a750c2e1..3069cff113 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e991a
-title: Step 81
+title: 步驟 81
 challengeType: 0
 dashedName: step-81
 ---
@@ -11,20 +11,20 @@ On to the next building! Nest two `div` elements within `.fb2` and give them cla
 
 # --hints--
 
-You should add two `div` elements within `.fb2`.
+你應該在 `.fb2` 中添加兩個 `div` 元素。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
 ```
 
-You should give the first new `div` a class of `fb2a`.
+你應該給第一個新的 `div` 一個 `fb2a` 類。
 
 ```js
 assert.exists(document.querySelector("div.fb2 > div.fb2a"));
 assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
 ```
 
-You should give the second new `div` a class of `fb2b`.
+你應該給第二個新的 `div` 一個 `fb2b` 類。
 
 ```js
 assert.exists(document.querySelector("div.fb2 > div.fb2b"));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
index 98a329d9a5..1d7013f3f3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e9927
-title: Step 94
+title: 步驟 94
 challengeType: 0
 dashedName: step-94
 ---
@@ -11,7 +11,7 @@ Add your `window-wrap` class to the `.fb3a` element to center and space the wind
 
 # --hints--
 
-You should give `.fb3a` a class of `window-wrap`.
+你應該給 `.fb3a` 一個 `window-wrap` 類。
 
 ```js
 assert.exists(document.querySelector("div.fb3a.window-wrap"));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
index 47bd92f34d..cb6c93a29c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e992c
-title: Step 99
+title: 步驟 99
 challengeType: 0
 dashedName: step-99
 ---
@@ -11,13 +11,13 @@ Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`
 
 # --hints--
 
-You should add six `div` elements within `.fb4b`.
+你應該在 `.fb4b` 中添加六個 `div` 元素。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
 ```
 
-You should give each new `div` a class of `fb4-window`.
+你應該給每個新的 `div` 一個 `fb4-window` 類。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
index 82ecd30f91..73e374c1a4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e9939
-title: Step 113
+title: 步驟 113
 challengeType: 0
 dashedName: step-113
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
index e1130fb698..c22414d8a6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e993e
-title: Step 118
+title: 步驟 118
 challengeType: 0
 dashedName: step-118
 ---
@@ -9,29 +9,29 @@ dashedName: step-118
 
 Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
 
-Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+變量主要與顏色一起使用，這就是你在此處使用它們的方式。 但它們可以被賦予任何值並用於任何屬性。 你的項目看起來很棒！
 
 # --hints--
 
-You should add `--window-color1` with a value of `#777`.
+你應該添加 `--window-color1`，其值爲 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
 ```
 
-You should add `--window-color2` with a value of `#777`.
+你應該添加 `--window-color2`，其值爲 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
 ```
 
-You should add `--window-color3` with a value of `#777`.
+你應該添加 `--window-color3`，其值爲 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
 ```
 
-You should add `--window-color4` with a value of `#777`.
+你應該添加 `--window-color4`，其值爲 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
index 3af543d09c..c6bd712532 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -49,9 +49,11 @@ assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
 你似乎使用了一個瀏覽器擴展，正在修改頁面。 一定要關閉所有瀏覽器擴展。
 
 ```js
-assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 1);
-assert.equal(document.querySelectorAll('link').length, 0);
+if(__checkForBrowserExtensions){
+  assert.isAtMost(document.querySelectorAll('script').length, 2);
+  assert.equal(document.querySelectorAll('style').length, 1);
+  assert.equal(document.querySelectorAll('link').length, 0);
+}
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
index c74ba5b0d7..7439d70628 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -17,19 +17,19 @@ dashedName: step-12
 assert.lengthOf(document.querySelectorAll('a'), 1);
 ```
 
-The text inside the anchor element should not change, it must be `cat photos`.
+錨元素內的文字不應更改，必須是 `cat photos`。
 
 ```js
 assert.strictEqual(document.querySelector('a').innerText, "cat photos");
 ```
 
-You should have the words `See more` before the anchor element. Make sure you include the space after the last word.
+你應該在錨元素前添加文字 `See more`。 確保在最後一個單詞後加上空格。
 
 ```js
 assert.match(code, /See more <a href=/)
 ```
 
-你應該在錨元素後添加文字 `in our gallery`。 Make sure you include the space before the first word.
+你應該在錨元素後添加文字 `in our gallery`。 確保在第一個單詞前加上空格。
 
 ```js
 assert.match(code, /<\/a> in our gallery/)
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
index c9fc91c618..1868bdfc6c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
index e771fc94c7..88279eaa7a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
@@ -35,19 +35,19 @@ You should have a closing `body` tag.
 assert(code.match(/<\/body\s*>/i));
 ```
 
-The `head` and `body` elements should be siblings.
+`head` 和 `body` 元素應該是同級元素。
 
 ```js
 assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
 ```
 
-The `head` element should be within the `html` element.
+`head` 元素應該在 `html` 元素內。
 
 ```js
 assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
 ```
 
-The `body` element should be within the `html` element.
+`body` 元素應該在 `html` 元素內。
 
 ```js
 assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
index 7936a6c55a..ee130b98cc 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
@@ -9,17 +9,17 @@ dashedName: step-27
 
 You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related.
 
-To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time.
+給每一個單選按鈕添加相同的 `name` 屬性並設置其值爲 `account-type`，以關聯單選按鈕。 現在，兩個單選按鈕就無法同時選中了。
 
 # --hints--
 
-You should give the first radio input the `name` attribute with a value of `account-type`.
+第一個單選按鈕的 `name` 屬性的值應該爲 `account-type`。
 
 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
 ```
 
-You should give the second radio input the `name` attribute with a value of `account-type`.
+第二個單選按鈕的 `name` 屬性的值應該爲 `account-type`。
 
 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
index 89388fd0f3..017a3f5dc4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
@@ -7,19 +7,19 @@ dashedName: step-34
 
 # --description--
 
-Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags.
+Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. 兩個元素都需要結束標籤。
 
-Start by adding a `select` element below the two `label` elements. Then nest 5 `option` elements within the `select` element.
+Start by adding a `select` element below the two `label` elements. 然後，在 `select` 元素內添加 5 個 `option` 元素。
 
 # --hints--
 
-You should add a `select` element to the third `fieldset`.
+應該在第三個 `fieldset` 內添加一個 `select` 元素。
 
 ```js
 assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
 ```
 
-You should nest 5 `option` elements inside the `select` element.
+應該在 `select` 元素內添加 5 個 `option` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
index fbcf5583ae..ae8eff0d20 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
@@ -1,6 +1,6 @@
 ---
 id: 60fc219d333e37046f474a6e
-title: Step 51
+title: 步驟 51
 challengeType: 0
 dashedName: step-51
 ---
@@ -11,13 +11,13 @@ Select only the `.inline` elements, and give them `width` of `unset`. This will
 
 # --hints--
 
-You should use the `.inline` selector.
+應該使用 `.inline` 選擇器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.inline'));
 ```
 
-You should give the `.inline` elements a `width` of `unset`.
+應該將 `.inline` 元素的 `width` 設置爲 `unset`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 94afb38f47..435f5335e8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -1,6 +1,6 @@
 ---
 id: 60ffefd6479a3d084fb77cbc
-title: Step 64
+title: 步驟 64
 challengeType: 0
 dashedName: step-64
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
index 11a1dbaccf..c89462174c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
@@ -11,7 +11,7 @@ dashedName: step-3
 
 # --hints--
 
-你應該有一個 `link` 元素。
+You should have a `link` element.
 
 ```js
 assert.match(code, /<link/)
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index e268a43217..3d66d1e022 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -18,49 +18,49 @@ dashedName: step-22
 你應該有 `.cat-right-ear` 選擇器。
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 你的 `.cat-right-ear` 選擇器應將 `height` 屬性設置爲 `100px`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '100px')
 ```
 
 你的 `.cat-right-ear` 選擇器應將 `width` 屬性設置爲 `100px`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '100px')
 ```
 
 你的 `.cat-right-ear` 選擇器應將 `background-color` 屬性設置爲 `white`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor, 'white')
 ```
 
 你的 `.cat-right-ear` 選擇器應設置一個 `border-left` 屬性爲 `35px solid blue`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid blue')
 ```
 
 你的 `.cat-right-ear` 選擇器應設置一個 `border-right` 屬性爲 `35px solid blue`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid blue')
 ```
 
 你的 `.cat-right-ear` 選擇器應設置一個 `border-top` 屬性爲 `35px solid red`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid red')
 ```
 
 你的 `.cat-right-ear` 選擇器應設置一個 `border-bottom` 屬性爲 `35px solid red`。 不要忘記加上分號。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
index 37ea5becf4..4a0d707857 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
@@ -1,6 +1,6 @@
 ---
 id: 646dec359bef3b7811fba5a6
-title: Step 52
+title: 步驟 52
 challengeType: 0
 dashedName: step-52
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
index 2e324d1cf4..9dbcca4015 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
@@ -1,6 +1,6 @@
 ---
 id: 646f107abb89d00bb99f387a
-title: Step 69
+title: 步驟 69
 challengeType: 0
 dashedName: step-69
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
index 5ca5359b27..96f4263c5c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -7,7 +7,7 @@ dashedName: step-26
 
 # --description--
 
-Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+在的 `thead` 中，創建一個 `tr` 元素。 在那裏，添加一個 `td` 和三個 `th` 元素。 Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
index 3acb06a6bc..b70ae793f5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -13,67 +13,67 @@ Then add three `td` elements, giving the third a `class` set to `current`, and g
 
 # --hints--
 
-Your `tbody` element should have one `tr` element.
+`tbody` 元素應該有一個 `tr` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
 ```
 
-Your `tr` element should have the `class` set to `total`.
+`tr` 元素應該將 `class` 設置爲 `total`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
 ```
 
-Your `tr` should have a `th` element.
+`tr` 應該有一個 `th` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
 ```
 
-Your `th` element should have the text `Total Net Worth`.
+`th` 元素應包含文本 `Total Net Worth`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
 ```
 
-You should wrap the text `Net Worth` in a `span` element.
+應該將文本 `Net Worth` 包裝在 `span` 元素中。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
 ```
 
-Your `span` element should have the `class` attribute set to `sr-only`.
+`span` 元素應該將 `class` 屬性設置爲 `sr-only`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
 ```
 
-You should have three `td` elements.
+應該有三個 `td` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
 ```
 
-Your first `td` element should have the text `$-171`.
+第一個 `td` 元素應該包含文本 `$-171`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
 ```
 
-Your second `td` element should have the text `$136`.
+第二個 `td` 元素應該包含文本 `$136`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
 ```
 
-Your third `td` element should have the text `$334`.
+第三個 `td` 元素應該包含文本 `$334`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
 ```
 
-Your third `td` element should have the `class` set to `current`.
+第三個 `td` 元素應該將 `class` 設置爲 `current`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
index b5a035f5b8..6b78af8204 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -7,7 +7,7 @@ dashedName: step-31
 
 # --description--
 
-The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+CSS `clip` 屬性用於定義元素的可見部分。 Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
 
 `clip-path` 屬性決定了 `clip` 屬性應該採用的形狀。 設置 `clip-path` 屬性的值爲 `inset(50%)`，在元素內剪切形成一個矩形。
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
index 5147b8f970..8bb7ea9f2c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -7,7 +7,7 @@ dashedName: step-35
 
 # --description--
 
-Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+是時候爲表格標題設置樣式了。 創建一個 `h1` 選擇器。 Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
index 81dc63760b..3b77e560de 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
@@ -11,49 +11,49 @@ Remember that a `class` attribute can have multiple values. To separate your whi
 
 # --hints--
 
-Your second `.key` element should also have a `class` of `black--key`.
+第二個 `.key` 元素也應該有一個 `black--key` 的 `class`。
 
 ```js
 const key = document.querySelectorAll('.key')?.[1];
 assert(key?.className?.includes('black--key'));
 ```
 
-Your third `.key` should have `black--key` in the `class`.
+第三個 `.key` 應該在 `class` 中有 `black--key`。
 
 ```js
 const third = document.querySelectorAll('.key')?.[2];
 assert(third?.classList?.contains('black--key'));
 ```
 
-Your fifth `.key` should have `black--key` in the `class`.
+第五個 `.key` 應該在 `class` 中有 `black--key`。
 
 ```js
 const fifth = document.querySelectorAll('.key')?.[4];
 assert(fifth?.classList?.contains('black--key'));
 ```
 
-Your sixth `.key` should have `black--key` in the `class`.
+第六個 `.key` 應該在 `class` 中有 `black--key`。
 
 ```js
 const sixth = document.querySelectorAll('.key')?.[5];
 assert(sixth?.classList?.contains('black--key'));
 ```
 
-Your seventh `.key` should have `black--key` in the `class`.
+第七個 `.key` 應該在 `class` 中有 `black--key`。
 
 ```js
 const seventh = document.querySelectorAll('.key')?.[6];
 assert(seventh?.classList?.contains('black--key'));
 ```
 
-You should have five `.black--key` elements.
+應該有五個 `.black--key` 元素。
 
 ```js
 const blackKeys = document.querySelectorAll('.black--key');
 assert(blackKeys?.length === 5);
 ```
 
-You should have seven `.key` elements.
+應該有七個 `.key` 元素。
 
 ```js
 const keys = document.querySelectorAll('.key');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
index 41b998d07f..23ebdee4e7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
@@ -11,28 +11,28 @@ Now copy the set of seven `.key` elements, and paste two more sets into the `.ke
 
 # --hints--
 
-You should have 21 `.key` elements.
+應該有 21 個 `.key` 元素。
 
 ```js
 const keys = document.querySelectorAll('.key');
 assert(keys?.length === 21);
 ```
 
-You should have 15 `.black--key` elements.
+應該有 15 個 `.black--key` 元素。
 
 ```js
 const blackKeys = document.querySelectorAll('.black--key');
 assert(blackKeys?.length === 15);
 ```
 
-All `.key` elements should be within your `.keys` element.
+所有 `.key` 元素都應該在 `.keys` 元素中。
 
 ```js
 const keys = document.querySelector('.keys');
 assert(keys?.querySelectorAll('.key')?.length === 21);
 ```
 
-All `.black--key` elements should be within your `.keys` element.
+所有 `.black--key` 元素都應該在 `.keys` 元素中。
 
 ```js
 const keys = document.querySelector('.keys');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
index f7eca336d9..b98c7d4313 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -11,13 +11,13 @@ Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
 
 # --hints--
 
-Your `.key` selector should have a `margin` property set to `2px`.
+`.key` 選擇器應該有一個 `margin` 屬性設置爲 `2px`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
 ```
 
-Your `.key` selector should have a `float` property set to `left`.
+`.key` 選擇器應該有一個 `float` 屬性設置爲 `left`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
index f6733afed9..98f614ebd6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -1,6 +1,6 @@
 ---
 id: 60a3e3396c7b40068ad6996b
-title: Step 2
+title: 步驟 2
 challengeType: 0
 dashedName: step-2
 ---
@@ -9,40 +9,40 @@ dashedName: step-2
 
 Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`.
 
-Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+在 `body` 元素中，添加一個 `img` 元素，其中 `src` 爲 `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`。
 # --hints--
 
-Your code should have a `meta` tag.
+代碼應該有一個 `meta` 標記。
 
 ```js
 assert(document.querySelectorAll('meta').length === 1);
 ```
 
-The `meta` tag should set the `charset` to `UTF-8`.
+`meta` 標記應將 `charset` 設置爲 `UTF-8`。
 
 ```js
 assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8');
 ```
 
-Your code should have a `title` element.
+代碼應該有一個 `title` 元素。
 
 ```js
 assert(document.querySelectorAll('title').length === 1);
 ```
 
-The `title` should be `Rothko Painting`.
+`title` 應該是 `Rothko Painting`。
 
 ```js
 assert(document.querySelector('title').innerText === 'Rothko Painting');
 ```
 
-Your code should have an `img` element.
+代碼應該有一個 `img` 元素。
 
 ```js
 assert(document.querySelectorAll('img').length === 1);
 ```
 
-The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+`img` 元素的 `src` 應該是 `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`。
 
 ```js
 assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
index 6e38ea0aac..0be40238d1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -1,13 +1,13 @@
 ---
 id: 60a3e3396c7b40068ad69973
-title: Step 10
+title: 步驟 10
 challengeType: 0
 dashedName: step-10
 ---
 
 # --description--
 
-Change the `background-color` of the canvas to `#4d0f00`.
+將畫布的 `background-color` 更改爲 `#4d0f00`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
index 34a33d9846..adf6c0e0f6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -1,6 +1,6 @@
 ---
 id: 60a3e3396c7b40068ad69978
-title: Step 15
+title: 步驟 15
 challengeType: 0
 dashedName: step-15
 ---
@@ -9,18 +9,18 @@ dashedName: step-15
 
 Use margins to adjust the spacing outside of an element.
 
-Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+使用 `margin` 屬性，爲 `.frame` 元素提供 `20px` 的垂直邊距和 `auto` 的水平邊距。 這會將框架向下移動 20 像素並在頁面上水平居中。
 
 # --hints--
 
-You should set the `margin` property to `20px auto`.
+應該將 `margin` 屬性設置爲 `20px auto`。
 
 ```js
 const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
 assert(hasMargin);
 ```
 
-Your `.frame` element should have a `margin` value of `20px auto`.
+`.frame` 元素的 `margin` 值應爲 `20px auto`。
 
 ```js
 const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
index 4483d092fb..22355cb8d6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -9,18 +9,18 @@ dashedName: step-20
 
 Use margins to position the `.one` element on the canvas.
 
-Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+添加簡寫 `margin` 屬性，垂直邊距爲 `20px`，水平邊距爲 `auto`。
 
 # --hints--
 
-You should set the `margin` property to `20px auto`.
+應該將 `margin` 屬性設置爲 `20px auto`。
 
 ```js
 const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
 assert(marginFilter.length === 2);
 ```
 
-Your `.one` element should have a `margin` value of `20px auto`.
+`.one` 元素的 `margin` 值應爲 `20px auto`。
 
 ```js
 const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
index 3f027693a4..3e92af12bd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Center the `.two` element by setting its `margin` to `auto`.
+將 `.two` 元素放在中心位置，將其 `margin` 設置爲 `auto`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
index 98bbfdbe45..455b63822e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -11,14 +11,14 @@ Center the `.three` element on the canvas by setting its `margin` to `auto`.
 
 # --hints--
 
-You should set the `margin` property to `auto`.
+應該將 `margin` 屬性設置爲 `auto`。
 
 ```js
 const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
 assert(marginFilter.length === 2);
 ```
 
-Your `.three` element should have a `margin` value of `auto`.
+`.three` 元素的 `margin` 值應爲 `auto`。
 
 ```js
 const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
index 220f6064e1..9ee9cbda5b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -9,18 +9,18 @@ dashedName: step-37
 
 The rectangles are too small and their edges don't have the soft quality of a painting.
 
-Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+通過將 `box-shadow` 設置爲 `0 0 3px 3px #efb762` 來增加區域並柔化 `.one` 的邊緣。
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+應該將 `box-shadow` 屬性設置爲 `0 0 3px 3px #efb762`。
 
 ```js
 const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
 assert(hasBoxShadow);
 ```
 
-Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+`.one` 元素的 `box-shadow` 值應爲 `0 0 3px 3px #efb762`。
 
 ```js
 const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
index af7722eaba..e54c6e53ab 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -11,14 +11,14 @@ Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+應該將 `box-shadow` 屬性設置爲 `0 0 5px 5px #b20403`。
 
 ```js
 const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
 assert(hasBoxShadow);
 ```
 
-Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+`.three` 元素的 `box-shadow` 值應爲 `0 0 5px 5px #b20403`。
 
 ```js
 const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
index 8af5b49a3d..c69c969ad0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -9,18 +9,18 @@ dashedName: step-45
 
 Rotate `.three` counter clockwise by 0.2 degrees.
 
-With this final step, your Rothko painting is now complete.
+通過這最後一步，你的 Rothko 畫作現已完成。
 
 # --hints--
 
-You should set the `transform` property to `rotate(-0.2deg)`.
+應該將 `transform` 屬性設置爲 `rotate(-0.2deg)`。
 
 ```js
 const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
 assert(hasTransform);
 ```
 
-Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+`.three` 元素的 `transform` 值應爲 `rotate(-0.2deg)`。
 
 ```js
 const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
index 9d64360062..7ba8e835d1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+微調 `h1` 的位置，將上下邊距設爲 `-4px`，左右邊距設爲 `0`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
index f5f4124e7b..7aa9f877c4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
@@ -19,25 +19,25 @@ Below your last `p` element, create another `p` element with the text `Sodium 16
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
 ```
 
-Your new `p` element should have the text `Sodium 160mg 7%`.
+新的 `p` 元素應包含文本 `Sodium 160mg 7%`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
 ```
 
-Your new `p` element should have three `span` elements.
+你的新的 `p` 元素應該有三個 `span` 元素。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
 ```
 
-A `span` element should wrap the text `Sodium 160mg`.
+一個 `span` 元素應該包含文本 `Sodium 160mg`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
 ```
 
-A `span` element should wrap the text `Sodium`.
+一個 `span` 元素應該包含文本 `Sodium`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
@@ -49,7 +49,7 @@ The `span` around `Sodium` should have the `class` attribute set to `bold`.
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
 ```
 
-A `span` element should wrap the text `7%`.
+一個 `span` 元素應該包含文本 `7%`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
index 6b9d725c3e..a99560a24c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
@@ -1,6 +1,6 @@
 ---
 id: 615f887466db4ba14b5342cc
-title: Step 62
+title: 步驟 62
 challengeType: 0
 dashedName: step-62
 ---
@@ -9,7 +9,7 @@ dashedName: step-62
 
 After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
 
-Following this element, create a large divider.
+在這個元素之後，創建一個大分隔線。
 
 # --hints--
 
@@ -20,13 +20,13 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.prev
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
 ```
 
-Your new `p` element should have the text `Protein 3g`.
+新的 `p` 元素應包含文本 `Protein 3g`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
 ```
 
-Your new `p` element should have the `class` attribute set to `no-divider`.
+新的 `p` 元素應該將 `class` 屬性設置爲 `no-divider`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
index 4c5568f3cf..dac13a4ef4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
@@ -7,7 +7,7 @@ dashedName: step-63
 
 # --description--
 
-Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+在大分隔線下方創建另一個 `p` 元素。 Give the `p` element the text `Vitamin D 2mcg 10%`.
 
 `p` 元素只包含文本，你可以將百分比放在 `span` 元素中，這樣它就可以被視爲與其餘文本分開的內容，並且它被移動到右邊。
 
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 db18408831..2e50cacfca 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
@@ -25,12 +25,12 @@ dashedName: build-a-palindrome-checker
 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. 當 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，並且 `#check-btn` 元素被點擊， `#result` 元素應該包含文本 `"A man, a plan, a canal. Panama is 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. 當 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，並點擊 `#check-btn` 元素時，`#result` 元素應該包含文本 `"1 eye for of 1 eye." is not 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"`.
 
@@ -138,7 +138,7 @@ checkBtn.click();
 assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'not a palindrome is not a palindrome');
 ```
 
-當 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，並且 `#check-btn` 元素被點擊時， `#result` 元素應該包含文本 `"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');
@@ -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');
 ```
 
-當 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，並且 `#check-btn` 元素被點擊時，`#result` 元素應該包含文本 `"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');
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
index 481c59e252..b3d5a0ba2b 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
@@ -33,6 +33,12 @@ assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDiffere
 
 你的 `reduce` 回調應該返回 `acc` 和 `el` 的和。
 
+```js
+assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(\s*function\s*\(\s*acc\s*,\s*el\s*\)\s*\{\s*return\s*acc\s*\+\s*el\s*;\s*\}/);
+```
+
+You are missing the starting value of the `reduce`.
+
 ```js
 assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(\s*function\s*\(\s*acc\s*,\s*el\s*\)\s*\{\s*return\s*acc\s*\+\s*el\s*;\s*\}\s*,\s*0\s*\)/);
 ```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
index 3226e6e2ba..0e1341a6cf 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
@@ -14,7 +14,7 @@ dashedName: step-32
 要查看結果，輸入數字 `4, 4, 2, 5` 並點擊 `"Calculate"` 按鈕。 打開控制檯查看以下數組：
 
 ```js
-[ 2, 4, 4, 5 ]
+[ 4, 4, 2, 5 ]
 ```
 
 # --hints--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
index 653ef072d8..c8f7ae8e44 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
@@ -17,7 +17,7 @@ dashedName: step-32
 assert.match(code, /\s*let\s+selectedCategory\s*/);
 ```
 
-您應爲 `selectedCategory` 變量分配一個空對象。
+You should assign an empty object to the `selectedCategory` variable.
 
 ```js
 assert.match(code, /\s*let\s+selectedCategory\s*=\s*{\s*}\s*/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
index 8a265eff84..eebfdd8a03 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
@@ -29,8 +29,45 @@ assert.match(code, /printGreeting\(\);?/);
 assert.isBelow(code.indexOf("const printGreeting = () => {"), code.indexOf("printGreeting()"));
 ```
 
+Your `printGreeting` function call should output `Hello there!` to the console.
+
+```js
+assert.strictEqual(logOutput, "Hello there!"); 
+```
+
 # --seed--
 
+## --before-user-code--
+
+```js
+let logOutput = "";
+const originalConsole = console;
+function capture() {
+    const nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          const nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+```
+
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
index 894ef6e8e1..4ef6129c37 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
@@ -79,8 +79,47 @@ const functionDefinition = code.indexOf("printMessage =");
 assert.isBelow(functionDefinition, functionCall);
 ```
 
+Your `printMessage` function call should output `freeCodeCamp is awesome!` to the console.
+
+```js
+assert.strictEqual(logOutput, "freeCodeCamp is awesome!"); 
+```
+
 # --seed--
 
+
+## --before-user-code--
+
+```js
+let logOutput = "";
+const originalConsole = console;
+function capture() {
+    const nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          const nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+```
+
+
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
index 14f0ffe598..0ae39c1598 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
@@ -14,65 +14,162 @@ dashedName: step-87
 你應該在模板文字中添加第二個 `p` 元素。
 
 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
-```
 
-你的第二個 `p` 元素應該位於新行上。
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-第二個 `p` 元素應該在現有的 `p` 元素之後。
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```
 
 你的第二個 `p` 元素應包含文本 `${consumedCalories} Calories Consumed`。
 
 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```
 
 你應該在模板字面量中添加第三個 `p` 元素。
 
 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```
 
-你的第三個 `p` 元素應該位於新行上。
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-你的第三個 `p` 元素應該位於現有的第二個 `p` 元素之後。
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.lengthOf(output.children,5);
 ```
 
 你的第三個 `p` 元素應該包含文本 `${exerciseCalories} Calories Burned`。
 
 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
-```
 
-# --seed--
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-## --after-user-code--
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
 
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
 ```
 
+# --seed--
+
 ## --seed-contents--
 
 ```html
@@ -270,7 +367,7 @@ function addEntry() {
   targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }
 
---fcc-editable-region--
+
 function calculateCalories(e) {
   e.preventDefault();
   isError = false;
@@ -292,6 +389,7 @@ function calculateCalories(e) {
     return;
   }
 
+--fcc-editable-region--
   const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
   const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
   const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
index bc34beb456..9d6b29c166 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
@@ -7,62 +7,29 @@ dashedName: step-25
 
 # --description--
 
-使用三元語法，使用 `isEven` 函數檢查 `length` 是否均勻。 如果是，則返回 `middle` 索引處的數字與其後一個數字的平均值。 如果是奇數，則返回 `middle` 索引處的數字 - 你需要將 `middle` 值向上舍入。
+Check if `length` is even using your `isEven` function. 如果是，則返回 `middle` 索引處的數字與其後一個數字的平均值。 如果是奇數，則返回 `middle` 索引處的數字 - 你需要將 `middle` 值向上舍入。
 
 # --hints--
 
-你應該使用 `return` 關鍵字。
+You should return a value from the `median` function.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return/);
+assert.exists(median([2,4,6,8]));
 ```
 
-你應該在 `return` 關鍵字之後調用 `isEven()` 函數。
+If `length` is even, you should return the average of the number at the `middle` index and the number after it.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(/);
+assert.strictEqual(median([2,4,6,8]),5); 
+assert.strictEqual(median([6,12,18,24]),15); 
 ```
 
-你應該將 `length` 變量傳遞給 `isEven()` 調用。
 
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)/);
-```
-
-你應該使用三元語法來檢查 `isEven()` 調用的真實性。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?/);
-```
-
-如果三元數是真的話，你應該調用 `average()` 函數。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(/);
-```
-
-你應該將一個數組傳遞給 `average()` 函數。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[/);
-```
-
-傳遞給 `average()` 的數組的第一個元素應該是 `sorted` 數組的 `middle` 索引處的元素。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]/);
-```
-
-傳遞給 `average()` 的數組的第一個元素應該是 `sorted` 數組的 `middle + 1` 索引處的元素。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]\s*,\s*sorted\s*\[\s*middle\s*\+\s*1\s*\]\s*\]\s*\)/);
-```
-
-如果三元運算符爲假，則應返回 `middle` 索引處的 `sorted` 值。 使用 `Math.ceil()` 將 `middle` 值向上舍入。
+If `length` is odd, you should return the value at the `middle` index.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]\s*,\s*sorted\s*\[\s*middle\s*\+\s*1\s*\]\s*\]\s*\)\s*:\s*sorted\s*\[\s*Math\.ceil\(\s*middle\s*\)\s*\]\s*;?/);
+assert.strictEqual(median([2,4,6,8,10]),6); 
+assert.strictEqual(median([3,6,9,12,15]),9); 
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
index 4615a6d95f..13870e0aaf 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
@@ -38,6 +38,12 @@ assert.match(__helpers.removeJSComments(code), /character\.repeat\(/);
 assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/)
 ```
 
+You should use the `.repeat()` method in the `.push()` method
+
+```js
+assert.match(__helpers.removeJSComments(code), /rows\.push\(\s*character\.repeat\(\s*i\s*\)\s*\)/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
index 6000887e8f..d063ea5056 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
@@ -7,7 +7,7 @@ dashedName: step-37
 
 # --description--
 
-使用箭頭語法創建 `updateTaskContainer` 函數。 然後將 `taskData.forEach()` 及其內容移入其中。
+使用箭頭語法創建 `updateTaskContainer` 函數。 Then move the `taskData.forEach()` and its content from the `taskForm`'s `submit` event listener into the newly created function.
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{/)
 你應該將 `taskData.forEach()` 及其內容移至 `updateTaskContainer()` 函數中。
 
 ```js
-assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`\s*}\s*\)\s*;?\s*\}\s*;?/)
+assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`;?\s*}\s*\)\s*;?\s*\}\s*;?/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
index f4dd458627..f68ae66afe 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
@@ -11,7 +11,7 @@ dashedName: step-57
 
 使用 `getItem()` 再次檢索 `myTaskArr` 數組。 這次，將其包裝在 `JSON.parse()` 中，將其分配給變量 `getTaskArrObj` 並將 `getTaskArrObj` 記錄到控制檯。
 
-檢查控制檯以查看 `getTaskArr` 和 `getTaskObj` 之間的區別。
+Check the console to see the difference between `getTaskArr` and `getTaskArrObj`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
index d394e49c95..a1de6f5469 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
@@ -55,14 +55,44 @@ assert.strictEqual(scoreSpans[3].innerText, ", score = 30");
 
 如果沒有擲出順子，你的 `checkForStraights` 函數應該啓用最後一個單選按鈕，將值設爲 `0`，並更新顯示文本爲 `, score = 0`。
 
+```js
+const assertNoStraight = (_diceValuesArr) => {
+  resetRadioOptions();
+  checkForStraights(_diceValuesArr);
+  assert.isTrue(scoreInputs[3].disabled);
+  assert.isTrue(scoreInputs[4].disabled);
+  assert.isFalse(scoreInputs[5].disabled);
+  assert.strictEqual(scoreInputs[5].value, "0");
+  assert.strictEqual(scoreSpans[5].innerText, ", score = 0");
+}
+
+assertNoStraight([1,1,1,1,1]);
+assertNoStraight([1,1,4,4,4]);
+```
+
+You should call the `checkForStraights` function when the `rollDiceBtn` is clicked.
+
 ```js
 resetRadioOptions();
-checkForStraights([1,1,1,1,1]);
-assert.isTrue(scoreInputs[3].disabled);
-assert.isTrue(scoreInputs[4].disabled);
-assert.isFalse(scoreInputs[5].disabled);
-assert.strictEqual(scoreInputs[5].value, "0");
-assert.strictEqual(scoreSpans[5].innerText, ", score = 0");
+const origMathRandom = Math.random;
+// Temporarily modifies Math.random to guarantee a straight.
+const myMathRandom = (() => {
+  let i = 0;
+  const values = [4/6,2/6,5/6,3/6,1/6];
+  return () => values[i++ % 5];
+})();
+
+Math.random = myMathRandom;
+
+try {
+  rollDiceBtn.click();
+} finally {
+  Math.random = origMathRandom;
+}
+
+assert.isFalse(scoreInputs[4].disabled);
+assert.strictEqual(scoreInputs[4].value, "40");
+assert.strictEqual(scoreSpans[4].innerText, ", score = 40");
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
index f409f1adb7..67d251e32a 100644
--- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
@@ -22,14 +22,14 @@ This is one of the possible permutations for $N = 20$.
 
 We can verify that $F(6) = 5$, $F(8) = 9$, $F(20) = 450$ and $F(1000) ≈ 8.8521816557e\\,21$.
 
-Find $F({10}^{18})$. Give as your answer as a string in its scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. 例如： if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
+Find $F({10}^{18})$. Give your answer as a string in scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. 例如： if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
 
 # --hints--
 
 `permutationOf3SmoothNumbers()` should return a string.
 
 ```js
-assert.strictEqual(typeof permutationOf3SmoothNumbers() === 'string');
+assert.strictEqual(typeof permutationOf3SmoothNumbers(), 'string');
 ```
 
 `permutationOf3SmoothNumbers()` should return the string `5.5350769703e1512`.
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
index d5e1ace99f..817ece8563 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
@@ -13,7 +13,10 @@ In English, you can use the verb `to be` to ask questions about feelings, states
 
 Here are some more examples of turning statements into questions using `to be`:
 
-`He is here.` -> `Is he here?` `They are ready.` -> `Are they ready?`
+| Affirmative       | Interrogative     |
+| ----------------- | ----------------- |
+| `He is here.`     | `Is he here?`     |
+| `They are ready.` | `Are they ready?` |
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
index 969ff95091..d54ba5ead4 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
@@ -21,7 +21,7 @@ What does `so far` mean in Sarah's question to Tom?
 
 ## --answers--
 
-It asks for Tom’s complete opinion about the workplace.
+It asks for Tom's complete opinion about the workplace.
 
 ### --feedback--
 
@@ -37,15 +37,15 @@ It does not ask about the future or what Tom expects.
 
 ---
 
-It asks about Tom’s feelings from his first day to the present time.
+It asks about Tom's feelings from his first day to the present time.
 
 ---
 
-It asks only about Tom’s first day at the workplace.
+It asks only about Tom's first day at the workplace.
 
 ### --feedback--
 
-It is about Tom’s experience until the time he is asked.
+It is about Tom's experience until the time he is asked.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
index e47bd84586..1701dc2ea8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
@@ -24,7 +24,7 @@ What is Sarah referring to when she says `these activities`?
 
 ## --answers--
 
-`Yes, it’s great!`
+`Yes, it's great!`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
index 4b5d7c12c9..97fe0dde8c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
@@ -19,7 +19,7 @@ dashedName: task-10
 
 選擇 Tom 問 Sarah 的正確問題：
 
-`Absolutely! They are really fun. What is the team’s favorite?`
+`Absolutely! They are really fun. What is the team's favorite?`
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
index 0e10ffa94e..28b8acfd84 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-12
 ---
 
-<!-- (Audio) Tom: Absolutely! They are really fun. What is the team’s favorite?
+<!-- (Audio) Tom: Absolutely! They are really fun. What is the team's favorite?
 
 Sarah: Many of us enjoy the monthly game night. Are you into board games?
 
@@ -31,7 +31,7 @@ Tom: Yes, I love board games! -->
 
 ---
 
-`What is the team’s favorite?` 和 `Many of us enjoy the monthly game night.`。
+`What is the team's favorite?` and `Many of us enjoy the monthly game night.`
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ The first sentence is correct. The second sentence is a statement, not a questio
 
 ---
 
-`What is the team’s favorite?` and `Are you into playing board games?`
+`What is the team's favorite?` and `Are you into playing board games?`
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
index a3b5e1824e..a9d0fb3988 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
@@ -18,7 +18,7 @@ The present perfect is a tense used to indicate a link between the present and t
 
 `I have played this game before.` - This is in the present perfect tense. It states that the action of playing the game happened at an unspecified time in the past.
 
-`I’ve played this game before.` - This sentence is also in the present perfect tense, using the contraction `I've` for `I have`. Like the previous example, it states that the action of playing the game happened at an unspecified time in the past.
+`I've played this game before.` - This sentence is also in the present perfect tense, using the contraction `I've` for `I have`. Like the previous example, it states that the action of playing the game happened at an unspecified time in the past.
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
index 69e2442425..31acfb285b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
@@ -11,13 +11,17 @@ dashedName: task-23
 
 So far you have learned how to create questions with the verb `to be`. In sentences with the verb `to be` (am, is, are) you just have to change the order of the noun and the verb to create a question. Like this:
 
-`You are a developer` -> `Are you a developer?`
+| Affirmative            | Interrogative          |
+| ---------------------- | ---------------------- |
+| `You are a developer.` | `Are you a developer?` |
 
-Changing the order of the noun and the verb doesn’t work in every situation. Most sentences need you to add an auxiliary verb to create questions. One of the most common auxiliary verbs is `Do`.
+Changing the order of the noun and the verb doesn’t work in every situation. Most sentences need you to add an auxiliary verb to create questions. One of the most common auxiliary verbs is `do`.
 
-You can use the verb `do` as an auxiliary to most verbs. In the present tense it assumes the form of `do` (I, you, we, they) and `does`(he, she, it). It is like a marker you will add to the beginning of your sentence and lets everyone know that sentence is a question. 例如：
+You can use the verb `do` as an auxiliary to most verbs. In the present tense it assumes the form of `do` (I, you, we, they) and `does` (he, she, it). It is like a marker you will add to the beginning of your sentence and lets everyone know that sentence is a question. 例如：
 
-Statement: `You debug on Fridays.` Question: `Do you debug on Fridays?`
+| Affirmative             | Interrogative              |
+| ----------------------- | -------------------------- |
+| `You debug on Fridays.` | `Do you debug on Fridays?` |
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
index 3ec4154de1..0e894e1dc2 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
@@ -13,7 +13,7 @@ Before you learned to ask questions using `do`, you can also use it to create ne
 
 `It does not function` - (Subject + `does` + `not` + main verb)
 
-Often, to be more practical people abbreviate `do not` to `don't` and `does not` to `doesn’t`.
+Often, to be more practical people abbreviate `do not` to `don't` and `does not` to `doesn't`.
 
 Just like with questions, when you use `don't`, the main verb that comes after it will always be in its base form, no matter who you're talking about.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
index 1ae61dce2f..e9e0dfb592 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
@@ -29,7 +29,7 @@ Read the dialogue excerpt and fill in the blanks using `do` or `don't.`
 
 ### --feedback--
 
-In the first blank, Tom is asking a question about Sophie’s hobbies, which requires `do.`
+In the first blank, Tom is asking a question about Sophie's hobbies, which requires `do.`
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
index a1fb366e90..cafcdc2438 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
@@ -11,7 +11,7 @@ Tom: It's a deal! -->
 
 # --description--
 
-The expression `only if` is used to set a condition for something to happen. It’s like saying `this will happen if that happens.` It's a way of making an agreement where one action depends on another.
+The expression `only if` is used to set a condition for something to happen. It's like saying `this will happen if that happens.` It's a way of making an agreement where one action depends on another.
 
 For example: if your friend says, `I'll go out only if it doesn't rain,` it means they will go out but the weather must be good - no rain.
 
@@ -20,7 +20,7 @@ For example: if your friend says, `I'll go out only if it doesn't rain,` it mean
 
 ## --text--
 
-What is Sophie’s condition?
+What is Sophie's condition?
 
 ## --answers--
 
@@ -44,7 +44,7 @@ There is no mention of Sophie wanting to show pictures.
 
 ---
 
-She doesn’t want to hear Tom play.
+She doesn't want to hear Tom play.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
index 21d5df4dd8..8c335506e2 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
@@ -7,11 +7,11 @@ dashedName: task-43
 
 # --description--
 
-When you want to learn about a person’s character or personality without specifying their gender, you can use `they` as a singular pronoun and ask, `What are they like?`.
+When you want to learn about a person's character or personality without specifying their gender, you can use `they` as a singular pronoun and ask, `What are they like?`.
 
 This is a respectful and inclusive way to ask about someone. Using `they` in this way ensures that you don't make assumptions about people. Example:
 
-Imagine there is a new team member joining your programming project, but you haven’t met them yet. Instead of assuming their gender, you can ask your supervisor, `What are they like?`
+Imagine there is a new team member joining your programming project, but you haven't met them yet. Instead of assuming their gender, you can ask your supervisor, `What are they like?`
 
 This question helps you find out about the new member's personality, such as being organized, creative, or detail-oriented.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
index 076109b8da..28080229eb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
@@ -13,7 +13,17 @@ As you already studied, for most verbs conjugation can be simple. You just  add
 
 例如：
 
-`You talk` -> `He talks` `They do` -> `It does`
+Verb `to talk` conjugation:
+
+- `I talk`, `you talk`, `we talk`, and `they talk`.
+
+- `He talks`, `she talks`, and `it talks`.
+
+Verb `to do` conjugation:
+
+- `I do`, `you do`, `we do`, and `they do`.
+
+- `He does`, `she does`, and `it does`.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
index a1d512fed7..6ee041dcde 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
@@ -9,7 +9,7 @@ dashedName: task-58
 
 # --description--
 
-Let’s practice listening to verbs conjugated in the third person.
+Let's practice listening to verbs conjugated in the third person.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
index b5a7ed6dc1..dd804ae3ca 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
@@ -13,7 +13,7 @@ dashedName: task-60
 
 ## --text--
 
-Choose the correct question for asking about someone’s usual work location.
+Choose the correct question for asking about someone's usual work location.
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
index f206982476..7b9b413d19 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
@@ -11,7 +11,7 @@ dashedName: task-75
 
 The expression `to be in good hands` means that someone is being taken care of by a competent or capable person.
 
-It’s like saying you can relax because you trust the person helping or looking after you.
+It's like saying you can relax because you trust the person helping or looking after you.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
index 0bc7dfb91e..adf48b7131 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
@@ -35,7 +35,7 @@ Sophie's words are very positive, more than just average.
 
 ---
 
-She is unsure about Maria’s leadership skills.
+She is unsure about Maria's leadership skills.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
index a6504cbaf0..6729f470b2 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
@@ -13,7 +13,7 @@ The word `reasonable` means something is fair, makes sense, or is acceptable in
 
 ## --text--
 
-What does `that’s reasonable` mean?
+What does `that's reasonable` mean?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
index 0952906e3a..de288e79d4 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
@@ -9,7 +9,7 @@ dashedName: task-94
 
 In English, the verb `know` is conjugated to `knows` when the subject is singular and in third person.
 
-`Everyone` refers to a group but it is treated as a singular noun, that’s why in English the correct form is `everyone knows`.
+`Everyone` refers to a group but it is treated as a singular noun, that's why in English the correct form is `everyone knows`.
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
index 2593d34679..814f662f8f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
@@ -10,7 +10,7 @@ Tom: Good to know! Do they involve everyone on the team? -->
 
 # --description--
 
-Listen carefully to Tom’s question about the team meetings.
+Listen carefully to Tom's question about the team meetings.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
index 3ced76f694..bfd0df0dc3 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
@@ -13,7 +13,7 @@ dashedName: task-104
 
 How long it takes to make a website depends on how big or small the job is. Choosing the coding language depends on the computer or system we use.
 
-Notice that after `depends` there’s always the preposition `on`.
+Notice that after `depends` there's always the preposition `on`.
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
index acdbdfe1e3..47b1f59464 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
@@ -26,7 +26,7 @@ Definitely next Monday.
 
 ### --feedback--
 
-`Definitely` is too certain compared to `probably.`
+Sophie says `probably`, which does not imply anything definite.
 
 ---
 
@@ -34,7 +34,7 @@ Maybe in two weeks.
 
 ### --feedback--
 
-`Maybe in two weeks` suggests less certainty and a longer timeframe than indicated by `probably.`
+Sophie uses `probably`, which suggests a greater level of certainty than maybe.
 
 ---
 
@@ -46,7 +46,7 @@ On Friday.
 
 ### --feedback--
 
-`On Friday` is not mentioned and does not align with `probably next Monday.`
+Friday was not mentioned in the dialog. It has to do with another day of the week.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
index 6e9c5718ed..1f60f107db 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
@@ -21,7 +21,7 @@ Which sentence is correct for describing one place near you?
 
 ### --feedback--
 
-`There are` is used for plural nouns, and `bank` is singular. You’ll learn about `there are` in the next few lessons.
+`There are` is used for plural nouns, and `bank` is singular. You'll learn about `there are` in the next few lessons.
 
 ---
 
@@ -29,7 +29,7 @@ Which sentence is correct for describing one place near you?
 
 ### --feedback--
 
-This option is a question form, not a statement. You’ll learn about questions later.
+This option is a question form, not a statement. You'll learn about questions later.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
index 10c0845779..cbbd43b132 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
@@ -9,7 +9,9 @@ dashedName: task-112
 
 To elaborate a question using `there is` you just need to change the order of the verb `to be`, like so:
 
-`There is an ATM nearby` -> `Is there an ATM nearby?`
+| Affirmative               | Interrogative             |
+| ------------------------- | ------------------------- |
+| `There is an ATM nearby.` | `Is there an ATM nearby?` |
 
 This form is useful when you're not sure if the place or item exists in that area and you want to ask about it.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
index 726e33791e..fd061f85d5 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
@@ -31,7 +31,7 @@ Absence of parks.
 
 ### --feedback--
 
-`Absence` suggests that there are no parks.
+`A couple of` suggests that there are some parks.
 
 ---
 
@@ -43,7 +43,7 @@ Many parks.
 
 ### --feedback--
 
-`Many` indicates a larger quantity, which doesn't match the context.
+`A couple of` indicates a small quantity, which doesn't match this answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
index cc6373a451..5311718220 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
@@ -11,9 +11,9 @@ dashedName: task-123
 
 Maria mentions that she doesn't know of any theater in the area. When you want to express that something does not exist or is not present somewhere, you use `there isn't` for singular nouns or `there aren't` for plural nouns.
 
-`There isn’t` is an abbreviation of `there is not`.
+`There isn't` is an abbreviation of `there is not`.
 
-`There aren’t` is an abbreviation of `there are not`.
+`There aren't` is an abbreviation of `there are not`.
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
index f5cbb5fad1..dba3b3ff6b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
@@ -21,11 +21,11 @@ There are closed malls.
 
 ### --feedback--
 
-They don’t discuss the opening hours of malls.
+They don't discuss the opening hours of malls.
 
 ---
 
-There aren’t any malls.
+There aren't any malls.
 
 ### --feedback--
 
@@ -33,7 +33,7 @@ Malls are easy to locate.
 
 ---
 
-Malls aren’t very common in this area.
+Malls aren't very common in this area.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
index fadee714a6..7c17a7e534 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
@@ -46,7 +46,7 @@ She doesn't ask about his family. Try again.
 
 ### --feedback--
 
-She doesn’t ask for reasons. Try again.
+She doesn't ask for reasons. Try again.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
index 47cf8c442d..c43f91ef4e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
@@ -13,9 +13,10 @@ There are some verbs you can't use `didn't` to create negative sentences in the
 
 If you want to create a negative sentence using the verb `to be` in the past, simply  add `not` after `was` or `were`. 例如：
 
-`It was working normally` -> `It wasn't working normally`.
-
-`They were informed earlier` -> `They weren't informed earlier`.
+| Affirmative                   | Negative                         |
+| ----------------------------- | -------------------------------- |
+| `It was working normally.`    | `It wasn't working normally.`    |
+| `They were informed earlier.` | `They weren't informed earlier.` |
 
 `Wasn't` is the abbreviation of `was not` and `weren't` the abbreviation of `were not`.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
index 8620b1cc27..60aa2bf8c4 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-91
 ---
 
-<!-- (Audio) Anna: I saw that tech companies appreciate innovation and care for the employees’ well-being. -->
+<!-- (Audio) Anna: I saw that tech companies appreciate innovation and care for the employees' well-being. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
index 6c8694f2e4..3db34a46ba 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-61
 ---
 
-<!-- (Audio) Brian: They weren’t exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
+<!-- (Audio) Brian: They weren't exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
index a771e1f995..b950dd4104 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
@@ -6,7 +6,7 @@ dashedName: task-62
 ---
 
 <!-- (Audio) Sophie: That sounds cool. Did you ever work on any big projects during your studies? 
-Brian: They weren’t exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
+Brian: They weren't exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
index 0685ff884a..8b2cdb1d4b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
@@ -15,7 +15,7 @@ Listen to the audio and answer the question.
 
 ## --text--
 
-What part of Sarah’s answer suggests a course of action?
+What part of Sarah's answer suggests a course of action?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
index 57b9aca791..93211e77fd 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
@@ -11,7 +11,7 @@ dashedName: task-76
 
 `That's strange` means you think something is unusual or unexpected. For example, if you see it snowing in the summer, you might say, `That's strange.` It means you did not expect that to happen.
 
-`I'm sure` means you are confident that something is true. For example, if you know your friend’s birthday is tomorrow, you can say, `I'm sure it's tomorrow.` It means you believe it without doubt.
+`I'm sure` means you are confident that something is true. For example, if you know your friend's birthday is tomorrow, you can say, `I'm sure it's tomorrow.` It means you believe it without doubt.
 
 Listen and fill in the blanks.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
index ac608c2860..9d837be0c0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
@@ -11,7 +11,7 @@ dashedName: task-78
 
 `Now that I think about it` means you have remembered or realized something after thinking more. For example, if you forgot where you put your keys but then remember, you might say, `Now that I think about it, they are on the table.` It means you have thought again and found new information.
 
-`To confuse something with something else` means to mix up two things and think one is the other. For example, if you see someone’s twin and think it is your friend, you can say `Sorry. I confused your twin with you`. It means you mistake one thing for another.
+`To confuse something with something else` means to mix up two things and think one is the other. For example, if you see someone's twin and think it is your friend, you can say `Sorry. I confused your twin with you`. It means you mistake one thing for another.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
index 1b76c28733..a46cb43df1 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
@@ -11,7 +11,7 @@ dashedName: task-79
 
 A `tray` is a flat, shallow container used to carry or hold things. For example, you use a `tray` to bring food or drinks from the kitchen to the table.
 
-`Enough` means having as much as you need. For example, if you have `enough water`, it means you have all the water you need to drink and you don’t need more. It can be used to talk about quantity, like having `enough food`, or to talk about quality, like when something is `good enough`.
+`Enough` means having as much as you need. For example, if you have `enough water`, it means you have all the water you need to drink and you don't need more. It can be used to talk about quantity, like having `enough food`, or to talk about quality, like when something is `good enough`.
 
 Listen to the dialogue and fill in the blanks.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
index b64cf79785..0553c70392 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
@@ -23,7 +23,7 @@ Sophie helps her team and James checked cybersecurity
 
 ### --feedback--
 
-This option incorrectly uses the simple present tense for Sophie and the simple past tense for James. They don’t reflect the continuous, ongoing nature of their current activities.
+This option incorrectly uses the simple present tense for Sophie and the simple past tense for James. They don't reflect the continuous, ongoing nature of their current activities.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
index 5931c919ea..2c96c94fa4 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
@@ -9,13 +9,13 @@ dashedName: task-19
 
 # --description--
 
-To `Use` means to use something for a purpose.
+To `use` means to put something to a particular purpose.
 
 A `tool` is something that helps you do a job. In work, tools are often software or things on the computer. 例如：
 
-`Using tools can make hard jobs easier`
+- `Using tools can make hard jobs easier`
 
-`She uses tools to organize her work`
+- `She uses tools to organize her work`
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
index 6014ced2b1..134879a1de 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-22
 ---
 
-<!-- (Audio) Mark: Hi Maria! I'm testing a new software to find problems. It’s a nice experience so far, but we're doing more tests to make sure everything works. -->
+<!-- (Audio) Mark: Hi Maria! I'm testing a new software to find problems. It's a nice experience so far, but we're doing more tests to make sure everything works. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ In this dialogue, Mark talks about his activities related to a project.
 
 ## --sentence--
 
-`Hi Maria! I'm BLANK a new software to BLANK problems. It’s a nice experience so far, but we're BLANK more tests to BLANK sure everything BLANK`
+`Hi Maria! I'm BLANK a new software to BLANK problems. It's a nice experience so far, but we're BLANK more tests to BLANK sure everything BLANK`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
index c4d079700a..b54bb4d858 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-24
 ---
 
-<!-- (Audio) Mark: It’s a nice experience so far, but we're doing more tests to make sure everything works. -->
+<!-- (Audio) Mark: It's a nice experience so far, but we're doing more tests to make sure everything works. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
index 2586d4ad2d..7b56c2d6dc 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-34
 ---
 
-<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I’m getting information for the articles. It's keeping me busy, but I enjoy it. -->
+<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I'm getting information for the articles. It's keeping me busy, but I enjoy it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
index 99a187816b..afd5d839c5 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-35
 ---
 
-<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I’m getting information for the articles. It's keeping me busy, but I enjoy it. -->
+<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I'm getting information for the articles. It's keeping me busy, but I enjoy it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
index 6c53bef079..4b740a4e90 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
@@ -23,7 +23,7 @@ She is learning about project management
 
 ### --feedback--
 
-Sarah doesn’t mention project management.
+Sarah doesn't mention project management.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
index 719b76ed75..38c3652e3b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
@@ -13,7 +13,7 @@ When someone uses `either` at the end of a negative sentence, it means the same
 
 `I don't like carrots. My sister doesn't like them, either.`
 
-Here, `either` means both the speaker and their sister don’t like carrots.
+Here, `either` means both the speaker and their sister don't like carrots.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
index 4c6e55a91c..a2eb451b0f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
@@ -9,7 +9,7 @@ dashedName: task-2
 
 # --description--
 
-`AI` stands for Artificial Intelligence. It’s an abbreviation of Artificial Intelligence.
+`AI` stands for Artificial Intelligence. It's an abbreviation of Artificial Intelligence.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
index 79b285968a..b68e9cf740 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
@@ -9,7 +9,7 @@ dashedName: task-4
 
 # --description--
 
-`like` is a preposition used to describe the similarity between two things, people, or concepts. It indicates that there are shared qualities or characteristics between the compared elements. It’s commonly used in comparisons to highlight similarities. Example: `Her eyes are blue like the sky.`
+`like` is a preposition used to describe the similarity between two things, people, or concepts. It indicates that there are shared qualities or characteristics between the compared elements. It's commonly used in comparisons to highlight similarities. Example: `Her eyes are blue like the sky.`
 
 Fill in the blank with proper word.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
index 1d4e672e11..13c884e97e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
@@ -9,7 +9,7 @@ dashedName: task-5
 
 # --description--
 
-In this challenge, you’ll practice what you learned in previous challenges. Listen to the dialogue and choose the correct answer.
+In this challenge, you'll practice what you learned in previous challenges. Listen to the dialogue and choose the correct answer.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
index dae53352ee..e2cbb035ff 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
@@ -9,7 +9,7 @@ dashedName: task-88
 
 # --description--
 
-You learned how to talk about an unspecified thing or information with a broad term that didn’t point to a specific item. Let’s review it in this challenge.
+You learned how to talk about an unspecified thing or information with a broad term that didn't point to a specific item. Let's review it in this challenge.
 
 Listen and fill in the blank.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
index 794626ff98..4c893335a0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
@@ -39,7 +39,7 @@ This answer limits `AR` to one aspect, which is not what `it is a mix` suggests.
 
 ### --feedback--
 
-`It is a mix` doesn’t mean `AR` is separate from reality.
+`It is a mix` doesn't mean `AR` is separate from reality.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
index 27013db43b..550916df98 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
@@ -9,7 +9,7 @@ dashedName: task-92
 
 # --description--
 
-Let’s review what Sophie and Tom talk about.
+Let's review what Sophie and Tom talk about.
 
 Listen and fill in the blanks to complete the dialogue.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
index a77f0cd3b5..b1cb3e9d4f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
@@ -9,7 +9,7 @@ dashedName: task-97
 
 # --description--
 
-Let’s review what Sophie and Tom talk about, to understand how AR works.
+Let's review what Sophie and Tom talk about, to understand how AR works.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
index 27f159ea76..4081add26a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-6
 ---
 
-<!-- (Audio) Sophie: No, I haven’t seen her yet. What can you tell me about her? -->
+<!-- (Audio) Sophie: No, I haven't seen her yet. What can you tell me about her? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
index 7d2872732a..5d8b828b7f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Sophie: No, I haven’t seen her yet. What can you tell me about her? -->
+<!-- (Audio) Sophie: No, I haven't seen her yet. What can you tell me about her? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
index f8afd30e3f..4a3dfac05e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-13
 ---
 
-<!-- (Audio) Bob: You’ll recognize her right away. -->
+<!-- (Audio) Bob: You'll recognize her right away. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ The phrase `right away` means quickly or very soon. For instance, `If you find a
 
 ## --sentence--
 
-`You’ll BLANK her BLANK BLANK.`
+`You'll BLANK her BLANK BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
index 6fdeee6c57..2a630c17b9 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-14
 ---
 
-<!-- (Audio) Bob: You’ll recognize her right away. -->
+<!-- (Audio) Bob: You'll recognize her right away. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
index 92e51f2290..6573aa8c8f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-71
 ---
 
-<!-- (Audio) Tom: Ah, speaking of procedures, is there anything he’s told you that we need to do when it comes to office security? -->
+<!-- (Audio) Tom: Ah, speaking of procedures, is there anything he's told you that we need to do when it comes to office security? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
index dbe75f0260..041180b2a7 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-82
 ---
 
-<!-- (Audio) Bob: I also can’t disclose sensitive information to anyone outside of the company. -->
+<!-- (Audio) Bob: I also can't disclose sensitive information to anyone outside of the company. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
index 693c5e9d72..b420fd22f0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-94
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, if you don't eat healthy food or exercise, you might be `neglecting
 
 ## --sentence--
 
-`I also don’t want to BLANK BLANK BLANK, so two months ago I started jogging regularly.`
+`I also don't want to BLANK BLANK BLANK, so two months ago I started jogging regularly.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
index 75b255753c..0028bed138 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-95
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, if you say `I moved here a year ago`, it means that one year has pa
 
 ## --sentence--
 
-`I also don’t want to neglect my health, so two months BLANK I started jogging regularly.`
+`I also don't want to neglect my health, so two months BLANK I started jogging regularly.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
index f2a02e232f..89cd460774 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-97
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -21,7 +21,7 @@ Adverbs describe how actions are done. They are often formed by adding `-ly` to
 
 ## --sentence--
 
-`I also don’t want to neglect my health, so two months ago I started BLANK BLANK.`
+`I also don't want to neglect my health, so two months ago I started BLANK BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
index 7f80a0719d..2c369859ad 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
@@ -6,7 +6,7 @@ dashedName: task-99
 ---
 
 <!-- (Audio) Brian: Tell me about your responsibilities beyond work.
-Sophie: Well, I have to make time for my family – that's really important to me. I also don’t want to neglect my health, so two months ago I started jogging regularly. It helps me relax and stay fit. -->
+Sophie: Well, I have to make time for my family – that's really important to me. I also don't want to neglect my health, so two months ago I started jogging regularly. It helps me relax and stay fit. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
index a523177e00..024b75d114 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-106
 ---
 
-<!-- (Audio) Sophie: Sometimes, it’s the simple and free things that bring us the result we’re looking for. -->
+<!-- (Audio) Sophie: Sometimes, it's the simple and free things that bring us the result we're looking for. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
index b46a728634..45f8487df0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
@@ -43,7 +43,7 @@ It disconnects applications from the internet, focusing on internal networks.
 
 ### --feedback--
 
-Serverless computing still uses the internet as part of cloud services; it doesn’t focus on internal networks.
+Serverless computing still uses the internet as part of cloud services; it doesn't focus on internal networks.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
index 5b268a1a15..da642e989c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-38
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, `He is hearing different opinions on the topic.` It shows he is cur
 
 ## --sentence--
 
-`Sarah, I’m BLANK a lot BLANK AI in programming these days, but I don't know how to use it. Any ideas?`
+`Sarah, I'm BLANK a lot BLANK AI in programming these days, but I don't know how to use it. Any ideas?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
index 80f379f71a..14ee0b921e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-41
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
index da2bfb4aab..b0492b006d 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-42
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
index 124c8a57c5..56ffc2a2f5 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
@@ -23,7 +23,7 @@ Using a program that automatically improves code efficiency
 
 ### --feedback--
 
-This is an example of AI, as it involves using technology to improve code, aligning with Sarah’s description.
+This is an example of AI, as it involves using technology to improve code, aligning with Sarah's description.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
index a68692fcb9..783e6cd38e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
@@ -17,7 +17,8 @@ Instead of saying `It seems like you have a ton of energy this morning`, James c
 
 Here are some more examples:
 
-`She wakes up early every day` - `Early` describes the time of her waking up. `He has a quick shower in the morning` - `Quick` describes the short duration of the shower.
+* `She wakes up early every day` - `Early` describes the time of her waking up.
+* `He has a quick shower in the morning` - `Quick` describes the short duration of the shower.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
index c22949ff33..151cd2d6cb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
@@ -13,9 +13,12 @@ Idiomatic expressions are phrases where the words together have a different mean
 
 `A ton of energy` is an idiomatic expression meaning having a lot of energy, similar to saying `loads of energy`.
 
-Another expression would be `I slept like a rock,` which means sleeping very deeply. Here are some more examples of Idiomatic Expressions:
+Another expression would be `I slept like a rock,` which means sleeping very deeply. Here are some more examples of idiomatic expressions:
 
-`She's feeling blue today.` (feeling sad) `This math problem is a piece of cake.` (very easy) `He's in hot water now.` (in trouble) `They see eye to eye.` (agree with each other)
+* `She's feeling blue today.` (feeling sad)
+* `This math problem is a piece of cake.` (very easy)
+* `He's in hot water now.` (in trouble)
+* `They see eye to eye.` (agree with each other)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
index 6958928173..aa85aa6b14 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
@@ -13,9 +13,8 @@ The words `before` and `after` are used to describe the order of events in time.
 
 `Before` is used to talk about something that happens earlier than another event, and `after` is used for something that happens later. 例如：
 
-`I brush my teeth before I have breakfast` (Brushing teeth happens first)
-
-`I go to work after I have breakfast` (Going to work happens later)
+* `I brush my teeth before I have breakfast` (Brushing teeth happens first)
+* `I go to work after I have breakfast` (Going to work happens later)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
index 1ae3216ad9..86c0b9c0d6 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
@@ -9,7 +9,10 @@ dashedName: task-14
 
 The verb `take` is used in many common English expressions. When `take` is used with different nouns, it can have special meanings. 舉個例子：
 
-`Take a shower` means to shower. `Take a walk` means to go for a walk. `Take a nap` means to sleep for a little while. `Take a chance` means to try something that might be risky.
+* `Take a shower` means to shower.
+* `Take a walk` means to go for a walk.
+* `Take a nap` means to sleep for a little while.
+* `Take a chance` means to try something that might be risky.
 
 These phrases are like fixed recipes in English; the words go together to mean something specific.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
index 42e2c0582d..89538880c0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
@@ -9,7 +9,9 @@ dashedName: task-15
 
 Remember, adjectives are words that describe or give more information about nouns. They can tell you how something looks, feels, or acts. 舉個例子：
 
-`Quick` describes something done in a short time. `Relaxed` describes something or someone calm and not strict. `Alert` describes being fully aware and paying attention.
+* `Quick` describes something done in a short time.
+* `Relaxed` describes something or someone calm and not strict.
+* `Alert` describes being fully aware and paying attention.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
index 4afd34397d..3e0830f876 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
@@ -9,7 +9,9 @@ dashedName: task-16
 
 The verb `get` is very common in English and has many uses. It can mean to receive, become, or reach a state. 舉個例子：
 
-`Get dressed` means to put on clothes. `Get ready` means to prepare for something. `Get tired` means to start feeling tired.
+* `Get dressed` means to put on clothes.
+* `Get ready` means to prepare for something.
+* `Get tired` means to start feeling tired.
 
 Understanding how `get` is used will help you express different actions and states in English.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
index 185f5db0b7..afdcbfd19a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
@@ -9,7 +9,8 @@ dashedName: task-19
 
 A `dress code` is a set of rules about what you should wear in a certain place or event. Different places have different dress codes. 舉個例子：
 
-A `relaxed dress code` means you can wear casual, comfortable clothes. A `formal dress code` requires more official and elegant clothes.
+* A `relaxed dress code` means you can wear casual, comfortable clothes.
+* A `formal dress code` requires more official and elegant clothes.
 
 Note: Remember, dress codes can vary depending on the culture and the specific place.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
index 9cac102288..eb6bb84802 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
@@ -13,7 +13,8 @@ dashedName: task-26
 
 `Late` means doing something after the expected or usual time, like arriving late to a meeting. Here are some examples:
 
-`She likes to start her day early with a jog.` `He often works late at the office.`
+* `She likes to start her day early with a jog.`
+* `He often works late at the office.`
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
index dae057ab56..1ff8b2dd8f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
@@ -11,7 +11,8 @@ dashedName: task-27
 
 The word `never` is an adverb used to mean `not at any time` or `not ever`. It's often used to talk about things that someone doesn't do or hasn't done. 舉個例子：
 
-`I have never been to Australia.` (this means the person has not visited Australia at any time) `She never eats fast food.` (this means she does not eat fast food at any time)
+* `I have never been to Australia.` (this means the person has not visited Australia at any time)
+* `She never eats fast food.` (this means she does not eat fast food at any time)
 
 The word `thought` is the past tense of `think`. `Thought of that` means to have considered or come up with an idea in the past. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
index 1f4d411f35..d409de8259 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
@@ -11,11 +11,9 @@ dashedName: task-28
 
 When a verb follows a preposition, it often takes the `-ing` form, known as a gerund. Gerunds are verbs acting as nouns. This rule is common in many English expressions. 舉個例子：
 
-`After eating dinner, we watched a movie.` (`eating` follows the preposition `after`)
-
-`She is interested in learning Spanish.` (`learning` follows the preposition `in`)
-
-`Before going to bed, I like to read.` (`going` follows the preposition `before`)
+* `After eating dinner, we watched a movie.` (`eating` follows the preposition `after`)
+* `She is interested in learning Spanish.` (`learning` follows the preposition `in`)
+* `Before going to bed, I like to read.` (`going` follows the preposition `before`)
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
index 887df88ff2..af344875e8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
@@ -11,9 +11,8 @@ dashedName: task-29
 
 The word `if` is often used in conditional statements to talk about a possible situation and its consequences. 舉個例子：
 
-`If it rains, I will bring an umbrella.` (The action of bringing an umbrella depends on the possibility of rain.)
-
-`If you need help, just ask.` (The offer to help is conditional on the other person needing it.)
+* `If it rains, I will bring an umbrella.` (The action of bringing an umbrella depends on the possibility of rain.)
+* `If you need help, just ask.` (The offer to help is conditional on the other person needing it.)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
index a16179d58d..7688a3e274 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
@@ -13,9 +13,8 @@ The word `even` is used to add emphasis to a statement, often highlighting somet
 
 When combined with `before` in the phrase `even before`, it emphasizes that an action or event occurs earlier than usual or expected, adding a sense of surprise or admiration. 例如：
 
-`Even before the sun rises, she starts her workout.` (emphasizes that her workout begins unusually early)
-
-`He finished the project even before the deadline.` (implies that finishing before the deadline is surprisingly early)
+* `Even before the sun rises, she starts her workout.` (emphasizes that her workout begins unusually early)
+* `He finished the project even before the deadline.` (implies that finishing before the deadline is surprisingly early)
 
 In conversation, using `even` can express that something is more than what might be considered normal or usual. It makes the statement stronger.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
index df47f29981..4e18bd7680 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
@@ -11,7 +11,8 @@ dashedName: task-32
 
 You probably remember that `I'll` is the contracted form of `I will`, a modal verb used to express future intentions, decisions, or plans made at the moment of speaking. 舉個例子：
 
-`I'll call you tomorrow.` (future intention to call) `I'll take the bus to work.` (decision made about taking the bus)
+* `I'll call you tomorrow.` (future intention to call)
+* `I'll take the bus to work.` (decision made about taking the bus)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
index ea6b5bfb6b..189614775f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
@@ -15,7 +15,7 @@ This challenge is designed to summarize and reinforce the understanding of James
 
 ## --sentence--
 
-`Sarah has a consistent morning routine. She BLANK up around 7 AM and starts her day by BLANK a bit. After making a cup of BLANK, she takes a BLANK shower and goes to the kitchen to BLANK a balanced breakfast. This helps her stay BLANK during the morning. She checks her BLANK and messages before BLANK to work. She likes to stay BLANK about the day’s tasks. James thinks her productivity BLANK coming to work is impressive and says he BLANK try some of her habits to become more BLANK in the morning as well.`
+`Sarah has a consistent morning routine. She BLANK up around 7 AM and starts her day by BLANK a bit. After making a cup of BLANK, she takes a BLANK shower and goes to the kitchen to BLANK a balanced breakfast. This helps her stay BLANK during the morning. She checks her BLANK and messages before BLANK to work. She likes to stay BLANK about the day's tasks. James thinks her productivity BLANK coming to work is impressive and says he BLANK try some of her habits to become more BLANK in the morning as well.`
 
 ## --blanks--
 
@@ -87,7 +87,7 @@ Going away from a place, in this case, her home. Try finishing the word with `in
 
 ### --feedback--
 
-Having knowledge or being aware of the day's tasks after acessing her email.
+Having knowledge or being aware of the day's tasks after accessing her email.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
index 1c72415d9d..e5c960336b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
@@ -11,7 +11,8 @@ The `y` ending can also turn nouns into adjectives that describe a characteristi
 
 `Healthy` comes from the noun `health` and means having or showing good health. Like `sleepy`, the `y` changes the noun into an adjective. Other examples:
 
-`Wealthy` (having a lot of wealth), `Cloudy` (full of or covered with clouds)
+* `Wealthy` (having a lot of wealth)
+* `Cloudy` (full of or covered with clouds)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
index 2feb2b2b8a..b97f6a9c53 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
@@ -15,7 +15,9 @@ There's a difference between `may be` and `maybe`. Let's take a closer look.
 
 `Maybe` is an adverb indicating uncertainty or possibility. For example:
 
-`It may be raining outside.` (suggests a possibility of rain) `Maybe I will go out later.` (expresses uncertainty about going out) `May I ask a question?` (Asks for the permission to speak)
+* `It may be raining outside.` (suggests a possibility of rain)
+* `Maybe I will go out later.` (expresses uncertainty about going out)
+* `May I ask a question?` (Asks for the permission to speak)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
index 7bab34d1b8..88711f7db0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
@@ -11,7 +11,7 @@ dashedName: task-45
 
 `I feel groggy if I don't get enough sleep` (describes feeling tired due to lack of sleep)
 
-`Sluggish` is an adjective that describes a feeling of low energy, slow movement, or a lack of alertness. It's often used when someone feels tired, lethargic, or not able to think or move quickly. This term can apply to both physical and mental states. Here are some examples:
+`Sluggish` is an adjective that describes a feeling of low energy, slow movement, or a lack of alertness. It's often used when someone feels tired, lethargic, or not able to think or move quickly. This term can apply to both physical and mental states. Here is an example:
 
 `The computer was running sluggishly, taking a long time to respond` (describes slow performance, used metaphorically for an inanimate object)
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
index 3a428614aa..e728237c43 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
@@ -11,9 +11,8 @@ dashedName: task-46
 
 The verb `to ring` refers to the action of making a sound, particularly a clear resonant sound. It's commonly used to describe the sound made by bells, telephones, or alarms. 舉個例子：
 
-`The phone will ring at 9 AM to remind me of the meeting.` (indicates the phone making a sound)
-
-`I wake up when my alarm clock rings.` (describes the alarm making a sound to wake someone up)
+* `The phone will ring at 9 AM to remind me of the meeting.` (indicates the phone making a sound)
+* `I wake up when my alarm clock rings.` (describes the alarm making a sound to wake someone up)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
index e8e417a15b..9df25ba4a8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
@@ -11,9 +11,8 @@ dashedName: task-47
 
 The imperative form is used to give orders, instructions, or advice. It often starts with a verb in the base form for positive commands, or with `don't`/`do not` for negative commands. Understanding this form is important for following or giving instructions. 舉個例子：
 
-`Drink plenty of water` (positive command)
-
-`Don't stay up too late` (negative command)
+* `Drink plenty of water` (positive command)
+* `Don't stay up too late` (negative command)
 
 # --fillInTheBlank--
 
@@ -27,7 +26,7 @@ The imperative form is used to give orders, instructions, or advice. It often st
 
 ### --feedback--
 
-Base form of the verb used for giving a positive command. 這個詞首字母要大寫。
+Base form of the verb used for giving a positive command. This word is capitalized.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
index 6960d16fb5..ed98632866 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
@@ -9,9 +9,8 @@ dashedName: task-50
 
 The word `later` is the comparative form of `late`, used to indicate a time or event that is after the expected, usual, or planned time. Comparatives are used to compare two things. 舉個例子：
 
-`We will leave later than planned.` (means leaving after the planned time)
-
-`She arrived later than me.` (indicates she arrived after the speaker)
+* `We will leave later than planned.` (means leaving after the planned time)
+* `She arrived later than me.` (indicates she arrived after the speaker)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
index 3cfaef0ff2..08f7b7ff96 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
@@ -11,9 +11,8 @@ dashedName: task-52
 
 `Who` can be used as a relative pronoun to introduce a clause that gives more information about a person or people. It links a description or action specifically to a person. 舉個例子：
 
-`She is someone who always knows what to do.` (links the knowing what to do to the person)
-
-`He's the data analyst who helped me a lot.` (describes the data analyst with the action of helping)
+* `She is someone who always knows what to do.` (links the knowing what to do to the person)
+* `He's the data analyst who helped me a lot.` (describes the data analyst with the action of helping)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
index 93426df8a4..5e8e19ce59 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
@@ -11,9 +11,8 @@ dashedName: task-54
 
 The verb `to rush` means to do something or move quickly or in a hurry, often due to time pressure. It's used to describe actions done with urgency. 舉個例子：
 
-`I had to rush to catch the train.` (means moving quickly to not miss the train)
-
-`Don't rush your decision.` (suggests taking time to decide)
+* `I had to rush to catch the train.` (means moving quickly to not miss the train)
+* `Don't rush your decision.` (suggests taking time to decide)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
index 333d4606c8..5f8f41252d 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
@@ -11,9 +11,8 @@ dashedName: task-56
 
 `Breathing exercises` are practices where you consciously control your breathing pattern. They are often used for relaxation, stress management, and to `clear your mind` – which means to free your mind from stress or worry. 舉個例子：
 
-`Deep breathing helps to calm your nerves.` (uses controlled breathing for relaxation)
-
-`Clear your mind before the test to focus better.` (freeing the mind from distractions)
+* `Deep breathing helps to calm your nerves.` (uses controlled breathing for relaxation)
+* `Clear your mind before the test to focus better.` (freeing the mind from distractions)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
index c50f8183a5..9a3ef8d8fb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
@@ -17,7 +17,7 @@ Conditional sentences often use `if` to describe a situation (cause) that will l
 
 ## --text--
 
-What is the cause and consequence of the expert’s advice?
+What is the cause and consequence of the expert's advice?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
index 54a028766e..c932a5cc26 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
@@ -11,11 +11,13 @@ dashedName: task-62
 
 Past tense verbs are used to talk about actions that happened in the past. Some verbs change their form in the past tense, like `say` to `said`. 舉個例子：
 
-`Yesterday, she said she would join us` (Past tense of `say`) `He said the meeting was at noon` (Describes a past statement about the meeting time)
+* `Yesterday, she said she would join us` (Past tense of `say`)
+* `He said the meeting was at noon` (Describes a past statement about the meeting time)
 
-Another example of irregular verb is `tell`, which becomes `told` in the past tense. For example:
+Another example of an irregular verb is `tell`, which becomes `told` in the past tense. For example:
 
-`He told me about the plan last week` (Past tense of `tell`) `Last night, they told stories about our last project` (Using `told` to describe a past action)
+* `He told me about the plan last week` (Past tense of `tell`)
+* `Last night, they told stories about our last project` (Using `told` to describe a past action)
 
 Don't worry if irregular verbs seem tricky; with practice, you'll get the hang of them!
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
index 0a76f81d5c..963e21d55f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
@@ -11,15 +11,13 @@ dashedName: task-63
 
 Regular verbs usually add `-ed` to form the past tense. This can also result in some adjectives as in the dialogue.
 
-`Complicated` is the past tense form of the regular verb `complicate`, as well as the adjective that means something is not simple or easy to do. One example of it as a verb can be: `The problems on the road complicated our trip.`
-
-`I walked to the store` (Past tense of `walk`)
-
-`She cleaned her room yesterday` (Past tense of `clean`)
+* `Complicated` is the past tense form of the regular verb `complicate`, as well as the adjective that means something is not simple or easy to do. One example of it as a verb can be: `The problems on the road complicated our trip.`
+* `I walked to the store` (Past tense of `walk`)
+* `She cleaned her room yesterday` (Past tense of `clean`)
 
 Extra note to help with the audio:
 
-`Running around` means moving about in a hurried or energetic way, often chaotically. 例如：
+`Running around` means moving about in a hurried or energetic way, often chaotically. For example:
 
 `The kids are running around the playground`
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
index 8e075f537f..7ed16d6426 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
@@ -9,7 +9,7 @@ dashedName: task-64
 
 # --description--
 
-Listen to the audio and complente the sentence below.
+Listen to the audio and complete the sentence below.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
index 0ff5c35be8..e5226d1e5c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
@@ -11,7 +11,8 @@ dashedName: task-65
 
 The modal verb `could` is often used to politely ask for help or suggestions. 舉個例子：
 
-`Could you show me how to do this?` (asking for help in a polite way) `What could I do to improve my skills?` (asking for suggestions)
+* `Could you show me how to do this?` (asking for help in a polite way)
+* `What could I do to improve my skills?` (asking for suggestions)
 
 Understanding how to use `could` is important to create polite requests or questions.
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
index 131a25b2fe..0a78836921 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
@@ -11,15 +11,13 @@ dashedName: task-67
 
 The modal verb `can` is used to express ability, possibility, or to ask permission. It's a versatile verb that's commonly used in everyday conversation. 舉個例子：
 
-`I can speak three languages` (ability)
+* `I can speak three languages` (ability)
+* `Can I borrow your pen?` (asking permission)
 
-`Can I borrow your pen?` (asking permission)
+The word `tough` means difficult or challenging. It's often used to describe situations that require a lot of effort or endurance. For example:
 
-The word `tough` means difficult or challenging. It's often used to describe situations that require a lot of effort or endurance. 例如：
-
-`The API test was really tough` (indicates the test was challenging)
-
-`They'are going through a tough time right now` (implies a period of difficulty)
+* `The API test was really tough` (indicates the test was challenging)
+* `They're going through a tough time right now` (implies a period of difficulty)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
index 0432495669..c9abf2424f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
@@ -15,9 +15,10 @@ Understanding the difference between `can` and `could` is crucial in English.
 
 `Could` is often used for polite requests, suggestions, or to talk about ability in the past. For example:
 
-`I can code very well` (present ability) `Can I leave early today?` (asking for permission)
-
-`Could you pass me that tool, please?` (polite request) `When I first learned programming, I could spend hours debugging without getting tired` (past ability)
+* `I can code very well` (present ability)
+* `Can I leave early today?` (asking for permission)
+* `Could you pass me that tool, please?` (polite request)
+* `When I first learned programming, I could spend hours debugging without getting tired` (past ability)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
index 7d43ed5f70..2febd332b8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
@@ -11,7 +11,7 @@ dashedName: task-69
 
 The words you use in a sentence can make a big difference in modulating the message it delivers. Let's look at some examples to understand this better.
 
-Prepositions like `by` affect the verb that comes after, When you use `by`, it often needs the verb to end with `-ing`. 這是一個示例：
+Prepositions like `by` affect the verb that comes after. When you use `by`, it often needs the verb to end with `-ing`. 這是一個示例：
 
 `I improved by practicing daily` (This means I got better at something because I practiced every day. You use the preposition `by` to show how something is done)
 
@@ -21,7 +21,8 @@ Adjectives can also change the meaning of the following word by adding details t
 
 Even words like `family` and `outdoor` can be used as adjectives, they describe the noun that follows them. 例如：
 
-`Family activities bring everyone together.` (`family` describes the type of activities) `Outdoor sports are enjoyable in good weather.` (`outdoor` describes where the sports happen)
+* `Family activities bring everyone together.` (`family` describes the type of activities)
+* `Outdoor sports are enjoyable in good weather.` (`outdoor` describes where the sports happen)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
index 047dbf8623..03e401fccd 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
@@ -12,9 +12,8 @@ dashedName: task-72
 
 `While` is used in sentences to indicate that two actions or events are happening at the same time. It often sets the scene for one action that occurs during the time another action is taking place. 例如：
 
-`While I cook, I listen to music` (I listen to music at the same time as I am cooking)
-
-`She reads while waiting for the bus` (She reads during the time she is waiting)
+* `While I cook, I listen to music` (I listen to music at the same time as I am cooking)
+* `She reads while waiting for the bus` (She reads during the time she is waiting)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
index b7ff58ac8d..19118c9527 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
@@ -39,7 +39,7 @@ That is the wrong time.
 
 ### --feedback--
 
-That’s the wrong time of the day.
+That's the wrong time of the day.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
index a8fb4b11aa..5c36886336 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
@@ -14,9 +14,8 @@ A `night owl` is someone who stays up late. For example: `He's a night owl, ofte
 
 `Be back` means to return, and `tops` is used informally to indicate the maximum amount or time. For example:
 
-`I'll be back by dinner` (returning before a specific time)
-
-`The meeting will last one hour, tops` (no longer than one hour)
+* `I'll be back by dinner` (returning before a specific time)
+* `The meeting will last one hour, tops` (no longer than one hour)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
index 4eaa07945b..fb7399551a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
@@ -19,7 +19,7 @@ Long adjectives: Just add `the most` before the adjective.
 
 `This is the most interesting book I've read.` (`the most` + `interesting`)
 
-This is an introduction to these adjectives. You’ll learn more in the future.
+This is an introduction to these adjectives. You'll learn more in the future.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
index 0a741780cf..c692c5191b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
@@ -39,7 +39,7 @@ Sophie specifically says she sleeps `until 9:30`, not `10:00`.
 
 ---
 
-`She wakes up early, goes out, and spends the afternoon reading at home`
+`She wakes up early, goes jogging, and spends the afternoon reading at home`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
index daf2474f6f..c0dc1594d5 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
@@ -41,7 +41,7 @@ Transparent
 
 ### --feedback--
 
-It’s another meaning of `clear`, referring to something allowing light to pass through so that objects behind can be distinctly seen. In documentation, `clear` is about understandability, not transparency.
+It's another meaning of `clear`, referring to something allowing light to pass through so that objects behind can be distinctly seen. In documentation, `clear` is about understandability, not transparency.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
index 2b56523dd2..abf1b65e75 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Bob: Thanks for your feedback. I’ll share this feedback with Tom and give him some extra time to work on these colors and fonts. -->
+<!-- (Audio) Bob: Thanks for your feedback. I'll share this feedback with Tom and give him some extra time to work on these colors and fonts. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
index 1864ad3c1b..f23024ea5a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
@@ -29,7 +29,7 @@ This option is incorrect. Sophie's comments suggest she sees areas for improveme
 
 ---
 
-She doesn’t know and needs more time to form an opinion.
+She doesn't know and needs more time to form an opinion.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
index fae5b2f626..cf6fe9ec8e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
@@ -35,7 +35,7 @@ Yes, she completely agrees with Brian and suggests additional features for the m
 
 ### --feedback--
 
-Sarah's statement indicates disagreement with Brian’s focus on the mobile app, as she believes the web app requires more attention.
+Sarah's statement indicates disagreement with Brian's focus on the mobile app, as she believes the web app requires more attention.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
index 0e528326a7..625f758645 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-14
 ---
 
-<!-- (Audio) Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
@@ -19,7 +19,7 @@ To `allocate` means to distribute or assign resources or responsibilities to dif
 
 ## --sentence--
 
-`Well, here’s what I think we could do. Why don’t we BLANK resources to both platforms BLANK? We could give equal priority to BLANK the web app and the mobile app.`
+`Well, here's what I think we could do. Why don't we BLANK resources to both platforms BLANK? We could give equal priority to BLANK the web app and the mobile app.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
index 48eabf9d3c..7c22f6addd 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-15
 ---
 
-<!-- (Audio) Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
index b91f98b793..cf4a6345a8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-16
 ---
 
-<!-- (Audio) Sarah: I'm not sure I agree with that, Brian. The web app needs attention. It has more users. Prioritizing the web app makes more sense given its larger user base. Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Sarah: I'm not sure I agree with that, Brian. The web app needs attention. It has more users. Prioritizing the web app makes more sense given its larger user base. Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
index f56cabda90..4ece42053f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-17
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal priority for a while. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal priority for a while. -->
 
 # --description--
 
@@ -23,7 +23,7 @@ Understanding these terms is key for discussing work plans and responsibilities.
 
 ## --sentence--
 
-`I BLANK think we should BLANK more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal BLANK for a while.`
+`I BLANK think we should BLANK more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal BLANK for a while.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
index dc2d4c4afa..f246bf0b76 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-18
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
index 4636f2a0bd..2e03184bd8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-19
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal priority for a while. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal priority for a while. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
index 2c2b75397c..d129d5b178 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-29
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ Focus on the word `greater`. `Greater` is used to describe something that is mor
 
 ## --sentence--
 
-`I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a BLANK chance of success with it.`
+`I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a BLANK chance of success with it.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
index a1e92f740a..ade52e374b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-30
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
index 80cc76385e..fb90713ded 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-31
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
index 4203b35b93..b998fde8de 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
@@ -27,7 +27,7 @@ Sarah expresses a strong belief in Agile's alignment with the team's strengths.
 
 ---
 
-She disagrees with using Agile and thinks it won’t be successful.
+She disagrees with using Agile and thinks it won't be successful.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
index 3246208177..13950635cb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
index c9503419b8..25f5719160 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-31
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ A `glitch` is a small problem that stops something from working right. Like when
 
 ## --sentence--
 
-`Yeah, technical BLANK are complicated and there’s not much we can do other than BLANK to solve them.`
+`Yeah, technical BLANK are complicated and there's not much we can do other than BLANK to solve them.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
index ee9c77f139..b23d7f8ada 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-33
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
index 4be44ee348..a21c9f6a14 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
index 6c33c1f1ca..0cb616224f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
@@ -5,11 +5,11 @@ challengeType: 22
 dashedName: task-34
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
-People often use `have already` to talk about something they have done before now, and `have never` to talk about something they have not done at any time in the past. Let’s practice using these phrases.
+People often use `have already` to talk about something they have done before now, and `have never` to talk about something they have not done at any time in the past. Let's practice using these phrases.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
index c87072d147..e32a4347c0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-35
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
index 5d2e2c04d5..6713e75053 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
@@ -19,7 +19,7 @@ What is Tom asking Sarah about?
 
 ## --answers--
 
-Why she didn’t solve the issue
+Why she didn't solve the issue
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
index df2ae722c9..0a74ac92b0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
@@ -27,7 +27,7 @@ It caused more problems, showing the current version is the issue.
 
 ### --feedback--
 
-Sarah said that going back didn’t solve the issue, not that it caused more problems.
+Sarah said that going back didn't solve the issue, not that it caused more problems.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
index d2c087ca61..e8891ff4a5 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
@@ -13,7 +13,7 @@ Modal verbs like `might` and `can` are used to express possibility and ability.
 
 `Might` is used for something that could happen or be true, like saying, `It might rain today`.
 
-`Can` is used to talk about someone's ability to do something, like, `She can speak three languages`. Let’s practice using these words in sentences.
+`Can` is used to talk about someone's ability to do something, like, `She can speak three languages`. Let's practice using these words in sentences.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
index e3d5b6e2ee..2deb62cf81 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-47
 ---
 
-<!-- (Audio) Sarah: Agreed. I’ll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
+<!-- (Audio) Sarah: Agreed. I'll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ In this task, you'll practice filling in key verbs and adjectives used in techni
 
 ## --sentence--
 
-`Agreed. I’ll BLANK a PR with the rollback and some BLANK logs for BLANK. That may help us find what the problem is.`
+`Agreed. I'll BLANK a PR with the rollback and some BLANK logs for BLANK. That may help us find what the problem is.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
index a727680fc1..2e0ce7e0dc 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-48
 ---
 
-<!-- (Audio) Sarah: Agreed. I’ll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
+<!-- (Audio) Sarah: Agreed. I'll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
index c88c9cc689..9fd98e8f24 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-51
 ---
 
-<!-- (Audio) Maria: Tom, I saw that you’ve fixed the issue on GitHub. Great job! -->
+<!-- (Audio) Maria: Tom, I saw that you've fixed the issue on GitHub. Great job! -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
index 61046ecf35..e0f399be1c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-60
 ---
 
-<!-- (Audio) Tom: It happens to all of us, Maria. I’ll make sure to document this for future reference, so we won't run into the same problem again. -->
+<!-- (Audio) Tom: It happens to all of us, Maria. I'll make sure to document this for future reference, so we won't run into the same problem again. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
index d4afae22e6..c99248a435 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-29
 ---
 
-<!-- (Audio) Tom: I see. So by explaining the complex parts with comments, I’ll help other people understand the code. Is that right? Sarah: Precisely. It's a form of documentation within the code. Great job grasping these concepts! -->
+<!-- (Audio) Tom: I see. So by explaining the complex parts with comments, I'll help other people understand the code. Is that right? Sarah: Precisely. It's a form of documentation within the code. Great job grasping these concepts! -->
 
 # --description--
 
@@ -27,7 +27,7 @@ Writing complex code without comments
 
 ### --feedback--
 
-Tom’s focus is on explaining complex code with comments, not writing it without comments.
+Tom's focus is on explaining complex code with comments, not writing it without comments.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
index bc1aeed0c9..4cb8f054a9 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
@@ -37,7 +37,7 @@ In this context, it refers to the final point Maria wants to make.
 
 ### --feedback--
 
-It describes the team’s nature of working together and helping each other.
+It describes the team's nature of working together and helping each other.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
index 51a8cd88fa..07bf85a93a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
@@ -35,7 +35,7 @@ Because it's a standard practice to read everything in order
 
 ### --feedback--
 
-The suggestion isn’t about reading everything in order but about finding specific information efficiently.
+The suggestion isn't about reading everything in order but about finding specific information efficiently.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
index 36aeab36c3..6241193eb2 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-4
 ---
 
-<!-- (Audio) Bob: That's great, Sarah! I’ve also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
+<!-- (Audio) Bob: That's great, Sarah! I've also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ dashedName: task-4
 
 ## --sentence--
 
-`That's great, Sarah! I’ve also been BLANK busy this week. I tested the new BLANK we added last week. It BLANK to be working well. And I found a few BLANK issues that we need to fix.`
+`That's great, Sarah! I've also been BLANK busy this week. I tested the new BLANK we added last week. It BLANK to be working well. And I found a few BLANK issues that we need to fix.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
index e6f3543feb..9f8eb1d166 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-5
 ---
 
-<!-- (Audio) Bob: That's great, Sarah! I’ve also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
+<!-- (Audio) Bob: That's great, Sarah! I've also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
index 8e6e6ee3a1..08e1a5f03a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Sarah: Thanks for catching those. As for me, I also finished the market research report. I presented it to the team yesterday. We’ve gathered valuable data that will help us make informed decisions. -->
+<!-- (Audio) Sarah: Thanks for catching those. As for me, I also finished the market research report. I presented it to the team yesterday. We've gathered valuable data that will help us make informed decisions. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
index 9b4a39252f..198b1e681b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-22
 ---
 
-<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I’m working on fully updated, and I intend to improve our customer support process based on the training I received. -->
+<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I'm working on fully updated, and I intend to improve our customer support process based on the training I received. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
index 62c44dd073..4d4108ed6e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-23
 ---
 
-<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I’m working on fully updated, and I intend to improve our customer support process based on the training I received. -->
+<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I'm working on fully updated, and I intend to improve our customer support process based on the training I received. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
index 84636b2c2f..b75031f21b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
@@ -9,7 +9,7 @@ dashedName: task-6
 
 # --description--
 
-The phrase `a fresh pair of eyes` is an idiomatic expression meaning to have someone new look at something to offer a different perspective. It’s often used when someone has been working on a problem for a long time and needs an outside opinion. The modal verb `may` suggests possibility or likelihood but not certainty.
+The phrase `a fresh pair of eyes` is an idiomatic expression meaning to have someone new look at something to offer a different perspective. It's often used when someone has been working on a problem for a long time and needs an outside opinion. The modal verb `may` suggests possibility or likelihood but not certainty.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
index e2c260b28f..f5aea8efd0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
@@ -9,7 +9,7 @@ dashedName: task-8
 
 # --description--
 
-Sophie implies, or suggests without directly stating, that she needs help with her coding problem. To 'imply' something means to suggest it in an indirect way. For example, saying 'It’s getting late' can imply that it's time to leave, without saying it directly.
+Sophie implies, or suggests without directly stating, that she needs help with her coding problem. To 'imply' something means to suggest it in an indirect way. For example, saying 'It's getting late' can imply that it's time to leave, without saying it directly.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
index fcec728eb8..ea8655bf7c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
@@ -35,7 +35,7 @@ She should wait until the next meeting
 
 ### --feedback--
 
-Bob’s offer to help is immediate, contingent on Sophie sharing the code, not waiting until the next meeting.
+Bob's offer to help is immediate, contingent on Sophie sharing the code, not waiting until the next meeting.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
index a3c7856ee4..35b63daf64 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
@@ -43,7 +43,7 @@ He doesn't think the problem can be solved
 
 ### --feedback--
 
-Bob’s statement implies he believes there are possible solutions, not that it's unsolvable.
+Bob's statement implies he believes there are possible solutions, not that it's unsolvable.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
index f051cf04a9..d11033e4fe 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
@@ -44,7 +44,7 @@ He is asking for a break from the meeting
 
 ### --feedback--
 
-Bob’s statement is about making a suggestion, not about taking a break from the meeting.
+Bob's statement is about making a suggestion, not about taking a break from the meeting.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
index b8557d3eaf..c8f47fbdb0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-31
 ---
 
-<!-- (Audio) Bob: I’m sure we'll gain some valuable insights from our discussion. -->
+<!-- (Audio) Bob: I'm sure we'll gain some valuable insights from our discussion. -->
 
 # --description--
 
@@ -43,7 +43,7 @@ He is unsure about the usefulness of the discussion
 
 ### --feedback--
 
-Bob’s statement `I'm sure` shows confidence in the usefulness of the discussion.
+Bob's statement `I'm sure` shows confidence in the usefulness of the discussion.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
index c9879cd9fe..c10164042e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
@@ -35,7 +35,7 @@ Sophie specifically mentions a coding issue she's been working on, not a differe
 
 ---
 
-She requests Bob’s help on a coding issue she's struggling with
+She requests Bob's help on a coding issue she's struggling with
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
index 22fea697ce..47fb134f10 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
@@ -31,7 +31,7 @@ It means to give someone access to something, here referring to the code.
 
 ### --feedback--
 
-It suggests starting something with enthusiasm, indicating Bob’s readiness to examine the code closely.
+It suggests starting something with enthusiasm, indicating Bob's readiness to examine the code closely.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
index a5fac66867..38bdb19583 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-56
 ---
 
-<!-- (Audio) Sophie: Yeah, consistency is essential. I’ll go ahead and start with defining those coding standards. -->
+<!-- (Audio) Sophie: Yeah, consistency is essential. I'll go ahead and start with defining those coding standards. -->
 
 # --description--
 
@@ -23,7 +23,7 @@ To wait for further instructions about coding standards
 
 ### --feedback--
 
-Sophie’s statement shows she is ready to start working on the standards, not waiting for instructions.
+Sophie's statement shows she is ready to start working on the standards, not waiting for instructions.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
index 6bfe09ba84..ae1a869316 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
@@ -38,7 +38,7 @@ Which sentence correctly uses the word `most`?
 
 ### --feedback--
 
-This sentence doesn’t use `most`
+This sentence doesn't use `most`
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
index 7362a4ba93..7d25f5a498 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
@@ -19,7 +19,7 @@ What is Tom asking Sophie about?
 
 ## --answers--
 
-Sophie’s opinion on work.
+Sophie's opinion on work.
 
 ### --feedback--
 
@@ -39,7 +39,7 @@ The focus is on breaks during work, not after work.
 
 ---
 
-Sophie’s favorite coffee.
+Sophie's favorite coffee.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
index 94af1e52c7..01ae346929 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
@@ -7,7 +7,7 @@ dashedName: task-22
 
 # --description--
 
-Understanding someone’s routine, like their lunch habits, involves paying attention to specific details in the conversation.
+Understanding someone's routine, like their lunch habits, involves paying attention to specific details in the conversation.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
index 02f0b2bf39..a461998c74 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
@@ -33,7 +33,7 @@ For helping him with a project.
 
 ### --feedback--
 
-Helping with a project isn’t mentioned in this context.
+Helping with a project isn't mentioned in this context.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
index d97918e009..6cbdbc24a3 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
@@ -41,7 +41,7 @@ His favorite security equipment.
 
 ### --feedback--
 
-Equipment isn’t mentioned in Sophie's question.
+Equipment isn't mentioned in Sophie's question.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
index 210520379e..38d50d8972 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
@@ -27,7 +27,7 @@ Company rules suggest an external obligation, more suited to `have to`.
 
 ---
 
-`I have to make sure the security cameras work because I believe it’s crucial.`
+`I have to make sure the security cameras work because I believe it's crucial.`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
index da3c53934b..4a128ff905 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-68
 ---
 
-<!-- (audio) Jake: “Well, yeah, security is a top priority and I have to make sure everything goes as expected.” -->
+<!-- (audio) Jake: "Well, yeah, security is a top priority and I have to make sure everything goes as expected." -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
index 5f4fa4583b..9ad6479bab 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
@@ -9,7 +9,7 @@ dashedName: task-77
 
 A `policy` (in the plural, `policies`) is a principle or rule to guide decisions and achieve rational outcomes. Policies are often adopted by an organization to guide employees.
 
-For instance, `The company’s privacy policy protects client information.`
+For instance, `The company's privacy policy protects client information.`
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
index bb9c004796..8ca986ec69 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-75
 ---
 
-<!-- (audio) Linda: Hey, James. So what is the meaning of “compliance”. Can you tell me? -->
+<!-- (audio) Linda: Hey, James. So what is the meaning of "compliance". Can you tell me? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
index 846f6b5a6c..9a4dfb86bf 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
@@ -44,7 +44,7 @@ Deciding what tasks to do.
 
 ### --feedback--
 
-It’s about following set tasks, not personal choice.
+It's about following set tasks, not personal choice.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
index 828885fedd..50cf4e1ee6 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
@@ -15,7 +15,7 @@ Listen to the audio to answer the question below.
 
 ## --text--
 
-What is the meaning of Linda’s question?
+What is the meaning of Linda's question?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
index e67c513fb1..b0ca04bd0a 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
@@ -25,7 +25,7 @@ What is the difference between `every` and `any`?
 
 ### --feedback--
 
-`Every` is for all items, not just in questions.
+`Every` is for all items, not just in questions; `any` is for one, some, or all.
 
 ---
 
@@ -41,7 +41,7 @@ Both words have broader meanings than just one item.
 
 ### --feedback--
 
-`Every` means all, not none.
+`Every` means all, not none; `any` means one, some, or all.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
index be3c2f3dc0..fc5b8aa626 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-28
 ---
 
-<!-- (Audio) Linda: I've been a cyclist for more than 15 years. It's a love that hasn’t disappeared with time. -->
+<!-- (Audio) Linda: I've been a cyclist for more than 15 years. It's a love that hasn't disappeared with time. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
index 14d84bbb7b..1e6823153c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
@@ -39,7 +39,7 @@ This sentence is not correct. A correct usage would be `Would you like me to mak
 
 ### --feedback--
 
-In this context, `like` doesn’t require the ending `-s` The correct form is `Would you like a glass of water?`
+In this context, `like` doesn't require the ending `-s` The correct form is `Would you like a glass of water?`
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
index 575647375c..1bd877c467 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
@@ -31,7 +31,7 @@ Partial acceptance
 
 ### --feedback--
 
-It suggests agreeing partially, which doesn’t fit the intention of the phrase.
+It suggests agreeing partially, which doesn't fit the intention of the phrase.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
index 719f1b9258..06b41040fb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
@@ -35,7 +35,7 @@ She's hesitant to include Brian.
 
 ### --feedback--
 
-Sophie's tone doesn’t suggest hesitation, but rather openness and enthusiasm for his participation.
+Sophie's tone doesn't suggest hesitation, but rather openness and enthusiasm for his participation.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
index d4a4e08426..4abf0566c6 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-5
 ---
 
-<!-- (Audio) Brian: Well, we’re going to use a framework for the front-end, probably React. It's the technology we're most comfortable with, and it will make development faster. -->
+<!-- (Audio) Brian: Well, we're going to use a framework for the front-end, probably React. It's the technology we're most comfortable with, and it will make development faster. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
index 4704702936..06c8377e42 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
@@ -11,7 +11,7 @@ dashedName: task-6
 
 `Going to` can also be used when you have some evidence in the present that something will happen in the future.
 
-For example, `Look at those numbers! It's going to be a hard day.` or `They are going to feel upset if we don’t invite them to the meeting.`
+For example, `Look at those numbers! It's going to be a hard day.` or `They are going to feel upset if we don't invite them to the meeting.`
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
index 586a66b916..51494b0f8b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-8
 ---
 
-<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we’ll use Node.js. -->
+<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we'll use Node.js. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
index d894ea08ff..820593d21c 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-10
 ---
 
-<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we’ll use Node.js. It's a solid choice, and it will allow us to scale the application effectively. -->
+<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we'll use Node.js. It's a solid choice, and it will allow us to scale the application effectively. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
index df5755141a..5a4ceac21e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-15
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
@@ -21,7 +21,7 @@ An `audience` refers to the group of people who watch, read, or listen to someth
 
 ## --sentence--
 
-`I think we’re going to focus on social media marketing. It's BLANK, and it will BLANK a BLANK audience.`
+`I think we're going to focus on social media marketing. It's BLANK, and it will BLANK a BLANK audience.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
index 0a53e65703..f488a8e7e8 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-16
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
@@ -19,7 +19,7 @@ Which part of Sophie's sentence indicates that she is considering focusing on so
 
 ## --answers--
 
-`I think we’re going to focus on social media marketing.`
+`I think we're going to focus on social media marketing.`
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
index 7cc6a1ddcf..050e384d66 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-17
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
index 4729e65e55..19c49d572f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-20
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. Brian: That sounds good. I suggest that we also invest in email marketing. It's more targeted, and it will allow us to engage with our subscribers directly. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. Brian: That sounds good. I suggest that we also invest in email marketing. It's more targeted, and it will allow us to engage with our subscribers directly. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
index 75866cf814..5803fe49fe 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
@@ -11,7 +11,7 @@ dashedName: task-3
 
 The **Present Perfect Continuous tense** is used talk about actions or situations that started in the past and are still happening now. It is very useful when you want to emphasize the duration of an activity or that it is an ongoing process.
 
-Here’s how to form the **Present Perfect Continuous**: Subject + `has/have been` + `-ing` form of the verb. This tense is often used with expressions of time such as `for` and `since`. `For` is used with a period of time like two years or six months, while `since` is used with a specific point in time, like 2018 or this morning.
+Here's how to form the **Present Perfect Continuous**: Subject + `has/have been` + `-ing` form of the verb. This tense is often used with expressions of time such as `for` and `since`. `For` is used with a period of time like two years or six months, while `since` is used with a specific point in time, like 2018 or this morning.
 
 示例：
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
index c926609aa5..554e897708 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
@@ -23,7 +23,7 @@ She complains about the difficulty of learning them.
 
 ### --feedback--
 
-Sophie doesn’t mention any difficulty; she only expresses surprise at the number of programming languages.
+Sophie doesn't mention any difficulty; she only expresses surprise at the number of programming languages.
 
 ---
 
@@ -43,7 +43,7 @@ She ignores the comment and changes the subject.
 
 ### --feedback--
 
-Sophie directly responds to Brian’s observation by pointing out an interesting fact about programming languages.
+Sophie directly responds to Brian's observation by pointing out an interesting fact about programming languages.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
index e4d42ac923..9548d0d73f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
@@ -43,7 +43,7 @@ Who she was with when she spent the time
 
 ### --feedback--
 
-Brian’s question is specifically about the amount of time, not about who was with her.
+Brian's question is specifically about the amount of time, not about who was with her.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
index 35ed870331..a72ca4a7d0 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
@@ -35,7 +35,7 @@ Sophie actually indicates she has free time and chooses to spend much of it on a
 
 ---
 
-She doesn’t enjoy what she does in her free time.
+She doesn't enjoy what she does in her free time.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
index c1002d9aed..f722190c7f 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
@@ -23,7 +23,7 @@ Brian needs help finding Python, the snake.
 
 ### --feedback--
 
-Brian’s question is about Python the programming language, not a snake.
+Brian's question is about Python the programming language, not a snake.
 
 ---
 
@@ -35,7 +35,7 @@ Brian is looking for someone to teach him Python next week.
 
 ### --feedback--
 
-Brian’s request implies an immediate need for clarification on a specific question, not seeking a teacher for future lessons.
+Brian's request implies an immediate need for clarification on a specific question, not seeking a teacher for future lessons.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
index 984cbcffd5..4dc43a9b67 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
@@ -35,7 +35,7 @@ Sarah needs help installing her code.
 
 ### --feedback--
 
-The audio does not mention installation issues; it focuses on trouble with existing code and understanding what’s wrong.
+The audio does not mention installation issues; it focuses on trouble with existing code and understanding what's wrong.
 
 ---
 
@@ -43,7 +43,7 @@ Sarah is confident about fixing the code herself.
 
 ### --feedback--
 
-Sarah’s description of not being able to figure out the issue suggests she is not confident about resolving it on her own.
+Sarah's description of not being able to figure out the issue suggests she is not confident about resolving it on her own.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
index 8de618ca83..9ec6648a33 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-53
 ---
 
-<!-- (Audio) Tom: Depending on the IDE that you’re using, there are many extensions and plugins to use. -->
+<!-- (Audio) Tom: Depending on the IDE that you're using, there are many extensions and plugins to use. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
index 4d45b479d9..6934ab728e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-57
 ---
 
-<!-- (Audio) Tom: There are many debugging tools you can use. Depending on the IDE that you’re using, there are many extensions and plugins to use. They are super helpful. Sarah: I'll keep that in mind. Thanks, Tom. -->
+<!-- (Audio) Tom: There are many debugging tools you can use. Depending on the IDE that you're using, there are many extensions and plugins to use. They are super helpful. Sarah: I'll keep that in mind. Thanks, Tom. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
index 2fc64e245c..812e05036b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-66
 ---
 
-<!-- (Audio) Tom: I understand that there are classes and methods, but I’ve never used them in my code. -->
+<!-- (Audio) Tom: I understand that there are classes and methods, but I've never used them in my code. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
index 0714228145..bdad8fee67 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-67
 ---
 
-<!-- (Audio) Sarah: Object-oriented programming is used in many modern languages. How much do you know about it so far? Tom: Not much, really. I understand there are classes and methods, but I’ve never used them in my code. -->
+<!-- (Audio) Sarah: Object-oriented programming is used in many modern languages. How much do you know about it so far? Tom: Not much, really. I understand there are classes and methods, but I've never used them in my code. -->
 
 # --description--
 
@@ -31,11 +31,11 @@ Tom knows some things but hasn't tried them yet.
 
 ---
 
-Tom knows a lot about it but hasn’t used it.
+Tom knows a lot about it but hasn't used it.
 
 ### --feedback--
 
-Tom mentions understanding basic ideas like classes and methods, but he hasn’t used them, showing he knows a bit but not a lot.
+Tom mentions understanding basic ideas like classes and methods, but he hasn't used them, showing he knows a bit but not a lot.
 
 ---
 
@@ -43,7 +43,7 @@ Tom doesn't know anything about it.
 
 ### --feedback--
 
-Tom does know something because he talks about classes and methods, so he isn’t completely unfamiliar.
+Tom does know something because he talks about classes and methods, so he isn't completely unfamiliar.
 
 ## --video-solution--
 
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 53912865ad..b8dcdcfff8 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
@@ -33,7 +33,7 @@ A coworker asks for a report urgently and you reply, `No worries`, without provi
 
 ### --feedback--
 
-This use might imply indifference or dismissal without addressing the coworker’s urgent need, which is not appropriate.
+This use might imply indifference or dismissal without addressing the coworker's urgent need, which is not appropriate.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
index d45ebdf83f..ddcb2cd2f1 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
@@ -20,7 +20,7 @@ Sentences with the verb `to be` are often used to describe feelings and emotions
 
 ## --text--
 
-What does the expression `I’m happy` indicate in the present simple tense?
+What does the expression `I'm happy` indicate in the present simple tense?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
index cafcab1c1c..db56e41ddc 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
@@ -13,7 +13,7 @@ It's nice to have you here, Alice.
 
 # --description--
 
-`It’s nice to` is used to express a positive sentiment or feeling about something or someone.
+`It's nice to` is used to express a positive sentiment or feeling about something or someone.
 
 # --questions--
 
@@ -23,7 +23,7 @@ What is Bob expressing in his sentence?
 
 ## --answers--
 
-A negative opinion about Alice’s presence
+A negative opinion about Alice's presence
 
 ### --feedback--
 
@@ -31,7 +31,7 @@ Think about how the phrase `nice to` usually conveys positive feelings.
 
 ---
 
-A neutral statement about Alice’s presence
+A neutral statement about Alice's presence
 
 ### --feedback--
 
@@ -39,7 +39,7 @@ Consider the warmth usually conveyed by the phrase `nice to`.
 
 ---
 
-An apology for Alice’s presence
+An apology for Alice's presence
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ Reflect on the purpose of the phrase `nice to` in welcoming contexts.
 
 ---
 
-A positive and welcoming sentiment about Alice’s presence
+A positive and welcoming sentiment about Alice's presence
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
index 5f289b849f..32f8361e02 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
@@ -34,7 +34,7 @@ He is pleased with the current team members.
 
 ### --feedback--
 
-While this might be true, it doesn’t directly relate to the phrase about new members.
+While this might be true, it doesn't directly relate to the phrase about new members.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
index 4646ffc1e3..cc5891c43e 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
@@ -7,7 +7,7 @@ dashedName: task-33
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years. He makes sure our data is secure and efficient.
+This is John, the database administrator. He's been here for three years. He makes sure our data is secure and efficient.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
index b107b99704..668d6f75a4 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
@@ -7,7 +7,7 @@ dashedName: task-34
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years. He makes sure our data is secure and efficient.
+This is John, the database administrator. He's been here for three years. He makes sure our data is secure and efficient.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
index dea693525e..29a2a6eb35 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
@@ -7,7 +7,7 @@ dashedName: task-35
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years.
+This is John, the database administrator. He's been here for three years.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
index 30301f1e3e..0100804811 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
@@ -7,7 +7,7 @@ dashedName: task-36
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years.
+This is John, the database administrator. He's been here for three years.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
index a7e38103f4..920a48e980 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
@@ -7,7 +7,7 @@ dashedName: task-42
 
 <!--
 AUDIO REFERENCE:
-Everybody, let’s welcome Alice to the team.
+Everybody, let's welcome Alice to the team.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
index 293dc13f40..019bbdce77 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
@@ -7,7 +7,7 @@ dashedName: task-50
 
 <!--
 AUDIO REFERENCE:
-I'd like to introduce Lisa. She’s our new front-end developer.
+I'd like to introduce Lisa. She's our new front-end developer.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
index 4c0c43967b..0e1b862e7d 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
@@ -7,7 +7,7 @@ dashedName: task-58
 
 <!--
 AUDIO REFERENCE:
-Bob: Is there any specific area of design or development you're interested in? He’s your go-to guy for that.
+Bob: Is there any specific area of design or development you're interested in? He's your go-to guy for that.
 -->
 
 # --description--
@@ -20,7 +20,7 @@ For example, `He's the go-to guy for computer problems` means he is the person b
 
 ## --sentence--
 
-`Is there any BLANK area of design or development you're interested in? He’s your BLANK-to BLANK for that.`
+`Is there any BLANK area of design or development you're interested in? He's your BLANK-to BLANK for that.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
index 2db18719f9..868a16409b 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
@@ -7,7 +7,7 @@ dashedName: task-61
 
 <!--
 AUDIO REFERENCE:
-Bob: This is Tom, our new graphic designer. Is there any specific area of design or development you're interested in? He’s your go-to guy for that.
+Bob: This is Tom, our new graphic designer. Is there any specific area of design or development you're interested in? He's your go-to guy for that.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
index 7768777883..56277dd8ba 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
@@ -7,7 +7,7 @@ dashedName: task-64
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager.
+Bob: And I'm Bob, the team's project manager.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
index c26fda0327..eafc14ed67 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
@@ -7,7 +7,7 @@ dashedName: task-66
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager. I’m the person you always need to talk to if you have any questions about the team’s goals and schedule.
+Bob: And I'm Bob, the team's project manager. I'm the person you always need to talk to if you have any questions about the team's goals and schedule.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
index 0878b60d8a..f617ef9400 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
@@ -7,7 +7,7 @@ dashedName: task-67
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager. I’m the person you always need to talk to if you have any questions about the team’s goals and schedule.
+Bob: And I'm Bob, the team's project manager. I'm the person you always need to talk to if you have any questions about the team's goals and schedule.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
index b74e976b36..597beb2f90 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
@@ -7,7 +7,7 @@ dashedName: task-68
 
 <!--
 AUDIO REFERENCE:
-Lisa: Hi, Bob. It’s great to meet you too.
+Lisa: Hi, Bob. It's great to meet you too.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
index 71ee4c712f..35beb02fe6 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
@@ -7,7 +7,7 @@ dashedName: task-69
 
 <!--
 AUDIO REFERENCE:
-Bob: Excellent! Lisa, it’s great to have you join our team, even if just online.
+Bob: Excellent! Lisa, it's great to have you join our team, even if just online.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
index efa8ac5345..71af118d4d 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
@@ -7,7 +7,7 @@ dashedName: task-70
 
 <!--
 AUDIO REFERENCE:
-Bob: Excellent! Lisa, it’s great to have you join our team, even if just online.
+Bob: Excellent! Lisa, it's great to have you join our team, even if just online.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
index 94437caec1..d88c66f94d 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
@@ -7,7 +7,7 @@ dashedName: task-74
 
 <!--
 AUDIO REFERENCE:
-James: Good morning. I’m James and I’m here to help you with your training.
+James: Good morning. I'm James and I'm here to help you with your training.
 -->
 
 # --description--
@@ -18,7 +18,7 @@ Listen to the audio and fill in the missing words.
 
 ## --sentence--
 
-`I’m James and I’m BLANK to BLANK you with your BLANK.`
+`I'm James and I'm BLANK to BLANK you with your BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
index 7cf942fc3f..ec5afd0432 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
@@ -7,7 +7,7 @@ dashedName: task-75
 
 <!--
 AUDIO REFERENCE:
-James: Good morning. I’m James and I’m here to help you with your training.
+James: Good morning. I'm James and I'm here to help you with your training.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
index 57cb2df43b..53ec387ce7 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
@@ -7,7 +7,7 @@ dashedName: task-88
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
index d17861b90a..3c09b26e81 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
@@ -7,7 +7,7 @@ dashedName: task-89
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
index 3608932d8f..8ed1d6bfdb 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
@@ -7,7 +7,7 @@ dashedName: task-90
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
index 8d7879228a..46d15fb380 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
@@ -7,7 +7,7 @@ dashedName: task-91
 
 <!--
 AUDIO REFERENCE:
-David: Hey, Bob. How’s it going?
+David: Hey, Bob. How's it going?
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
index 2409dfaf7a..2cd8608c05 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
@@ -7,7 +7,7 @@ dashedName: task-94
 
 <!--
 AUDIO REFERENCE:
-Maria: And this is Linda, she’s our UX/UI designer. She works in user experience and she creates our interface design.
+Maria: And this is Linda, she's our UX/UI designer. She works in user experience and she creates our interface design.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
index 357caad275..2755c0e762 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
@@ -8,7 +8,7 @@ dashedName: task-97
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
index 03edc606d6..9d01733325 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
@@ -8,7 +8,7 @@ dashedName: task-98
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
@@ -20,7 +20,7 @@ David: I’ll be your point of contact and I’ll help make sure our collaborati
 
 ## --sentence--
 
-`I'll be your BLANK of contact and I’ll help make sure our BLANK is great.`
+`I'll be your BLANK of contact and I'll help make sure our BLANK is great.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
index 2942122d17..d0d5c04085 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
@@ -8,7 +8,7 @@ dashedName: task-99
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
index 04529a558d..5b466bce30 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
@@ -8,7 +8,7 @@ dashedName: task-100
 <!--
 AUDIO REFERENCE:
 
-"We’re excited about this project. I’m confident that we can achieve great results."
+"We're excited about this project. I'm confident that we can achieve great results."
 
 -->
 
diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
index 6f137204cd..c381505fa1 100644
--- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
+++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
@@ -8,7 +8,7 @@ dashedName: task-101
 <!--
 AUDIO REFERENCE:
 
-David: Wonderful to meet you all. I'm David, the project manager from FCC Corp. I’ll be your point of contact and I’ll help make sure our collaboration is great. We’re excited about this project. I’m confident that we can achieve great results.
+David: Wonderful to meet you all. I'm David, the project manager from FCC Corp. I'll be your point of contact and I'll help make sure our collaboration is great. We're excited about this project. I'm confident that we can achieve great results.
 
 -->
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
new file mode 100644
index 0000000000..ad2165f8fd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
@@ -0,0 +1,196 @@
+---
+id: 674f0332ec59564081ec8b87
+title: "Dialogue 1: Scheduled Maintenance to Prevent DoS Attacks"
+challengeType: 21
+dashedName: dialogue-1-scheduled-maintenance-to-prevent-dos-attacks
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-boardroom.png",
+   "characters": [
+     {
+       "character": "Jessica",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Brian",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jessica",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jessica",
+     "startTime": 1,
+     "finishTime": 4.62,
+     "dialogue": {
+       "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 5.08,
+     "finishTime": 7.26,
+     "dialogue": {
+       "text": "Are you going to be online during the scheduled maintenance?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 7.7,
+     "finishTime": 11.06,
+     "dialogue": {
+       "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 11.22,
+     "finishTime": 14.94,
+     "dialogue": {
+       "text": "We've been preparing for it all week. Are you planning to join us?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 15.34,
+     "finishTime": 16.66,
+     "dialogue": {
+       "text": "Yes, I will be joining you.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 16.74,
+     "finishTime": 21.22,
+     "dialogue": {
+       "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 21.8,
+     "finishTime": 23.22,
+     "dialogue": {
+       "text": "When do we expect the maintenance to start?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 23.7,
+     "finishTime": 27.04,
+     "dialogue": {
+       "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 27.44,
+     "finishTime": 29.94,
+     "dialogue": {
+       "text": "We'll be testing the server load to ensure it's stable.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 29.94,
+     "finishTime": 33.3,
+     "dialogue": {
+       "text": "Sounds good. Are the other developers going to help you with the tests?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 33.9,
+     "finishTime": 39.34,
+     "dialogue": {
+       "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 39.78,
+     "finishTime": 42.26,
+     "dialogue": {
+       "text": "Do you think we'll need to update the users about the downtime?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 43,
+     "finishTime": 46.94,
+     "dialogue": {
+       "text": "Yes, I'll send out a notification to our users letting them know about the maintenance window.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 47.26,
+     "finishTime": 49,
+     "dialogue": {
+       "text": "It's better to inform them in advance.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 49.66,
+     "finishTime": 53.56,
+     "dialogue": {
+       "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 54.06
+   },
+   {
+     "character": "Jessica",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 54.56
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
new file mode 100644
index 0000000000..475545274e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
@@ -0,0 +1,92 @@
+---
+id: 674f0495e5f4b0485ed38cd4
+title: Task 1
+challengeType: 22
+dashedName: task-1
+---
+
+<!-- (Audio) Jessica: Hey Brian, I heard we're running some tests on the website this weekend. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Brian, I heard we're running some BLANK on the BLANK this weekend.`
+
+## --blanks--
+
+`tests`
+
+### --feedback--
+
+This word in the plural form refers to activities or processes to check or evaluate something's performance or functionality.
+
+---
+
+`website`
+
+### --feedback--
+
+This word refers to an online location with related pages and content. It is something accessed using the internet.
+
+# --explanation--
+
+`Tests` are actions or procedures to check the quality, performance, or reliability of something. For example:
+
+`The team conducted tests to ensure the app doesn't crash.` - This means the team evaluated the app to make sure it works correctly without errors.
+
+`Website` is a collection of related web pages and content accessible on the internet. For example:
+
+`The company's website has information about their products and services.` - This means the company has an online platform where people can find details about what they offer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.62,
+      "dialogue": {
+        "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 5.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
new file mode 100644
index 0000000000..9cecd0b074
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
@@ -0,0 +1,52 @@
+---
+id: 674f06b4b4d6eb4f6139ad61
+title: Task 2
+challengeType: 19
+dashedName: task-2
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+What might be involved in website tests?
+
+## --answers--
+
+Checking for grammar errors in blog posts.
+
+### --feedback--
+
+This is important for content quality but is not typically the focus of website tests, which are more about functionality and performance.
+
+---
+
+Evaluating the website's speed and functionality.
+
+---
+
+Designing new web pages for a marketing campaign.
+
+### --feedback--
+
+While creating new designs is important, it is not directly part of testing a website's existing features or performance.
+
+---
+
+Uploading new images to the homepage.
+
+### --feedback--
+
+This is a content update task, not part of testing the website's performance or functionality.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Website tests usually involve evaluating aspects like speed, functionality, and user experience to ensure the site operates smoothly.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
new file mode 100644
index 0000000000..7c27bafece
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
@@ -0,0 +1,92 @@
+---
+id: 674f08fde55c2356b37e9b69
+title: Task 3
+challengeType: 22
+dashedName: task-3
+---
+
+<!-- (Audio) Jessica: Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are you BLANK be BLANK during the scheduled maintenance?`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+This phrase of two words is used to talk about plans or intentions for the future. It often indicates what someone is planning or expecting to do.
+
+---
+
+`online`
+
+### --feedback--
+
+This word means being connected to the internet or using a device that is connected. It is often used in the context of digital communication or activities.
+
+# --explanation--
+
+`Going to` is a phrase used to describe actions that will happen in the future or intentions someone has. For example:
+
+`She is going to start her new job next week.` - It means that she plans to begin her new job in the future.
+
+`Online` means being connected to the internet or using internet-based tools. For example:
+
+`The developer worked online to collaborate with the team using a shared coding platform.` - This means the developer used the internet to connect and work with others on a digital platform for coding tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.88,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 3.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
new file mode 100644
index 0000000000..6e1a0654c9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
@@ -0,0 +1,92 @@
+---
+id: 674f0afcd85abc5d478e150c
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Jessica: Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are you going to be online during the BLANK BLANK?`
+
+## --blanks--
+
+`scheduled`
+
+### --feedback--
+
+This word refers to something planned or arranged to happen at a specific time. It is often used in contexts where dates and times are set in advance.
+
+---
+
+`maintenance`
+
+### --feedback--
+
+This word refers to activities carried out to keep something in good condition or to fix issues.
+
+# --explanation--
+
+`Scheduled` means something has been planned or arranged to occur at a specific time. For example:
+
+`The scheduled meeting will start at 2 PM.` - This means that the meeting has been planned in advance to begin at the specified time.
+
+`Maintenance` refers to activities done to keep something functioning well or to fix any problems. For example:
+
+`The team performed maintenance on the server to ensure it runs smoothly.` - This means the team worked to keep the server in good condition by fixing or updating it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.88,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 3.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
new file mode 100644
index 0000000000..e53669607e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
@@ -0,0 +1,111 @@
+---
+id: 674f0d0dec2922641ce2c8e9
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Jessica: Hey Brian, I heard we're running some tests on the website this weekend. Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jessica want to know?
+
+## --answers--
+
+If Brian will update the website content.
+
+### --feedback--
+
+Jessica is not asking about making updates to the website content.
+
+---
+
+If Brian will manage the test results.
+
+### --feedback--
+
+Jessica does not mention anything about managing test results.
+
+---
+
+If Brian will schedule future tests.
+
+### --feedback--
+
+The scheduling of tests is not part of Jessica's question.
+
+---
+
+If Brian will be online during the maintenance planned in advance.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jessica's question is directly about Brian's availability online during the scheduled maintenance, not about tasks like updates, test management, or scheduling.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.62,
+      "dialogue": {
+        "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 5.08,
+      "finishTime": 7.26,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
new file mode 100644
index 0000000000..790466a2ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
@@ -0,0 +1,94 @@
+---
+id: 674f0f8e84b4c76c0f6ae6d3
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) Brian: Yes, I'll be monitoring the system to make sure everything goes smoothly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, BLANK be BLANK the system to make sure everything goes smoothly.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is a contraction of `I will`, used to indicate a decision or plan for the future.
+
+---
+
+`monitoring`
+
+### --feedback--
+
+This word means observing or keeping track of something, especially to ensure it is functioning correctly. It ends in `-ing`.
+
+# --explanation--
+
+`Monitoring` refers to observing or tracking the performance or status of something, usually to ensure it operates smoothly or to identify issues. For example:
+
+`The team is monitoring the servers to prevent downtime.` - This means the team is actively watching the servers to ensure they work without interruptions.
+
+The `Future Continuous` tense describes actions that will be ongoing at a specific point in the future. It is formed using `will be` + verb ending in `-ing`. For example:
+
+`The IT team will be troubleshooting the network issues tomorrow afternoon.` - This indicates that the IT team will actively work on fixing network problems during a particular time in the future.
+
+Brian uses the `Future Continuous` tense to show that he will be actively tracking the system's performance to ensure everything runs smoothly.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 6.5,
+      "finishTimestamp": 10.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
new file mode 100644
index 0000000000..73f3247701
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
@@ -0,0 +1,52 @@
+---
+id: 674f1a33acb7717de4842822
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses the `Future Continuous` tense?
+
+## --answers--
+
+`The team works on the project tomorrow morning.`
+
+### --feedback--
+
+This sentence uses the `Simple Present` tense, not the `Future Continuous` tense.
+
+---
+
+`The team will complete the project tomorrow.`
+
+### --feedback--
+
+This sentence is in the `Simple Future` tense, not the `Future Continuous` tense.
+
+---
+
+`The team will be working on the project tomorrow morning.`
+
+---
+
+`The team was working on the project yesterday.`
+
+### --feedback--
+
+This sentence is in the `Past Continuous` tense, not the `Future Continuous` tense.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The `Future Continuous` tense with the structure `will be` + verb ending in `-ing` describes actions that will be ongoing at a specific point in the future.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
new file mode 100644
index 0000000000..eeb64584d2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
@@ -0,0 +1,102 @@
+---
+id: 674f1ba48f50b78294f89089
+title: Task 8
+challengeType: 19
+dashedName: task-8
+---
+
+<!-- (Audio) Brian: Yes, I'll be monitoring the system to make sure everything goes smoothly. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will Brian be doing?
+
+## --answers--
+
+Check the system for bugs and errors.
+
+### --feedback--
+
+Although Brian may notice problems while monitoring, he does not specifically mention checking for bugs.
+
+---
+
+Observe the system to ensure it works well.
+
+---
+
+Install updates to improve system performance.
+
+### --feedback--
+
+Brian does not mention installing updates. His focus is on monitoring, not making changes.
+
+---
+
+Manage the system's security settings.
+
+### --feedback--
+
+While monitoring might include checking security, Brian is not talking specifically about managing security settings.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian says he will be `monitoring the system`, which means he will be keeping track of its performance to ensure it runs smoothly. This includes observing the system but does not specifically involve checking for bugs, installing updates, or managing security settings.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 6.5,
+      "finishTimestamp": 10.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
new file mode 100644
index 0000000000..61c35b670d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
@@ -0,0 +1,92 @@
+---
+id: 67504e15ec1851a15aad11c1
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) Brian: We've been preparing for it all week. Are you planning to join us? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We've been BLANK for it all week. Are you BLANK to join us?`
+
+## --blanks--
+
+`preparing`
+
+### --feedback--
+
+This word in the `-ing` form means getting ready for something or making necessary arrangements.
+
+---
+
+`planning`
+
+### --feedback--
+
+This word in the `-ing` form refers to deciding in advance what you want to do or arranging activities.
+
+# --explanation--
+
+`Preparing` means getting ready or making arrangements for something. For example:
+
+`The team has been preparing for the product launch all month.` - This means the team has been getting everything ready for the product launch to ensure it is successful.
+
+`Planning` refers to making decisions or arrangements about future activities. For example:
+
+`She is planning the layout for the new website.` - This means she is organizing and deciding how the website will look and function in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.02,
+      "finishTimestamp": 13.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.92,
+      "dialogue": {
+        "text": "We've been preparing for it all week. Are you planning to join us?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
new file mode 100644
index 0000000000..e4765e9cef
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
@@ -0,0 +1,88 @@
+---
+id: 675052373a1887aaa89c9a22
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: Are you planning to join us? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which might be the affirmative answer to Brian's question?
+
+## --answers--
+
+`Yes, I will be joining you.`
+
+---
+
+`No, I have other plans.`
+
+### --feedback--
+
+This is a negative response, not an affirmative one.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+An affirmative answer to the question confirms the intent to join. `Yes, I will be joining you.` uses `Future Continuous` tense showing that the speaker has a plan or intention to join the group at a particular time in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.7,
+      "finishTimestamp": 13.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.24,
+      "dialogue": {
+        "text": "Are you planning to join us?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 2.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
new file mode 100644
index 0000000000..9808c8f818
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
@@ -0,0 +1,113 @@
+---
+id: 67505766bad3bcbac2f16fe4
+title: Task 11
+challengeType: 22
+dashedName: task-11
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I will be joining you. I want to BLANK the new BLANK BLANK to prevent any potential DoS attacks.`
+
+## --blanks--
+
+`double-check`
+
+### --feedback--
+
+This means to check something again to make sure it is correct or complete. This is a compound word, remember to use `-`.
+
+---
+
+`security`
+
+### --feedback--
+
+This refers to measures taken to protect systems, networks, or data from harm or unauthorized access.
+
+---
+
+`features`
+
+### --feedback--
+
+This word in the plural form refers to the specific characteristics or components of something, such as a product or system.
+
+# --explanation--
+
+`Double-check` means to verify or check something again to ensure accuracy or correctness. For example:
+
+`I need to double-check the system settings before going live.` - It means you want to review the settings again to ensure everything is correct.
+
+`Security` refers to measures or practices that protect systems and data from threats. For example:
+
+`The company has implemented advanced security protocols to protect sensitive information.` - This means the company has set up strong protective measures to keep their data and systems safe.
+
+`Features` refer to the specific elements or components of a product, system, or service. For example:
+
+`The new software has many useful features, like an automatic backup system.` - This means the software has different tools or functions that make it more effective or valuable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
new file mode 100644
index 0000000000..68315f2fd1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
@@ -0,0 +1,101 @@
+---
+id: 67505903fa6affc0910b7a9d
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I will be joining you. I want to double-check the new security features to BLANK any potential BLANK.`
+
+## --blanks--
+
+`prevent`
+
+### --feedback--
+
+This verb means to stop something from happening or avoid it.
+
+---
+
+`DoS attacks`
+
+### --feedback--
+
+This phrase of two words means a system or network gets overloaded with too much traffic, making it unable to work properly or respond to real users. The first word is an acronym for `Denial of Service`.
+
+# --explanation--
+
+`Prevent` means to stop something from happening or to make sure it does not occur. For example:
+
+`The new software update will prevent unauthorized access to the system.` - This means that the update will stop unauthorized people from gaining access to the system.
+
+`DoS attacks` refer to Denial of Service attacks, which are attempts to make a computer or network service unavailable by overwhelming it with traffic. For example:
+
+`The website was temporarily offline due to a large-scale DoS attack.` - This means the website was made unavailable because it was overloaded with harmful traffic.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
new file mode 100644
index 0000000000..c3f3e0d248
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
@@ -0,0 +1,111 @@
+---
+id: 675106629f2c07cec9bf2c71
+title: Task 13
+challengeType: 19
+dashedName: task-13
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses the `Future Continuous` tense to describe what Jessica will do?
+
+## --answers--
+
+`I will double-check the new security features tomorrow.`
+
+### --feedback--
+
+This is `Simple Future` tense, not `Future Continuous` tense.
+
+---
+
+`I am double-checking the new security features tomorrow.`
+
+### --feedback--
+
+This is `Present Continuous` tense, not `Future Continuous` tense.
+
+---
+
+`I check the new security features tomorrow.`
+
+### --feedback--
+
+This is `Simple Present` tense, not `Future Continuous` tense.
+
+---
+
+`I will be double-checking the new security features tomorrow.`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The `Future Continuous` tense is used to describe an ongoing action that will happen in the future. Its structure is `will be` + verb ending in `-ing`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
new file mode 100644
index 0000000000..51f2fef67c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
@@ -0,0 +1,80 @@
+---
+id: 67510809633277d10d4fff4f
+title: Task 14
+challengeType: 22
+dashedName: task-14
+---
+
+<!-- (Audio) Jessica: When do we expect the maintenance to start? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`When do we BLANK the maintenance to start?`
+
+## --blanks--
+
+`expect`
+
+### --feedback--
+
+This word means to believe that something will happen in the future.
+
+# --explanation--
+
+`Expect` means to think that something will happen or to anticipate an event. For example:
+
+`We expect the meeting to begin at 10 AM.` - This means that you believe the meeting will start at 10 AM, based on plans or predictions.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.8,
+      "finishTimestamp": 22.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.42,
+      "dialogue": {
+        "text": "When do we expect the maintenance to start?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 2.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
new file mode 100644
index 0000000000..2a3fc67eda
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
@@ -0,0 +1,102 @@
+---
+id: 6751a781fd421fda55170fc8
+title: Task 15
+challengeType: 19
+dashedName: task-15
+---
+
+<!-- (Audio) Jessica: When do we expect the maintenance to start? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jessica want to know?
+
+## --answers--
+
+When the maintenance will start.
+
+---
+
+How long the maintenance will last.
+
+### --feedback--
+
+Jessica is not asking about the duration, but the start time.
+
+---
+
+Who is responsible for the maintenance.
+
+### --feedback--
+
+Jessica is asking about the start time, not the person in charge.
+
+---
+
+If the maintenance is necessary.
+
+### --feedback--
+
+Jessica is asking when the maintenance will start, not if it's necessary.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jessica is asking about the expected time the maintenance will begin.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.8,
+      "finishTimestamp": 22.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.42,
+      "dialogue": {
+        "text": "When do we expect the maintenance to start?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 2.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
new file mode 100644
index 0000000000..a6a925a83c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
@@ -0,0 +1,92 @@
+---
+id: 6751a827719c0fdb5b66b8e3
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) Brian: It's going to start around 2 AM and should last a couple of hours. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's going to start BLANK 2 AM and should last BLANK hours.`
+
+## --blanks--
+
+`around`
+
+### --feedback--
+
+This word means approximately or close to a specific time or amount.
+
+---
+
+`a couple of`
+
+### --feedback--
+
+This phrase of three words means two or a small number, typically more than one but not many.
+
+# --explanation--
+
+`Around` means approximately or near a certain time, place, or amount. For example:
+
+`The meeting will start around 10 AM.` - This means the meeting is expected to start at approximately 10 AM, but not exactly at that time.
+
+`A couple of` means two or a small number. For example:
+
+`We need a couple of days to finish the project.` - This means that the project will take about two days, but it could be slightly more in some contexts.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.5,
+      "finishTimestamp": 26.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
new file mode 100644
index 0000000000..48e3b6e09d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
@@ -0,0 +1,102 @@
+---
+id: 6751a990269891dd6f0ab1c2
+title: Task 17
+challengeType: 19
+dashedName: task-17
+---
+
+<!-- (Audio) Brian: It's going to start around 2 AM and should last a couple of hours. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+If the maintenance starts around 2 AM on December 5, what time does it most probably end?
+
+## --answers--
+
+Around 2:30 AM on December 5.
+
+### --feedback--
+
+The maintenance is expected to last longer than 30 minutes.
+
+---
+
+Around 4 AM on December 5.
+
+---
+
+Around 6 AM on December 5.
+
+### --feedback--
+
+The maintenance is not expected to last that long.
+
+---
+
+Around 2 AM on December 6.
+
+### --feedback--
+
+This is far beyond the estimated duration.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian says the maintenance will start around 2 AM on December 5. Adding `a couple of hours` (approximately 2) means it will most likely end around 4 AM.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.5,
+      "finishTimestamp": 26.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
new file mode 100644
index 0000000000..e9f44e8ead
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
@@ -0,0 +1,92 @@
+---
+id: 6751ab72ff11cae0021d02d8
+title: Task 18
+challengeType: 22
+dashedName: task-18
+---
+
+<!-- (Audio) Brian: We'll be testing the server load to ensure it's stable. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll be testing the BLANK BLANK to ensure it's stable.`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This refers to a computer or system that provides data, services, or resources to other devices.
+
+---
+
+`load`
+
+### --feedback--
+
+This refers to the amount of work or demand placed on a system or resource.
+
+# --explanation--
+
+`Server` refers to a powerful computer or system that provides services, data, or resources to other devices, often over a network. For example:
+
+`The server hosts the company's website.` - This means the server is responsible for storing and delivering the website's content to users who access it.
+
+`Load` refers to the amount of work, demand, or stress placed on a system or resource. For example:
+
+`The system crashed because it couldn't handle the high load during peak hours.` - This means the system became overwhelmed due to the large amount of demand placed on it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.24,
+      "finishTimestamp": 28.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.7,
+      "dialogue": {
+        "text": "We'll be testing the server load to ensure it's stable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
new file mode 100644
index 0000000000..67d7a30b74
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
@@ -0,0 +1,102 @@
+---
+id: 6751aca2701270e188b07df9
+title: Task 19
+challengeType: 19
+dashedName: task-19
+---
+
+<!-- (Audio) Brian: We'll be testing the server load to ensure it's stable. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will they be doing?
+
+## --answers--
+
+Replace the server with a new one.
+
+### --feedback--
+
+The focus is on testing the server, not replacing it.
+
+---
+
+Evaluate how much traffic the server can handle.
+
+---
+
+Back up all data on the server.
+
+### --feedback--
+
+Backing up data is important, but the task here is not about it.
+
+---
+
+Shut down the server to perform maintenance.
+
+### --feedback--
+
+Testing the server load does not require shutting it down.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Testing the server load involves evaluating how much traffic or demand the server can handle while remaining stable. This is different from replacing the server, backing up data, or shutting it down.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.24,
+      "finishTimestamp": 28.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.7,
+      "dialogue": {
+        "text": "We'll be testing the server load to ensure it's stable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
new file mode 100644
index 0000000000..986453b16c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
@@ -0,0 +1,102 @@
+---
+id: 6751ad79009d66e2f5878282
+title: Task 20
+challengeType: 19
+dashedName: task-20
+---
+
+<!-- (Audio) Jessica: Sounds good. Are the other developers going to help you with the tests? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jessica feel about the plan, and what does she want to know?
+
+## --answers--
+
+She is unsure about the plan and wants to know if it is finalized.
+
+### --feedback--
+
+Jessica thinks the plan is good and is not asking about whether it is finalized.
+
+---
+
+She agrees with the plan and wants to know if the other developers will assist.
+
+---
+
+She has concerns about the plan and wants to know if it will succeed.
+
+### --feedback--
+
+Jessica expresses no concerns about the plan's success.
+
+---
+
+She disagrees with the plan and wants to know if there are alternatives.
+
+### --feedback--
+
+Jessica clearly states `Sounds good`, showing agreement with the plan.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jessica says `Sounds good`, indicating that she agrees with the plan. She then asks if the other developers are going to assist, showing curiosity about who will be involved in the tests.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.94,
+      "finishTimestamp": 32.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Sounds good. Are the other developers going to help you with the tests?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 4.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
new file mode 100644
index 0000000000..cfa38f104c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
@@ -0,0 +1,92 @@
+---
+id: 6751aeb422ef45e4af25434d
+title: Task 21
+challengeType: 22
+dashedName: task-21
+---
+
+<!-- (Audio) Brian: Yes, they're going to run additional stress tests to ensure we don't have any unexpected issues. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, they're going to run additional BLANK to ensure we don't have any BLANK issues.`
+
+## --blanks--
+
+`stress tests`
+
+### --feedback--
+
+This phrase of two words refers to evaluations that push a system to its limits to check its performance under extreme conditions.
+
+---
+
+`unexpected`
+
+### --feedback--
+
+This means something that happens without warning or is not anticipated.
+
+# --explanation--
+
+`Stress tests` are evaluations designed to see how a system performs under high pressure or extreme conditions. For example:
+
+`The developers ran stress tests on the website to check its performance during peak traffic.` - This means the developers tested the website to ensure it could handle a large number of visitors at the same time.
+
+`Unexpected` means something unplanned or surprising. For example:
+
+`The system crashed due to unexpected behavior during the update.` - This means the system failed because of issues that were not anticipated during the update.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.7,
+      "finishTimestamp": 38.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.64,
+      "dialogue": {
+        "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
new file mode 100644
index 0000000000..e13611f690
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
@@ -0,0 +1,102 @@
+---
+id: 6751bc2826c791ea69d7e8f2
+title: Task 22
+challengeType: 19
+dashedName: task-22
+---
+
+<!-- (Audio) Brian: Yes, they're going to run additional stress tests to ensure we don't have any unexpected issues. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How will the other developers help?
+
+## --answers--
+
+They will fix bugs in the system.
+
+### --feedback--
+
+The audio does not mention fixing bugs.
+
+---
+
+They will update the system with new features.
+
+### --feedback--
+
+There is no mention of adding new features in the audio.
+
+---
+
+They will conduct more tests to evaluate the system's performance under pressure.
+
+---
+
+They will monitor the system without performing tests.
+
+### --feedback--
+
+The audio specifies that they will do something else, not just monitor the system.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The developers will assist by running additional stress tests, as stated in the audio. This is to ensure the system can handle high demand and avoid unexpected issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.7,
+      "finishTimestamp": 38.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.64,
+      "dialogue": {
+        "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
new file mode 100644
index 0000000000..ceb27c6152
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
@@ -0,0 +1,80 @@
+---
+id: 6751bd2301b9feebf3813ac3
+title: Task 23
+challengeType: 22
+dashedName: task-23
+---
+
+<!-- (Audio) Brian: Do you think we'll need to update the users about the downtime? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Do you think we'll need to update the users about the BLANK?`
+
+## --blanks--
+
+`downtime`
+
+### --feedback--
+
+This word refers to the period when a system or service is not available or functioning.
+
+# --explanation--
+
+`Downtime` means the period when a system, service, or device is unavailable or not working. For example:
+
+`The website experienced an hour of downtime due to server maintenance.` - This means the website could not be accessed for an hour because the server was being worked on.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 41.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Do you think we'll need to update the users about the downtime?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
new file mode 100644
index 0000000000..f71873f3b5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
@@ -0,0 +1,102 @@
+---
+id: 6751bdd2f78adbed1ea0fa51
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Brian: Do you think we'll need to update the users about the downtime? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Brian's concern?
+
+## --answers--
+
+If users need to be informed about the downtime.
+
+---
+
+If the downtime will last too long.
+
+### --feedback--
+
+Brian is not asking about the length of the downtime.
+
+---
+
+If the users will experience technical issues.
+
+### --feedback--
+
+Brian does not mention technical issues in his concern.
+
+---
+
+If the downtime will affect the server's performance.
+
+### --feedback--
+
+Brian's concern is not about the server's performance.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Brian is asking if they should update users about the downtime, showing his concern is about communication with the users rather than the length of downtime, technical issues, or server performance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 41.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Do you think we'll need to update the users about the downtime?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
new file mode 100644
index 0000000000..c01866159a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
@@ -0,0 +1,113 @@
+---
+id: 6751beb68c063aee92555abe
+title: Task 25
+challengeType: 22
+dashedName: task-25
+---
+
+<!-- (Audio) Jessica: Yes, I'll send out a notification to our users, letting them know about the maintenance window. It's better to inform them in advance. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I'll send out a BLANK to our users, letting them know about the BLANK. It's better to BLANK them in advance.`
+
+## --blanks--
+
+`notification`
+
+### --feedback--
+
+This word means a message or alert that gives information or warns about something.
+
+---
+
+`maintenance window`
+
+### --feedback--
+
+This phrase of two words refers to the scheduled time during which a system is unavailable for updates or repairs.
+
+---
+
+`inform`
+
+### --feedback--
+
+This word means to let someone know or share information with them.
+
+# --explanation--
+
+`Notification` refers to a message or alert sent to inform people about something important. For example:
+
+`We received a notification about the upcoming software update.` - This means a message was sent to alert users about the software update.
+
+`Maintenance window` is the scheduled time set aside for system updates, repairs, or tests. For example:
+
+`The website will be down during the maintenance window from 2 AM to 4 AM.` - This means the website will not be available while maintenance work is being done during the specified period.
+
+`Inform` means to share information or let someone know about something. For example:
+
+`The team will inform the users about the new feature rollout.` - This means the team will tell the users about the introduction of the new feature.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42,
+      "finishTimestamp": 48
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "Yes, I'll send out a notification to our users letting them know about the maintenance window.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 5.26,
+      "finishTime": 7,
+      "dialogue": {
+        "text": "It's better to inform them in advance.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
new file mode 100644
index 0000000000..f4b54aa48e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
@@ -0,0 +1,52 @@
+---
+id: 6752e404804c1c044c804b79
+title: Task 26
+challengeType: 19
+dashedName: task-26
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses `Future Continuous` tense to inform users about the maintenance in advance?
+
+## --answers--
+
+`We will perform maintenance on Friday night.`
+
+### --feedback--
+
+This sentence uses `Future Simple` tense rather than `Future Continuous` tense.
+
+---
+
+`We will be performing maintenance on Friday night.`
+
+---
+
+`Maintenance will be done on Friday night.`
+
+### --feedback--
+
+This sentence uses `Future Simple` tense instead of `Future Continuous` tense.
+
+---
+
+`We might do maintenance on Friday night.`
+
+### --feedback--
+
+This sentence uses `might` to indicate a possibility, not `Future Continuous` tense.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The `Future Continuous` tense describes an action that will be in progress at a specific time in the future. In this case, it refers to the maintenance that will occur on Friday night, letting users know about it ahead of time.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
new file mode 100644
index 0000000000..00662ffeea
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
@@ -0,0 +1,92 @@
+---
+id: 6752e54369231d06538b4ac0
+title: Task 27
+challengeType: 22
+dashedName: task-27
+---
+
+<!-- (Audio) Brian: Good idea. We don't want anyone getting frustrated because they can't access the site. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Good idea. We don't want anyone getting BLANK because they can't BLANK the site.`
+
+## --blanks--
+
+`frustrated`
+
+### --feedback--
+
+This means feeling annoyed or upset because something is not working as expected or desired.
+
+---
+
+`access`
+
+### --feedback--
+
+This means the ability to enter, use, or connect to something, such as a system or website.
+
+# --explanation--
+
+`Frustrated` means feeling annoyed, upset, or disappointed because of difficulties or obstacles. For example:
+
+`She was frustrated because the software kept crashing.` - This means she felt annoyed and upset because the software was not functioning properly.
+
+`Access` means the ability to use or connect to something, especially technology or information. For example:
+
+`The team couldn't access the server due to a network issue.` - This means the team was unable to connect to the server because of a problem with the network.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.46,
+      "finishTimestamp": 52.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
new file mode 100644
index 0000000000..b9d378b329
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
@@ -0,0 +1,102 @@
+---
+id: 6752e83a806f520923bd28fa
+title: Task 28
+challengeType: 19
+dashedName: task-28
+---
+
+<!-- (Audio) Jessica: It's better to inform them in advance. Brian: Good idea. We don't want anyone getting frustrated because they can't access the site. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Brian agree with Jessica's plan?
+
+## --answers--
+
+No, he thinks it's unnecessary to inform users in advance.
+
+### --feedback--
+
+Brian clearly agrees with Jessica's plan, calling it a `Good idea`.
+
+---
+
+Yes, he agrees that informing users in advance is a good idea.
+
+---
+
+No, he wants to inform users after the maintenance is complete.
+
+### --feedback--
+
+Brian supports informing users in advance, not afterward.
+
+---
+
+Yes, but he prefers a different approach to informing users.
+
+### --feedback--
+
+There is no indication in the audio that Brian suggests a different approach.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian's response, `Good idea`, shows he agrees with Jessica's plan to inform users in advance. He emphasizes the importance of avoiding user frustration by ensuring they are aware of the maintenance ahead of time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.46,
+      "finishTimestamp": 52.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
new file mode 100644
index 0000000000..a61f296074
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
@@ -0,0 +1,86 @@
+---
+id: 6752eb5797ad390c7f40ef08
+title: Task 29
+challengeType: 22
+dashedName: task-29
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`I'll`, `joining`, `monitoring`, `testing`, `be`, and `going`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jessica: Hey Brian, I heard we're running some tests on the website this weekend. Are you going to be online during the scheduled maintenance?`
+
+`Brian: Yes, I'll BLANK BLANK the system to make sure everything goes smoothly. We've been preparing for it all week. Are you planning to join us?`
+
+`Jessica: Yes, I will be BLANK you. I want to double-check the new security features to prevent any potential DoS attacks. When do we expect the maintenance to start?`
+
+`Brian: It's going to start around 2 AM and should last a couple of hours. We'll be BLANK the server load to ensure it's stable.`
+
+`Jessica: Sounds good. Are the other developers going to help you with the tests?`
+
+`Brian: Yes, they're BLANK to run additional stress tests to ensure we don't have any unexpected issues. Do you think we'll need to update the users about the downtime?`
+
+`Jessica: Yes, BLANK send out a notification to our users, letting them know about the maintenance window. It's better to inform them in advance.`
+
+`Brian: Good idea. We don't want anyone getting frustrated because they can't access the site.`
+
+## --blanks--
+
+`be`
+
+### --feedback--
+
+This word is a part of `Future Continuous` tense.
+
+---
+
+`monitoring`
+
+### --feedback--
+
+This word describes Brian's ongoing action of checking the system during the maintenance.
+
+---
+
+`joining`
+
+### --feedback--
+
+This word indicates Jessica's plan to participate in the maintenance.
+
+---
+
+`testing`
+
+### --feedback--
+
+This word describes the action of evaluating the server load during the maintenance.
+
+---
+
+`going`
+
+### --feedback--
+
+This word is part of `Simple Future` tense, describing the other developers' plans to run stress tests.
+
+---
+
+`I'll`
+
+### --feedback--
+
+This contraction refers to Jessica's intention to send a notification to users.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
new file mode 100644
index 0000000000..c659cbae06
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
@@ -0,0 +1,68 @@
+---
+id: 6752f4680f2d251372d4ae64
+title: Task 30
+challengeType: 19
+dashedName: task-30
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What is the main purpose of the maintenance?
+
+## --answers--
+
+To add new features to the website.
+
+### --feedback--
+
+The text does not mention adding new features.
+
+---
+
+To evaluate the system's security measures only.
+
+### --feedback--
+
+Although security measures are part of the process, the text mentions something else.
+
+---
+
+To improve the systems and ensure smooth performance.
+
+---
+
+To reduce downtime during peak hours.
+
+### --feedback--
+
+The text does not mention downtime during peak hours.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, pay attention to where the notification explains the primary goal of the maintenance.
+
+It specifically mentions improving system performance and ensuring everything runs smoothly.
+
+Look for the option that reflects these objectives.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
new file mode 100644
index 0000000000..18a44d3f34
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
@@ -0,0 +1,68 @@
+---
+id: 6752f6ebff95ee1781462c02
+title: Task 31
+challengeType: 19
+dashedName: task-31
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What will the developers be doing during the maintenance?
+
+## --answers--
+
+Running stress tests and double-checking security features.
+
+---
+
+Adding new functionalities to the website.
+
+### --feedback--
+
+The text does not mention adding new functionalities.
+
+---
+
+Monitoring user activity on the website.
+
+### --feedback--
+
+The text does not focus on monitoring user activity.
+
+---
+
+Fixing issues reported by customers.
+
+### --feedback--
+
+Fixing customer issues is not mentioned as part of the maintenance.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find the correct answer, focus on where the notification details the tasks the developers will be performing during maintenance.
+
+It mentions specific actions like running stress tests and double-checking security features.
+
+Choose the option that includes these activities.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
new file mode 100644
index 0000000000..a9f52b0c4a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
@@ -0,0 +1,66 @@
+---
+id: 6752fb3e6257c91b93721288
+title: Task 32
+challengeType: 19
+dashedName: task-32
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What is the expected duration of the maintenance?
+
+## --answers--
+
+About 30 minutes.
+
+### --feedback--
+
+The text mentions that the maintenance will last longer than 30 minutes.
+
+---
+
+About 1 hour.
+
+### --feedback--
+
+The expected duration is not mentioned as 1 hour.
+
+---
+
+About 2 hours.
+
+---
+
+All day.
+
+### --feedback--
+
+The text does not specify an all-day maintenance.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, refer to the part of the notification where the duration of the maintenance is mentioned.
+
+It explicitly states that the maintenance is expected to last about 2 hours, so look for the option that matches this information.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
new file mode 100644
index 0000000000..8f1c54019e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
@@ -0,0 +1,66 @@
+---
+id: 6752fb92ecc7811d3a0f3320
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What does the text suggest about potential downtime?
+
+## --answers--
+
+Downtime will last all night.
+
+### --feedback--
+
+The text does not state that downtime will last all night; it mentions a maintenance window of 2 hours.
+
+---
+
+Downtime may occur during the maintenance period.
+
+---
+
+There will be no downtime at all.
+
+### --feedback--
+
+The text warns users that the website may experience downtime.
+
+---
+
+Downtime will occur during peak hours.
+
+### --feedback--
+
+The text specifies that the maintenance is scheduled for late at night, not during peak hours.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, look at the part of the notification that discusses downtime.
+
+It highlights that the website may experience downtime during the maintenance period, making this a key detail to identify the correct option.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
new file mode 100644
index 0000000000..8da5cbbdcb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
@@ -0,0 +1,68 @@
+---
+id: 6752fc06607eba1e73a89929
+title: Task 34
+challengeType: 19
+dashedName: task-34
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+Why was this notification published?
+
+## --answers--
+
+To explain the purpose of the website.
+
+### --feedback--
+
+The text does not focus on informing users about the purpose of the website.
+
+---
+
+To inform users in advance about the scheduled maintenance.
+
+---
+
+To announce new features for the website.
+
+### --feedback--
+
+The text does not mention new features.
+
+---
+
+To warn users about a system failure.
+
+### --feedback--
+
+The text is not about a system failure.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, consider the purpose of the notification.
+
+It clearly states that it is being published to inform users about the maintenance in advance.
+
+Look for the option that matches this intention.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
new file mode 100644
index 0000000000..69176c51a1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
@@ -0,0 +1,232 @@
+---
+id: 675948c97c0d4fd3d596960a
+title: "Dialogue 2: Troubleshooting Authentication Errors"
+challengeType: 21
+dashedName: dialogue-2-troubleshooting-authentication-errors
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Alice",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Mark",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-2.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Alice",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Mark",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Alice",
+     "startTime": 1,
+     "finishTime": 4.7,
+     "dialogue": {
+       "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 5.6,
+     "finishTime": 9.16,
+     "dialogue": {
+       "text": "Yes, we have. Some users are complaining that they can't log in.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 9.38,
+     "finishTime": 11.02,
+     "dialogue": {
+       "text": "Did you figure out what's causing the problem?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 11.46,
+     "finishTime": 13.44,
+     "dialogue": {
+       "text": "I think it's related to our session management.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 13.76,
+     "finishTime": 15.9,
+     "dialogue": {
+       "text": "The tokens aren't being refreshed properly, are they?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 16.32,
+     "finishTime": 17.62,
+     "dialogue": {
+       "text": "That seems to be the case.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 17.86,
+     "finishTime": 21.38,
+     "dialogue": {
+       "text": "The system is supposed to renew tokens every 30 minutes, isn't it?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 21.8,
+     "finishTime": 23.82,
+     "dialogue": {
+       "text": "Yes, it should, but something's going wrong.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 24.02,
+     "finishTime": 26.36,
+     "dialogue": {
+       "text": "Are you going to check the server logs to find out what happened?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 26.36,
+     "finishTime": 31.24,
+     "dialogue": {
+       "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 31.58,
+     "finishTime": 34.88,
+     "dialogue": {
+       "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 34.98,
+     "finishTime": 36.1,
+     "dialogue": {
+       "text": "Will you help me with that?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 36.64,
+     "finishTime": 39.96,
+     "dialogue": {
+       "text": "Sure. We can do some tests on the staging server, can't we?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 40.54,
+     "finishTime": 42.86,
+     "dialogue": {
+       "text": "Yes, we can. That should give us more information.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 43.22,
+     "finishTime": 46.46,
+     "dialogue": {
+       "text": "By the way, have the support tickets been piling up because of this?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 47.8,
+     "finishTime": 51.06,
+     "dialogue": {
+       "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 51.48,
+     "finishTime": 53.86,
+     "dialogue": {
+       "text": "Absolutely. Let's work together to find a solution.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 54.16,
+     "finishTime": 56.06,
+     "dialogue": {
+       "text": "We don't want our users getting frustrated, do we?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 56.48,
+     "finishTime": 60.22,
+     "dialogue": {
+       "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 60.72
+   },
+   {
+     "character": "Alice",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 61.22
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
new file mode 100644
index 0000000000..e42b4a420d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
@@ -0,0 +1,80 @@
+---
+id: 67594c1c9c8fc90a8e6f2f75
+title: Task 35
+challengeType: 22
+dashedName: task-35
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Mark, we've been having some trouble with our BLANK, haven't we?`
+
+## --blanks--
+
+`user authentication`
+
+### --feedback--
+
+This phrase of two words refers to the process of verifying a user's identity to allow access to a system or resource.
+
+# --explanation--
+
+`User authentication` is the process of verifying that a user is who they claim to be. It typically involves entering a username and password, scanning a fingerprint, or using another method to confirm identity. For example:
+
+`Our company uses two-factor user authentication. Users must enter their password and a code sent to their phone to log in.` - This means that the company adds an extra layer of security by requiring users to provide two separate pieces of information — a password and a code — to verify their identity and gain access to the system.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
new file mode 100644
index 0000000000..0fa629ecba
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
@@ -0,0 +1,94 @@
+---
+id: 67594e4ad681381278cee337
+title: Task 36
+challengeType: 22
+dashedName: task-36
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Mark, we've been having some trouble with our user authentication, BLANK BLANK?`
+
+## --blanks--
+
+`haven't`
+
+### --feedback--
+
+This word is the negative form of `have` used in a tag question. It matches the `Present Perfect` tense in the sentence.
+
+---
+
+`we`
+
+### --feedback--
+
+This word is the subject of the tag question, matching the subject of the main sentence.
+
+# --explanation--
+
+Tag questions are short questions added to the end of a sentence. They are used to confirm information or ask for agreement. A tag question includes a helping verb and a pronoun that matches the subject of the main sentence. The verb in the tag question must match the verb tense of the main sentence.
+
+`Haven't` and `hasn't` are negative contractions of `have` and `has`, used in tag questions to confirm or check information.
+
+Use `haven't` when the subject is plural (like `we` or `they`) or when the subject is `I`. Use `hasn't` when the subject is singular (like `he`, `she`, or `it`). For example:
+
+- `We've been working hard, haven't we?` - The main sentence uses `we've` (`we have`), so the tag question uses `haven't we?` to confirm the statement.
+
+- `She's finished her report, hasn't she?` - The main sentence uses `she's` (`she has`), so the tag question uses `hasn't she?` to confirm the statement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
new file mode 100644
index 0000000000..6e1f0f7113
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
@@ -0,0 +1,102 @@
+---
+id: 675950eed633ac1ac3884471
+title: Task 37
+challengeType: 19
+dashedName: task-37
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice mean, and how does she convey this meaning?
+
+## --answers--
+
+She means everything is fine, and she conveys this by asking a direct question.
+
+### --feedback--
+
+Alice mentions having trouble, so this doesn't match her statement.
+
+---
+
+She means there is a problem with user authentication, and she conveys this by giving a detailed explanation.
+
+### --feedback--
+
+Alice doesn't give a detailed explanation; she uses a tag question to confirm the issue.
+
+---
+
+She means there is an issue with user authentication, and she conveys this using a tag question.
+
+---
+
+She means she needs Mark's help, and she conveys this by giving him instructions.
+
+### --feedback--
+
+Alice is not asking for help or giving instructions; she is highlighting a shared concern using a tag question.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Alice means there is a problem with their user authentication system. She uses a tag question (`haven't we?`) to involve Mark in the conversation and confirm that he is aware of the issue. Tag questions are a polite way to confirm shared understanding or agreement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
new file mode 100644
index 0000000000..821a5b7449
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
@@ -0,0 +1,52 @@
+---
+id: 675961ce80a70e23e933fa8c
+title: Task 38
+challengeType: 19
+dashedName: task-38
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which option correctly uses `haven't` or `hasn't` in a tag question?
+
+## --answers--
+
+`She's completed the report, haven't she?`
+
+### --feedback--
+
+`Has` is used in the main sentence, so the tag question should be `hasn't she?`.
+
+---
+
+`We've been waiting for hours, hasn't we`
+
+### --feedback--
+
+`Have` is used in the main sentence, so the tag question should be `haven't we?`.
+
+---
+
+`They've solved the issue, hasn't they?`
+
+### --feedback--
+
+`Have` is used in the main sentence, so the tag question should be `haven't they?`.
+
+---
+
+`You've checked the logs, haven't you?`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Tag questions must match the auxiliary verb in the main sentence. Use `haven't` when the main sentence uses `have`. Use `hasn't` when the main sentence uses `has`.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
new file mode 100644
index 0000000000..e0ec293569
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
@@ -0,0 +1,88 @@
+---
+id: 675963eadf3bcf2ae50f74fe
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct affirmative reply to Alice's question?
+
+## --answers--
+
+`No, we haven't.`
+
+### --feedback--
+
+This reply contradicts Alice's statement, as she is confirming there has been trouble.
+
+---
+
+`Yes, we have.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Alice uses a tag question to confirm that they have been experiencing trouble with their user authentication. The correct reply, `Yes, we have`, agrees with and confirms her statement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
new file mode 100644
index 0000000000..52bd54cf43
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
@@ -0,0 +1,80 @@
+---
+id: 675966e572894133e1b3b275
+title: Task 40
+challengeType: 22
+dashedName: task-40
+---
+
+<!-- (audio) Mark: Yes, we have. Some users are complaining that they can't log in. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we have. Some users are BLANK that they can't log in.`
+
+## --blanks--
+
+`complaining`
+
+### --feedback--
+
+This word in the `-ing` form means saying someone is unhappy or upset about something.
+
+# --explanation--
+
+The word `complaining` is the `Present Participle` form of the verb `complain`. It means to express dissatisfaction, annoyance, or a problem about something. For example:
+
+`The customer is complaining about the delay in service.` - It means that the customer is expressing unhappiness about the late service.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.2,
+      "finishTimestamp": 8.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.76,
+      "dialogue": {
+        "text": "Yes, we have. Some users are complaining that they can't log in.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
new file mode 100644
index 0000000000..2fd2cc9bf9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
@@ -0,0 +1,102 @@
+---
+id: 6759a3d84d89c4474d6a06b6
+title: Task 41
+challengeType: 19
+dashedName: task-41
+---
+
+<!-- (audio) Mark: Yes, we have. Some users are complaining that they can't log in. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the trouble that Mark mentions?
+
+## --answers--
+
+Users are unhappy with the design of the system.
+
+### --feedback--
+
+Mark does not mention the design; he talks about a specific issue.
+
+---
+
+Some users cannot log in.
+
+---
+
+The system is running too slowly.
+
+### --feedback--
+
+Mark does not mention the system's speed; the issue is about something else.
+
+---
+
+Users are unable to reset their passwords.
+
+### --feedback--
+
+Mark does not mention password resets; he specifically refers to something else.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark clearly says that the problem is with certain users being unable to access the system due to login issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.2,
+      "finishTimestamp": 8.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.76,
+      "dialogue": {
+        "text": "Yes, we have. Some users are complaining that they can't log in.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
new file mode 100644
index 0000000000..a1aea7722f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
@@ -0,0 +1,102 @@
+---
+id: 6759a570761b794ba1dc57e5
+title: Task 42
+challengeType: 19
+dashedName: task-42
+---
+
+<!-- (audio) Mark: Did you figure out what's causing the problem? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark want to know?
+
+## --answers--
+
+If the cause of the problem has been identified.
+
+---
+
+If the problem has been fixed.
+
+### --feedback--
+
+Mark is not asking whether the problem is fixed.
+
+---
+
+What steps were taken to solve the problem.
+
+### --feedback--
+
+Mark is not asking about the steps taken.
+
+---
+
+If there will be future problems.
+
+### --feedback--
+
+Mark is focusing on the current issue, not on potential future problems.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Mark's question shows he is specifically interested in identifying the cause of the issue, rather than focusing on its resolution or future concerns.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.18,
+      "finishTimestamp": 10.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 2.64,
+      "dialogue": {
+        "text": "Did you figure out what's causing the problem?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 3.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
new file mode 100644
index 0000000000..2bbc6c3b21
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
@@ -0,0 +1,92 @@
+---
+id: 6759a679b6934850b6b0a31d
+title: Task 43
+challengeType: 22
+dashedName: task-43
+---
+
+<!-- (audio) Alice: I think it's related to our session management. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I think it's related to our BLANK BLANK.`
+
+## --blanks--
+
+`session`
+
+### --feedback--
+
+This word refers to a period of time during which a user interacts with a system.
+
+---
+
+`management`
+
+### --feedback--
+
+This word refers to the process of handling or organizing something.
+
+# --explanation--
+
+The word `session` refers to a specific period during which a user interacts with a system or application. For example:
+
+`The user's session timed out after 30 minutes of inactivity.` - This means that the system ended the user's active connection because they did not perform any actions for 30 minutes.
+
+The word `management` means the process of handling, controlling, or organizing something. For example:
+
+`Good management of resources is essential for project success.` - This sentence highlights the importance of planning and organizing resources effectively to ensure the success of a project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.26,
+      "finishTimestamp": 13.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 2.98,
+      "dialogue": {
+        "text": "I think it's related to our session management.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
new file mode 100644
index 0000000000..6f45bd2477
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
@@ -0,0 +1,92 @@
+---
+id: 6759a7cc60ea94557c578ed4
+title: Task 44
+challengeType: 22
+dashedName: task-44
+---
+
+<!-- (audio) Alice: The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The BLANK aren't being BLANK properly, are they?`
+
+## --blanks--
+
+`tokens`
+
+### --feedback--
+
+This word in the plural form refers to small pieces of information used to authenticate or identify users in a system.
+
+---
+
+`refreshed`
+
+### --feedback--
+
+This word ended with `-ed` means updated or renewed to ensure that something continues to function.
+
+# --explanation--
+
+The word `tokens` refers to pieces of information, often in digital form, that are used in authentication systems to verify or identify a user. For example:
+
+`The system uses tokens to verify each user's session.` - This means the system relies on pieces of information as a secure way to confirm that a user is authorized to access specific resources or continue a session.
+
+The word `refreshed` means updated or renewed to ensure continued validity or functionality. For example:
+
+`The page was refreshed to display the latest updates.` - In this case, `refreshed` means the page was reloaded to show new or updated information, ensuring that the user sees the most current version of the content.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.36,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.14,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.64
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
new file mode 100644
index 0000000000..528025cf73
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
@@ -0,0 +1,90 @@
+---
+id: 6759a98f5028cb5bdf0a6f4b
+title: Task 45
+challengeType: 22
+dashedName: task-45
+---
+
+<!-- (audio) Alice: The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The tokens aren't being refreshed properly, BLANK BLANK?`
+
+## --blanks--
+
+`are`
+
+### --feedback--
+
+This word is part of the tag question and matches `aren't` from the main sentence.
+
+---
+
+`they`
+
+### --feedback--
+
+This word refers to the subject `tokens` in the main sentence and ensures the tag question agrees with it.
+
+# --explanation--
+
+Tag questions are negative if the main sentence is positive, and positive if the main sentence is negative.
+
+The phrase `are they?` is a tag question added to the end of a negative sentence to confirm or check information. For example:
+
+`The updates aren't applied automatically, are they?` - Here, `are they?` checks for confirmation that updates are not being applied automatically. The main sentence is negative, so the tag question is positive.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.36,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.14,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.64
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
new file mode 100644
index 0000000000..87a1126580
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
@@ -0,0 +1,111 @@
+---
+id: 675beaae0511b83217778531
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- (audio) Alice: I think it's related to our session management. The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Alice explain the problem?
+
+## --answers--
+
+She thinks the problem is with how the session management is working, especially the way the tokens are not being updated correctly.
+
+---
+
+She thinks the problem is with the design of the tokens.
+
+### --feedback--
+
+Alice does not talk about the design of the tokens.
+
+---
+
+She thinks the problem is with the login process.
+
+### --feedback--
+
+Alice does not mention the login process.
+
+---
+
+She thinks the problem is caused by the network connection.
+
+### --feedback--
+
+Alice does not mention the network connection.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Alice's statement shows that the issue is about session management, particularly how the system handles refreshing the tokens.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.26,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 2.98,
+      "dialogue": {
+        "text": "I think it's related to our session management.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.3,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
new file mode 100644
index 0000000000..7ac906e65d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
@@ -0,0 +1,52 @@
+---
+id: 675d10fd9150e00d5ea464c2
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which of the following sentences uses a tag question correctly?
+
+## --answers--
+
+`The tokens are updated, are they?`
+
+### --feedback--
+
+Since the main sentence is positive, the tag question should be negative: `aren't they?`.
+
+---
+
+`The tokens are updated, aren't they?`
+
+---
+
+`The tokens are updated, are them?`
+
+### --feedback--
+
+The tag question must use the subject `they` instead of the object `them`. The correct form is `are they?`.
+
+---
+
+`The tokens are updated, do they?`
+
+### --feedback--
+
+`Do they?` is used for the verb `do`, not `are`. For a sentence with `are`, the correct tag question is `aren't they?`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In tag questions, when the main sentence is positive and the subject is plural (like `tokens`), you use a negative tag question, `aren't they?`. This confirms or checks the information. The other options do not follow the correct tag question structure.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
new file mode 100644
index 0000000000..c23a9e0f40
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
@@ -0,0 +1,92 @@
+---
+id: 675d1437a379f517d766a249
+title: Task 48
+challengeType: 22
+dashedName: task-48
+---
+
+<!-- (audio) Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That seems to be the case. The system is supposed to BLANK tokens every 30 minutes, BLANK?`
+
+## --blanks--
+
+`renew`
+
+### --feedback--
+
+It means to make something valid again or to refresh it.
+
+---
+
+`isn't it`
+
+### --feedback--
+
+These two words form a tag question that confirms or checks the information in the main sentence. The first word is contraction of `is not`.
+
+# --explanation--
+
+`Renew` means to refresh, extend, or restore something to its original condition. For example:
+
+`The subscription needs to renew every year.` - It means to extend or refresh the subscription to keep it active for another year, similar to how tokens need to be refreshed every 30 minutes.
+
+`Isn't it` is used in tag questions to confirm or check information. For example:
+
+`The UI is nice, isn't it?` - The main statement is positive, so the tag question is negative. It asks for confirmation that the UI is, indeed, nice.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 15.92,
+      "finishTimestamp": 21.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 6.26,
+      "dialogue": {
+        "text": "That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
new file mode 100644
index 0000000000..3e6fea5f4b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
@@ -0,0 +1,102 @@
+---
+id: 675d16180e3c3f1e843ed138
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- (audio) Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Mark further analyze the cause of the problem?
+
+## --answers--
+
+The system needs more time to update tokens.
+
+### --feedback--
+
+Mark's analysis does not mention more time being needed to update tokens. Instead, he discusses the specific action of token renewal every 30 minutes.
+
+---
+
+The system should not update tokens every 30 minutes.
+
+### --feedback--
+
+Mark mentions that the system is supposed to renew tokens every 30 minutes, so this answer does not reflect his analysis correctly.
+
+---
+
+The system is supposed to renew tokens every 30 minutes.
+
+---
+
+The system isn't working properly because of a bug.
+
+### --feedback--
+
+Mark doesn't mention a bug causing the issue. Instead, he is discussing the intended behavior of the system regarding token renewal.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Mark is explaining that the system is designed to renew tokens every 30 minutes. He is confirming whether the system is functioning as expected, rather than suggesting a different cause or problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 15.92,
+      "finishTimestamp": 21.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 6.26,
+      "dialogue": {
+        "text": "That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
new file mode 100644
index 0000000000..f6db41151f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
@@ -0,0 +1,97 @@
+---
+id: 675d177b1b7aca23c7f1b6d9
+title: Task 50
+challengeType: 22
+dashedName: task-50
+---
+
+<!-- (audio) Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, it should. But something's going wrong. Are you going to check the BLANK BLANK to find out what happened?`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This word refers to a computer system or software that provides data or services to other computers over a network.
+
+---
+
+`logs`
+
+### --feedback--
+
+It refers to records or files that automatically track events, processes, or activities on a system, such as error messages or system updates.
+
+# --explanation--
+
+`Logs` refer to recorded data that a system keeps to track events and actions. They are very helpful for finding out what happened during a process or diagnosing problems. For example:
+
+`The IT team checked the system logs to find out why the server crashed.` - Here, `logs` are used to track and record system activity, helping the team understand what caused the server failure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 21.6,
+      "finishTimestamp": 26.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.02,
+      "dialogue": {
+        "text": "Yes, it should, but something's going wrong.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.22,
+      "finishTime": 5.56,
+      "dialogue": {
+        "text": "Are you going to check the server logs to find out what happened?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
new file mode 100644
index 0000000000..b1d9ebb8be
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
@@ -0,0 +1,111 @@
+---
+id: 675d18c725ee4928ba83fa7c
+title: Task 51
+challengeType: 19
+dashedName: task-51
+---
+
+<!-- (audio) Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice ask about?
+
+## --answers--
+
+If the server logs are being checked to understand the problem.
+
+### --feedback--
+
+Alice asks if the server logs will be checked, not if they are already being checked.
+
+---
+
+If something is going wrong with the server.
+
+### --feedback--
+
+Alice mentions that something is going wrong, but her main question is about checking the server logs, not just the problem.
+
+---
+
+If the server logs contain useful information.
+
+### --feedback--
+
+Alice's question is about whether the server logs will be checked, not whether they contain useful information.
+
+---
+
+If the server logs will be checked to find out what happened.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice is asking whether the server logs will be checked to investigate what caused the issue. The focus is on reviewing the logs to find out what happened.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 21.6,
+      "finishTimestamp": 26.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.02,
+      "dialogue": {
+        "text": "Yes, it should, but something's going wrong.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.22,
+      "finishTime": 5.56,
+      "dialogue": {
+        "text": "Are you going to check the server logs to find out what happened?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
new file mode 100644
index 0000000000..0f233ccf84
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
@@ -0,0 +1,90 @@
+---
+id: 675d6e0e52e8ee2d7b2b69cf
+title: Task 52
+challengeType: 22
+dashedName: task-52
+---
+
+<!-- (audio) Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I already did. There's nothing BLANK in the logs. This is strange, BLANK it?`
+
+## --blanks--
+
+`unusual`
+
+### --feedback--
+
+This word means something that is not normal or expected.
+
+---
+
+`isn't`
+
+### --feedback--
+
+This is part of the tag question and is used to confirm or check information after a positive statement.
+
+# --explanation--
+
+`Unusual` means something that is not common, normal, or expected. It describes something out of the ordinary. For example:
+
+`It's unusual for him to be late for a meeting.` - It means that it is not normal or expected for the person to arrive late. It suggests that the behavior is out of the ordinary.
+
+`Isn't` is used in tag questions to confirm or check information. It's used after a positive statement using `is`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.26,
+      "finishTimestamp": 31.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
new file mode 100644
index 0000000000..99b9220e3d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
@@ -0,0 +1,103 @@
+---
+id: 675d6f815fb6c83276d12870
+title: Task 53
+challengeType: 19
+dashedName: task-53
+---
+
+<!-- (audio) Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark find about the logs?
+
+## --answers--
+
+There are multiple errors in the logs.
+
+### --feedback--
+
+Mark does not mention finding errors in the logs.
+
+---
+
+The logs indicate a server crash.
+
+### --feedback--
+
+Mark does not mention any indication of a server crash.
+
+---
+
+There are no unexpected things in the logs.
+
+---
+
+The logs are missing important data.
+
+### --feedback--
+
+Mark does not say that data is missing.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Mark says, `There's nothing unusual in the logs.` This means he has reviewed the logs and found no unexpected or abnormal entries.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.26,
+      "finishTimestamp": 31.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
new file mode 100644
index 0000000000..8812758cf0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
@@ -0,0 +1,89 @@
+---
+id: 675d710fb8118237e416155a
+title: Task 54
+challengeType: 22
+dashedName: task-54
+---
+
+<!-- (audio) Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It is. Let's run a few more tests to see if we can BLANK the issue. Will you help me with that?`
+
+## --blanks--
+
+`replicate`
+
+### --feedback--
+
+The word means to copy or repeat something exactly.
+
+# --explanation--
+
+`Replicate` means to reproduce or repeat something, especially to test or confirm results. For example:
+
+`The scientists tried to replicate the experiment to confirm the results.` - It means the scientists tried to repeat the experiment under the same conditions to see if the same results occur.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.38,
+      "finishTimestamp": 35.9
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.4,
+      "finishTime": 5.52,
+      "dialogue": {
+        "text": "Will you help me with that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
new file mode 100644
index 0000000000..5bdba665a4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
@@ -0,0 +1,111 @@
+---
+id: 675d72320c09a53c1020e59d
+title: Task 55
+challengeType: 19
+dashedName: task-55
+---
+
+<!-- (audio) Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice suggest doing?
+
+## --answers--
+
+Stopping all tests and checking the logs again.
+
+### --feedback--
+
+Alice does not suggest stopping tests; she wants to run more tests to replicate the issue.
+
+---
+
+Running only one test to see if it works.
+
+### --feedback--
+
+Alice suggests running a few tests, not just one.
+
+---
+
+Ignoring the issue and waiting for more data.
+
+### --feedback--
+
+Alice wants to actively test and replicate the issue, not ignore it.
+
+---
+
+Running more tests to try to replicate the issue.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice says, `Let's run a few more tests to see if we can replicate the issue.` This means she is suggesting performing additional tests to reproduce the problem and understand it better.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.38,
+      "finishTimestamp": 35.9
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.4,
+      "finishTime": 5.52,
+      "dialogue": {
+        "text": "Will you help me with that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
new file mode 100644
index 0000000000..9e48e9028b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
@@ -0,0 +1,92 @@
+---
+id: 675d72b7d86e163e326979e5
+title: Task 56
+challengeType: 22
+dashedName: task-56
+---
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sure. We can do some tests on the BLANK, BLANK we?`
+
+## --blanks--
+
+`staging server`
+
+### --feedback--
+
+This phrase of two words means a separate environment used for testing changes before they go live. It mirrors the production server to ensure updates work as expected.
+
+---
+
+`can't`
+
+### --feedback--
+
+It is part of a tag question, used here to confirm or check agreement after a positive main statement using `can`.
+
+# --explanation--
+
+`Staging server` refers to a testing environment where changes to a system or application are tested before being implemented on the live, production server. For example:
+
+`We uploaded the new website features to the staging server for testing.` - In this sentence, `staging server` is the testing space used to ensure that the new website features function correctly before they go live.
+
+`Can't` in this context is part of a tag question. It follows a positive statement to confirm or check agreement in a polite or conversational way. For example:
+
+`We can finish the task today, can't we?` - In this sentence, the positive statement (`We can finish the task today`) is followed by the negative tag question (`can't we?`) to check for agreement or confirmation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
new file mode 100644
index 0000000000..7b5c89d8a0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
@@ -0,0 +1,102 @@
+---
+id: 675d7493249c24447ca9e166
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Mark agree with Alice?
+
+## --answers--
+
+Yes, he agrees with her suggestion.
+
+---
+
+No, he suggests doing something different.
+
+### --feedback--
+
+Mark is agreeing with Alice's suggestion and proposing to test on the staging server.
+
+---
+
+No, he thinks the issue cannot be tested.
+
+### --feedback--
+
+Mark agrees to do tests on the staging server, showing he believes the issue can be tested.
+
+---
+
+Yes, but only if they use the production server.
+
+### --feedback--
+
+Mark specifically mentions doing tests on the staging server, not the production server.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Mark's statement shows he agrees with Alice and suggests proceeding with testing in the staging environment.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
new file mode 100644
index 0000000000..174f44390b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
@@ -0,0 +1,52 @@
+---
+id: 675d86beee48ab4941767200
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence uses `can't` in a tag question correctly?
+
+## --answers--
+
+`We can fix this issue, can't they?`
+
+### --feedback--
+
+The subject of the main sentence is `we`, but the tag uses `they`, which is a mismatch.
+
+---
+
+`She can't help us, can't she?`
+
+### --feedback--
+
+The main sentence is negative, so the tag should be positive: `can she?`.
+
+---
+
+`We can finish the task today, can't we?`
+
+---
+
+`They can join the meeting later, can't she?`
+
+### --feedback--
+
+The subject of the main sentence is `they`, but the tag uses `she`, which does not match.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In tag questions, the subject and auxiliary verb in the tag must match the main sentence.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
new file mode 100644
index 0000000000..81638489b1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
@@ -0,0 +1,88 @@
+---
+id: 675d87ed627c734d9ee5c028
+title: Task 59
+challengeType: 19
+dashedName: task-59
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct affirmative answer to Mark's question?
+
+## --answers--
+
+`No, we can't.`
+
+### --feedback--
+
+This is a negative response, but Mark is seeking agreement for his suggestion.
+
+---
+
+`Yes, we can.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark's question, `can't we?`, is a tag question seeking confirmation. The correct affirmative answer is `Yes, we can`, to agree with his suggestion of doing tests on the staging server.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
new file mode 100644
index 0000000000..d4007e923e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
@@ -0,0 +1,101 @@
+---
+id: 675d88ce781849512cd7d426
+title: Task 60
+challengeType: 22
+dashedName: task-60
+---
+
+<!-- (audio) Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we can. That should give us more information. By the way, have the BLANK been BLANK because of this?`
+
+## --blanks--
+
+`support tickets`
+
+### --feedback--
+
+This phrase of two words refers to requests or reports submitted by users needing help or reporting issues to a support team. The second word is in the plural form.
+
+---
+
+`piling up`
+
+### --feedback--
+
+This phrase of two words means accumulating or increasing in number, often to an overwhelming amount. The first word is in `-ing` form.
+
+# --explanation--
+
+`Support tickets` are messages or requests sent by users to a support team to report problems or ask for assistance. For example:
+
+`The support team resolved over 50 support tickets this week.` - It means more than 50 issues reported by users were addressed by the support team.
+
+`Piling up` means accumulating or gathering in a large quantity, often more than expected or manageable. For example:
+
+`The homework assignments are piling up as the deadline approaches.` - This example highlights how the number of homework assignments is growing significantly, creating a sense of urgency or pressure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.14,
+      "finishTimestamp": 46.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "Yes, we can. That should give us more information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.78,
+      "finishTime": 7.12,
+      "dialogue": {
+        "text": "By the way, have the support tickets been piling up because of this?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 7.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
new file mode 100644
index 0000000000..feeccda8b8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
@@ -0,0 +1,111 @@
+---
+id: 675d8aabc2397c583c081ea9
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (audio) Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice want to know?
+
+## --answers--
+
+If the problem is resolved.
+
+### --feedback--
+
+Alice does not ask if the problem is resolved; she asks about the number of support tickets.
+
+---
+
+If users have stopped reporting issues.
+
+### --feedback--
+
+Alice is not asking if users stopped reporting issues; she asks if the support tickets are increasing.
+
+---
+
+If the support tickets have increased because of the problem.
+
+---
+
+If the support team is resolving the tickets quickly.
+
+### --feedback--
+
+Alice does not ask about the speed of resolving tickets; she asks if the number of tickets has grown.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Alice's question shows she wants to know if the number of support tickets has increased as a result of the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.14,
+      "finishTimestamp": 46.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "Yes, we can. That should give us more information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.78,
+      "finishTime": 7.12,
+      "dialogue": {
+        "text": "By the way, have the support tickets been piling up because of this?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 7.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
new file mode 100644
index 0000000000..c18ab2b4c5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
@@ -0,0 +1,92 @@
+---
+id: 675d8b482d5fa45b0226a891
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (audio) Mark: Unfortunately, yes. We need to resolve this quickly, don't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Unfortunately, yes. We need to BLANK this quickly, BLANK we?`
+
+## --blanks--
+
+`resolve`
+
+### --feedback--
+
+This word means to find a solution to a problem or deal with an issue effectively.
+
+---
+
+`don't`
+
+### --feedback--
+
+It is part of a tag question, used to confirm or check agreement after a positive main sentence.
+
+# --explanation--
+
+`Resolve` means to solve or fix a problem or situation. It implies taking action to address and settle an issue. For example:
+
+`The team worked hard to resolve the customer complaints.` - It indicates that the team took steps to solve the issues raised by customers.
+
+`Don't` in tag questions is used after a positive main sentence to seek agreement or confirmation in a polite or conversational way. For example:
+
+`We need to leave now, don't we?` - The main sentence is positive, and the tag question (`don't we?`) is used to confirm or check agreement about the urgency to leave.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 46.7,
+      "finishTimestamp": 50.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.86,
+      "dialogue": {
+        "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
new file mode 100644
index 0000000000..3360968cb7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
@@ -0,0 +1,102 @@
+---
+id: 675d8c5d1a1d775f78424011
+title: Task 63
+challengeType: 19
+dashedName: task-63
+---
+
+<!-- (audio) Mark: Unfortunately, yes. We need to resolve this quickly, don't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark say about the status of the support tickets?
+
+## --answers--
+
+The support tickets have already been resolved.
+
+### --feedback--
+
+Mark says they still need to resolve the support tickets quickly, which indicates they haven't been resolved yet.
+
+---
+
+The support tickets still need to be resolved.
+
+---
+
+The support tickets are not urgent.
+
+### --feedback--
+
+Mark emphasizes urgency by saying they need to resolve the support tickets quickly.
+
+---
+
+There is no mention of any support ticket.
+
+### --feedback--
+
+Mark emphasizes resolving the support tickets quickly, so he admits there are support tickets.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark says, `We need to resolve this quickly`, which indicates the support tickets are still there and require immediate attention.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 46.7,
+      "finishTimestamp": 50.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.86,
+      "dialogue": {
+        "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
new file mode 100644
index 0000000000..82f41cb2b8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
@@ -0,0 +1,52 @@
+---
+id: 675d8dfaad5f4765cbd8c013
+title: Task 64
+challengeType: 19
+dashedName: task-64
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence uses `don't` correctly in a tag question?
+
+## --answers--
+
+`She likes coffee, don't she?`
+
+### --feedback--
+
+The subject `she` requires `doesn't`, not `don't`.
+
+---
+
+`We need to resolve this quickly, don't we?`
+
+---
+
+`They know the answer, don't it?`
+
+### --feedback--
+
+The subject `they` requires `don't they`, not `don't it`.
+
+---
+
+`The system is working fine, don't it?`
+
+### --feedback--
+
+The subject `it` requires `doesn't`, not `don't`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Tag questions must match the subject and auxiliary verb of the main sentence.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
new file mode 100644
index 0000000000..5fa7d60824
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
@@ -0,0 +1,113 @@
+---
+id: 675d8eddf05fb469a75ef543
+title: Task 65
+challengeType: 22
+dashedName: task-65
+---
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. Let's work together to find a BLANK. We don't want our users getting BLANK, BLANK we?`
+
+## --blanks--
+
+`solution`
+
+### --feedback--
+
+It refers to an answer or way to fix a problem or difficulty.
+
+---
+
+`frustrated`
+
+### --feedback--
+
+It describes feeling annoyed or upset because something is not working as expected or taking too long.
+
+---
+
+`do`
+
+### --feedback--
+
+It is part of a tag question and is used here after a negative main sentence to confirm or check agreement.
+
+# --explanation--
+
+`Solution` means an answer or way to fix a problem. For example:
+
+`The engineers worked hard to find a solution to the network issue.` - It means the engineers worked hard to resolve the network problem.
+
+`Frustrated` describes a feeling of being upset or annoyed when something doesn't work or takes too long. For example:
+
+`The customers were frustrated by the long wait times.` - It describes the annoyance and dissatisfaction customers felt because of delays.
+
+`Do` in tag questions is used after a negative main sentence to confirm or check agreement. For example:
+
+`We don't need to leave now, do we?` - The main sentence is negative, and the tag (`do we?`) is positive, asking for confirmation in a conversational way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.88,
+      "finishTimestamp": 55.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Absolutely. Let's work together to find a solution.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.08,
+      "finishTime": 5.98,
+      "dialogue": {
+        "text": "We don't want our users getting frustrated, do we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
new file mode 100644
index 0000000000..fca818dd8c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
@@ -0,0 +1,111 @@
+---
+id: 675d91adb9fb7173f4a7a4c7
+title: Task 66
+challengeType: 19
+dashedName: task-66
+---
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice propose?
+
+## --answers--
+
+That they analyze the problem separately.
+
+### --feedback--
+
+Alice suggests working together, not separately.
+
+---
+
+That they stop working on the issue for now.
+
+### --feedback--
+
+Alice emphasizes finding a solution, not stopping work.
+
+---
+
+That they wait for users to report more problems.
+
+### --feedback--
+
+Alice wants to prevent users from getting frustrated, not wait for more problems.
+
+---
+
+That they work together to find a solution.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice's statement shows she is proposing a collaborative approach to resolving the issue.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "company2-center.png",
+     "characters": [
+       {
+         "character": "Alice",
+         "position": {
+           "x": 50,
+           "y": 0,
+           "z": 1.4
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-2.mp3",
+       "startTime": 1,
+       "startTimestamp": 51.28,
+       "finishTimestamp": 55.86
+     }
+   },
+   "commands": [
+     {
+       "character": "Alice",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Alice",
+       "startTime": 1,
+       "finishTime": 3.38,
+       "dialogue": {
+         "text": "Absolutely. Let's work together to find a solution.",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Alice",
+       "startTime": 3.68,
+       "finishTime": 5.58,
+       "dialogue": {
+         "text": "We don't want our users getting frustrated, do we?",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Alice",
+       "opacity": 0,
+       "startTime": 6.08
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
new file mode 100644
index 0000000000..ca19f996d6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
@@ -0,0 +1,97 @@
+---
+id: 675e6dfe0160bb66faa60a68
+title: Task 67
+challengeType: 19
+dashedName: task-67
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct negative answer to Alice's question?
+
+## --answers--
+
+`No, we don't.`
+
+---
+
+`Yes, we don't.`
+
+### --feedback--
+
+This is not grammatically correct as a negative response.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Alice's question expects a confirmation. The correct negative answer is `No, we don't`, to agree that they don't want users to get frustrated.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.88,
+      "finishTimestamp": 55.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Absolutely. Let's work together to find a solution.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.08,
+      "finishTime": 5.98,
+      "dialogue": {
+        "text": "We don't want our users getting frustrated, do we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
new file mode 100644
index 0000000000..40d5986e5b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
@@ -0,0 +1,80 @@
+---
+id: 675e6f0bf7f7eb69ddffef81
+title: Task 68
+challengeType: 22
+dashedName: task-68
+---
+
+<!-- (audio) Mark: No, we don't. Okay, let's get to work and see if we can sort this out. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`No, we don't. Okay, let's get to work and see if we can BLANK.`
+
+## --blanks--
+
+`sort this out`
+
+### --feedback--
+
+This phrase of three words means to solve a problem or deal with a difficult situation.
+
+# --explanation--
+
+`Sort this out` means to solve or fix a specific problem. It is a casual way of saying `figure out a solution` or `resolve an issue`. The general phrase `sort out` can also be used more broadly for organizing or dealing with problems. For example:
+
+`We need to sort out the issues with the payment system before launch.` - It means you need to fix or resolve the problems with the payment system to ensure everything works correctly before launching it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 56.08,
+      "finishTimestamp": 60.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.44
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
new file mode 100644
index 0000000000..7bdf7263b2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
@@ -0,0 +1,102 @@
+---
+id: 675e70d7b854926d7f18693c
+title: Task 69
+challengeType: 19
+dashedName: task-69
+---
+
+<!-- (audio) Mark: No, we don't. Okay, let's get to work and see if we can sort this out. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Mark agree with Alice?
+
+## --answers--
+
+No, he wants to stop working on the issue.
+
+### --feedback--
+
+Mark does not suggest stopping work. He is ready to address the issue and work on a solution.
+
+---
+
+Yes, he agrees and is ready to work on the solution.
+
+---
+
+No, he disagrees and wants to work on something else.
+
+### --feedback--
+
+Mark agrees with Alice's suggestion to solve the issue and does not propose working on something else.
+
+---
+
+Yes, but he wants Alice to handle it alone.
+
+### --feedback--
+
+Mark does not suggest that Alice handle it alone. He shows willingness to collaborate on solving the problem.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark's reply shows he agrees with Alice's approach and is ready to collaborate on solving the issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 56.08,
+      "finishTimestamp": 60.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.44
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
new file mode 100644
index 0000000000..6185adbb98
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
@@ -0,0 +1,94 @@
+---
+id: 675e7387be428072d95baeac
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`haven't`, `isn't`, `have`, `can't`, `do`, and `don't`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Alice: Hey Mark, we've been having some trouble with our user authentication, BLANK we?`
+
+`Mark: Yes, we BLANK. Some users are complaining that they can't log in. Did you figure out what's causing the problem?`
+
+`Alice: I think it's related to our session management. The tokens aren't being refreshed properly, are they?`
+
+`Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, BLANK it?`
+
+`Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened?`
+
+`Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it?`
+
+`Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that?`
+
+`Mark: Sure. We can do some tests on the staging server, BLANK we?`
+
+`Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this?`
+
+`Mark: Unfortunately, yes. We need to resolve this quickly, BLANK we?`
+
+`Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, BLANK we?`
+
+`Mark: No, we don't. Okay, let's get to work and see if we can sort this out.`
+
+## --blanks--
+
+`haven't`
+
+### --feedback--
+
+This is a contraction of `have not` used in a tag question.
+
+---
+
+`have`
+
+### --feedback--
+
+This is a part of a confirmation response for questions like `haven't they?`.
+
+---
+
+`isn't`
+
+### --feedback--
+
+This is a contraction of `is not` used in a tag question.
+
+---
+
+`can't`
+
+### --feedback--
+
+This is a contraction of `can not` used in a tag question.
+
+---
+
+`don't`
+
+### --feedback--
+
+This is a contraction of `do not` used in a tag question.
+
+---
+
+`do`
+
+### --feedback--
+
+This is an auxiliary verb used in a tag question. It pairs with a negative main sentence like `We don't want our users getting frustrated`, to check for agreement.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
new file mode 100644
index 0000000000..c7b8e7801d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
@@ -0,0 +1,64 @@
+---
+id: 675e79e6ecfda37e1f49be65
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What is the first step to solving login problems?
+
+## --answers--
+
+Testing on the staging server.
+
+### --feedback--
+
+Testing on the staging server is done after analyzing the logs, not as the first step.
+
+---
+
+Analyzing the server logs.
+
+---
+
+Replicating the issue in the live system.
+
+### --feedback--
+
+Issues should not be replicated in the live system; they are tested on the staging server.
+
+---
+
+Waiting for more support tickets to pile up.
+
+### --feedback--
+
+Waiting for more support tickets delays the resolution of problems and frustrates users further.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, look at the sequence Mark suggests.
+
+He mentions that analyzing server logs is the first step to identifying errors and unusual behavior. This makes logs the starting point in solving login issues.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
new file mode 100644
index 0000000000..b5623c50f7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
@@ -0,0 +1,64 @@
+---
+id: 675e7cc999813e83379b139c
+title: Task 72
+challengeType: 19
+dashedName: task-72
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+Why are staging servers important?
+
+## --answers--
+
+They help users log in faster.
+
+### --feedback--
+
+Staging servers are for testing, not for directly improving login speed.
+
+---
+
+They replace server logs in testing.
+
+### --feedback--
+
+Staging servers don't replace server logs; both are tools used for different purposes during testing.
+
+---
+
+They allow safe testing of solutions.
+
+---
+
+They prevent tokens from expiring.
+
+### --feedback--
+
+Tokens are managed through session management, not staging servers.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, consider what Mark says about staging servers.
+
+He highlights their role in testing solutions safely without affecting the live system. This makes them critical for troubleshooting and resolving problems effectively.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
new file mode 100644
index 0000000000..a5683adcde
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
@@ -0,0 +1,64 @@
+---
+id: 675e8013d40d0d860143c14f
+title: Task 73
+challengeType: 19
+dashedName: task-73
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What happens if tokens aren't renewed on time?
+
+## --answers--
+
+Support tickets are automatically resolved.
+
+### --feedback--
+
+Tokens being renewed on time prevents user access issues, not ticket resolution.
+
+---
+
+Users can log in securely.
+
+### --feedback--
+
+If tokens aren't renewed, users lose access rather than gain it.
+
+---
+
+Users may lose access or face errors.
+
+---
+
+Logs are updated with new activity.
+
+### --feedback--
+
+Logs record activity but do not directly address the issue of tokens not being renewed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, look at Mark's explanation.
+
+He states that when tokens aren't renewed, users lose access or face errors. This makes renewing tokens crucial for maintaining user sessions.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
new file mode 100644
index 0000000000..4ca1daf961
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
@@ -0,0 +1,64 @@
+---
+id: 675e80709ee205871518ba9b
+title: Task 74
+challengeType: 19
+dashedName: task-74
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+Why is solving login problems quickly important?
+
+## --answers--
+
+To maintain user trust and satisfaction.
+
+---
+
+To avoid replicating the issue in staging servers.
+
+### --feedback--
+
+Replicating issues in staging servers is part of the solution process, not a problem to avoid.
+
+---
+
+To stop users from accessing the system.
+
+### --feedback--
+
+The goal is to help users log in, not prevent access.
+
+---
+
+To reduce the size of the server logs.
+
+### --feedback--
+
+Solving login problems is about user trust, not the size of server logs.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find the correct answer, focus on Mark's comment about user satisfaction.
+
+He emphasizes that resolving login problems maintains user trust and prevents frustration, which are critical for a good user experience.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
new file mode 100644
index 0000000000..ce96bfe762
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
@@ -0,0 +1,64 @@
+---
+id: 675e8133c874a588f947de57
+title: Task 75
+challengeType: 19
+dashedName: task-75
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What does Mark suggest if the server logs don't show the cause of the problem?
+
+## --answers--
+
+Ignore the issue until more support tickets are filed.
+
+### --feedback--
+
+Ignoring the issue delays problem resolution and increases user frustration, which is not what Mark suggests.
+
+---
+
+Replicate the issue on the staging server.
+
+---
+
+Test solutions directly on the live system.
+
+### --feedback--
+
+Testing solutions directly on the live system risks further disruptions for users, which Mark advises against.
+
+---
+
+Wait for users to stop complaining.
+
+### --feedback--
+
+Mark does not suggest waiting for users to stop complaining. He emphasizes proactive troubleshooting instead.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, refer to Mark's suggestion in the text.
+
+He advises replicating the issue on the staging server when the logs don't provide enough information. This allows safe testing of solutions without affecting the live system.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
new file mode 100644
index 0000000000..1a0bd54d9d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
@@ -0,0 +1,196 @@
+---
+id: 675ecdef47179ea4653c2b9f
+title: "Dialogue 3: Preventing MitM attacks"
+challengeType: 21
+dashedName: dialogue-3-preventing-mitm-attacks
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "interview-room1.png",
+   "characters": [
+     {
+       "character": "Anna",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Brian",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-3.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Anna",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Anna",
+     "startTime": 1,
+     "finishTime": 5.22,
+     "dialogue": {
+       "text": "Hi, Brian. I've heard about these Man-in-the-Middle attacks. When do they usually happen?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 5.86,
+     "finishTime": 9.94,
+     "dialogue": {
+       "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 10.26,
+     "finishTime": 15.3,
+     "dialogue": {
+       "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 15.72,
+     "finishTime": 19.18,
+     "dialogue": {
+       "text": "I see. How often should we remind employees to use secure connections?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 19.6,
+     "finishTime": 21.12,
+     "dialogue": {
+       "text": "We send out reminders every month,",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 21.12,
+     "finishTime": 24.68,
+     "dialogue": {
+       "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 24.94,
+     "finishTime": 29.02,
+     "dialogue": {
+       "text": "By the end of this week, we'll have new job aids with updated security tips.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 29.6,
+     "finishTime": 32.7,
+     "dialogue": {
+       "text": "That sounds like a good approach. When is our next security review meeting?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 33.3,
+     "finishTime": 37.36,
+     "dialogue": {
+       "text": "It's scheduled for tomorrow afternoon. We'll discuss the current security protocols",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 37.36,
+     "finishTime": 41.12,
+     "dialogue": {
+       "text": "and the steps we're taking to prevent Man-in-the-Middle attacks.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 41.84,
+     "finishTime": 46,
+     "dialogue": {
+       "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 46.44,
+     "finishTime": 49.02,
+     "dialogue": {
+       "text": "What should they do to protect themselves while traveling for work?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 49.56,
+     "finishTime": 54.6,
+     "dialogue": {
+       "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 54.6,
+     "finishTime": 61,
+     "dialogue": {
+       "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 61.76,
+     "finishTime": 65.54,
+     "dialogue": {
+       "text": "Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 66.04
+   },
+   {
+     "character": "Anna",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 66.54
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
new file mode 100644
index 0000000000..f3a4b2d096
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
@@ -0,0 +1,92 @@
+---
+id: 675ecedbb04f6ca6dd620f0e
+title: Task 76
+challengeType: 22
+dashedName: task-76
+---
+
+<!-- (Audio) Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hi Brian, I've heard about these BLANK BLANK.`
+
+## --blanks--
+
+`Man-in-the-Middle`
+
+### --feedback--
+
+This is a type of cyberattack where a hacker secretly gets in the middle of two people or systems talking to each other. The hacker can see, change, or steal information being shared without anyone knowing. This is a compound word, remember to use `-`. The first letters of the first and the forth word are capitalized.
+
+---
+
+`attacks`
+
+### --feedback--
+
+This word in the plural form means actions by hackers or criminals to harm a computer system, steal information, or cause problems.
+
+# --explanation--
+
+`Man-in-the-Middle` (or `MITM`) is a type of attack where a hacker secretly gets between two people or systems that are communicating. The hacker listens to or changes the information being shared without anyone knowing. For example:
+
+`A Man-in-the-Middle attack (MITM) happened when a hacker intercepted the data sent between a user's computer and their bank.` - The hacker pretended to be the bank, intercepted the information, and stole the user's login credentials. This allowed the hacker to access the bank account without the user knowing.
+
+`Attacks` are actions by hackers to harm computer systems, steal information, or cause problems. For example:
+
+`The website was unavailable for hours because of a cyber attack that overloaded its server.` - It indicates the hacker sent too much fake traffic to the website, making it crash or slow down. This stopped real users from accessing it, causing disruption.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 2.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "Hi, Brian. I've heard about these man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
new file mode 100644
index 0000000000..b466c0e809
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
@@ -0,0 +1,80 @@
+---
+id: 675ed1414303a6abfaac2d96
+title: Task 77
+challengeType: 22
+dashedName: task-77
+---
+
+<!-- (Audio) Anna: When do they usually happen? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`When do they BLANK happen?`
+
+## --blanks--
+
+`usually`
+
+### --feedback--
+
+This word means something that happens most of the time or is common.
+
+# --explanation--
+
+`Usually` means something happens most of the time or is common. It describes the frequency or regularity of an event. For example:
+
+`I usually have coffee in the morning before starting work.` - It means having coffee in the morning is a regular habit or something you do most of the time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 3,
+      "finishTimestamp": 4.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 2.22,
+      "dialogue": {
+        "text": "When do they usually happen?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 2.72
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
new file mode 100644
index 0000000000..05ff62fe64
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
@@ -0,0 +1,111 @@
+---
+id: 675ed59b1e938bb2443585a5
+title: Task 78
+challengeType: 19
+dashedName: task-78
+---
+
+<!-- (Audio) Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. When do they usually happen? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna ask about?
+
+## --answers--
+
+If Brian knows how to stop cyberattacks.
+
+### --feedback--
+
+Anna does not ask about stopping attacks.
+
+---
+
+When Man-in-the-Middle attacks usually happen.
+
+---
+
+If Man-in-the-Middle attacks are dangerous.
+
+### --feedback--
+
+Anna is not asking if these attacks are dangerous.
+
+---
+
+How Brian protects himself from attacks.
+
+### --feedback--
+
+Anna does not ask about Brian's protection methods.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Anna mentions `Man-in-the-Middle attacks` and asks about the time they `usually happen`. The correct answer is about the timing of these specific attacks, not about stopping them, their danger, or how Brian protects himself.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "Hi, Brian. I've heard about these man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "startTime": 4,
+      "finishTime": 5.22,
+      "dialogue": {
+        "text": "When do they usually happen?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.72
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
new file mode 100644
index 0000000000..303ac91208
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
@@ -0,0 +1,80 @@
+---
+id: 675ed69e54ae31b462edf95b
+title: Task 79
+challengeType: 22
+dashedName: task-79
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, they occur when you're using public Wi-Fi or unsecured networks.`
+
+## --blanks--
+
+`Typically`
+
+### --feedback--
+
+This word means something that happens in most cases or is common in a particular situation. The first letter is capitalized.
+
+# --explanation--
+
+`Typically` means something that happens in most cases or is the usual situation. It describes what is normal or expected. For example:
+
+`People typically start their day with a cup of coffee.` - It shows that starting the day with coffee is a common habit for people. It suggests that this is what usually happens.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
new file mode 100644
index 0000000000..b15c9751f7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
@@ -0,0 +1,92 @@
+---
+id: 675ed905490b9ab8f4e640c4
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Typically, they occur when you're using BLANK BLANK or unsecured networks.`
+
+## --blanks--
+
+`public`
+
+### --feedback--
+
+This word means something is open to everyone, like a shared space or service.
+
+---
+
+`Wi-Fi`
+
+### --feedback--
+
+This is short for `Wireless Fidelity`. It refers to a wireless networking technology that uses radio waves to provide high-speed internet and network connections without the need for physical cables. This is a compound word, remember to use `-`. The first letter and the third letter are capitalized.
+
+# --explanation--
+
+`Public` means something that is available to everyone or shared by the community. For example:
+
+`The repository is public so anyone can access it.` - It shows that the repository is open to everyone and not private.
+
+`Wi-Fi` (short for `Wireless Fidelity`) refers to a wireless internet connection that allows devices to connect to the internet. For example:
+
+`I connected my phone to the café's Wi-Fi to check my emails.` - It shows you accessed the internet in the café without using a cable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
new file mode 100644
index 0000000000..fb02d572f9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
@@ -0,0 +1,92 @@
+---
+id: 675edb8012accfbd8f4135c5
+title: Task 81
+challengeType: 22
+dashedName: task-81
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Typically, they occur when you're using public Wi-Fi or BLANK BLANK.`
+
+## --blanks--
+
+`unsecured`
+
+### --feedback--
+
+This word means something that is not protected or not safe, like a network without a password.
+
+---
+
+`networks`
+
+### --feedback--
+
+This word in the plural form refers to systems that connect computers or devices to share information, often over the internet.
+
+# --explanation--
+
+`Unsecured` means not protected or not safe, often referring to something that lacks security measures, like passwords or encryption. For example:
+
+`Using an unsecured network can put your personal data at risk.` - It describes a network that is not safe, meaning hackers could access one's data easily.
+
+`Networks` are systems that connect computers or devices to share data, resources, or internet access. For example:
+
+`Many businesses rely on secure networks to protect their sensitive information.` - Here, `networks` refer to the connected systems businesses use for communication and data sharing.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
new file mode 100644
index 0000000000..e388f2834c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
@@ -0,0 +1,52 @@
+---
+id: 675edc3228d9d1bf95c5e649
+title: Task 82
+challengeType: 19
+dashedName: task-82
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+In which situation might a Man-in-the-Middle attack happen?
+
+## --answers--
+
+When you are using a private, secured network.
+
+### --feedback--
+
+Man-in-the-Middle attacks are unlikely on private, secured networks because they are protected.
+
+---
+
+When you are browsing websites offline.
+
+### --feedback--
+
+Man-in-the-Middle attacks only happen when data is being exchanged online, not offline.
+
+---
+
+When an employee connects to public Wi-Fi to check company emails.
+
+---
+
+When you are sending an email from your personal, secured device.
+
+### --feedback--
+
+If your device is secured and the connection is private, Man-in-the-Middle attacks are less likely to happen.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Man-in-the-Middle attacks often occur in insecure environments, such as when connecting to public Wi-Fi to access sensitive data like company emails. In such cases, attackers can intercept and steal information because the connection is not protected.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
new file mode 100644
index 0000000000..3b435849bf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
@@ -0,0 +1,80 @@
+---
+id: 675edeea805bb0c44385d0d5
+title: Task 83
+challengeType: 22
+dashedName: task-83
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to be careful, BLANK during peak travel times, like holidays or weekends.`
+
+## --blanks--
+
+`especially`
+
+### --feedback--
+
+This word means to focus on something more than usual or to highlight something as particularly important.
+
+# --explanation--
+
+`Especially` means more than usual or with extra focus on a particular thing or situation. It is used to emphasize something important. For example:
+
+`Developers need to monitor network security, especially during software updates.` - It emphasizes that monitoring security is more important during software updates because such times are critical and often targeted by attackers.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.06,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.24,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
new file mode 100644
index 0000000000..e92c4e39e6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
@@ -0,0 +1,92 @@
+---
+id: 675ee01ee1d37cc722bbad83
+title: Task 84
+challengeType: 22
+dashedName: task-84
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to be careful, especially during BLANK BLANK, like holidays or weekends.`
+
+## --blanks--
+
+`peak`
+
+### --feedback--
+
+This word means the highest or busiest point of something, such as activity or usage.
+
+---
+
+`travel times`
+
+### --feedback--
+
+This phrase of two words refers to periods when people are moving from one place to another, often in large numbers.
+
+# --explanation--
+
+`Peak` refers to the busiest or highest point of activity, demand, or usage. For example:
+
+`Website traffic often reaches its peak during product launches.` - It explains that during product launches, a lot of users visit the website at the same time. This is the busiest period for the site.
+
+`Travel times` refers to periods when people are actively moving, often in large numbers. For example:
+
+`System administrators must ensure VPN access is reliable during peak travel times.` - It highlights that it's important to ensure the VPN works well when many employees are traveling to prevent delays or security issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.06,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.24,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
new file mode 100644
index 0000000000..bd74966b6a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
@@ -0,0 +1,102 @@
+---
+id: 675ee218782b4dcb26796c19
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why should people be careful during holidays or weekends?
+
+## --answers--
+
+Because networks are more secure during these times.
+
+### --feedback--
+
+Networks are often less secure during these times, not more secure.
+
+---
+
+Because people don't use public Wi-Fi during holidays.
+
+### --feedback--
+
+Many people use public Wi-Fi during holidays or weekends, which increases security risks.
+
+---
+
+Because travel slows down and risks are lower.
+
+### --feedback--
+
+Travel increases during holidays or weekends, creating more opportunities for attacks.
+
+---
+
+Because these are peak travel times, and public networks are used more often.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Holidays and weekends are considered peak travel times, meaning more people are traveling and using public Wi-Fi or unsecured networks. This increases the chances of cyberattacks, such as Man-in-the-Middle attacks, because public networks are less secure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.26,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
new file mode 100644
index 0000000000..0cca8e82fd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
@@ -0,0 +1,80 @@
+---
+id: 675fa4789b65761b6c562a1b
+title: Task 86
+challengeType: 22
+dashedName: task-86
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I see. BLANK should we remind employees to use secure connections?`
+
+## --blanks--
+
+`How often`
+
+### --feedback--
+
+This phrase of two words is used to ask about the frequency of an action, or how many times something should be done. The first letter is capitalized.
+
+# --explanation--
+
+`How often` is used to ask about the frequency of an action, meaning how many times or at what intervals it should be repeated. For example:
+
+`How often should we update our antivirus software?` - The question is asking about the frequency of updating antivirus software, which is an important security task. It emphasizes the need to establish a regular schedule to keep systems protected from threats.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
new file mode 100644
index 0000000000..82af92f916
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
@@ -0,0 +1,92 @@
+---
+id: 675fa66d590e0127ba60b7f6
+title: Task 87
+challengeType: 22
+dashedName: task-87
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I see. How often should we remind employees to use BLANK BLANK?`
+
+## --blanks--
+
+`secure`
+
+### --feedback--
+
+This word means protected or safe from threats, like hacking or unauthorized access.
+
+---
+
+`connections`
+
+### --feedback--
+
+This word in the plural form refers to links or pathways that allow devices to communicate with each other or access the internet.
+
+# --explanation--
+
+`Secure` means something that is safe and protected from risks, like hacking, stealing data, or someone getting access without permission. For example:
+
+`All employees should use secure passwords to protect their accounts.` - This sentence shows how using strong and safe passwords helps keep accounts private and stops others from breaking into them.
+
+`Connections` are the links that let devices talk to each other or use the internet. For example:
+
+`Using encrypted connections helps protect sensitive information during online meetings.` - This sentence shows that using safe and protected links keeps shared information private during online meetings, so no one can see or steal it without permission.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
new file mode 100644
index 0000000000..f72d75b527
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
@@ -0,0 +1,102 @@
+---
+id: 675fa827b0a17832dc798ba0
+title: Task 88
+challengeType: 19
+dashedName: task-88
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna want to know?
+
+## --answers--
+
+If secure connections are necessary for employees.
+
+### --feedback--
+
+Anna is not asking whether secure connections are necessary.
+
+---
+
+How often employees should be reminded to use secure connections.
+
+---
+
+What secure connections are used for.
+
+### --feedback--
+
+Anna is not asking about the purpose of secure connections.
+
+---
+
+If employees know how to create secure connections.
+
+### --feedback--
+
+Anna is not asking whether employees know how to create secure connections.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Anna's question shows she is interested in the frequency of reminders, not about the necessity or purpose of secure connections, or employees' knowledge about them.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
new file mode 100644
index 0000000000..43280a66be
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
@@ -0,0 +1,113 @@
+---
+id: 675fb5315884dc456fad654a
+title: Task 89
+challengeType: 22
+dashedName: task-89
+---
+
+<!-- (Audio) Brian: We send out reminders every month, but we're planning to increase that to every two weeks to keep everyone vigilant. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We send out reminders BLANK, but we're planning to increase that to BLANK to keep everyone BLANK.`
+
+## --blanks--
+
+`every month`
+
+### --feedback--
+
+This phrase of two words refers to something that happens once each month.
+
+---
+
+`every two weeks`
+
+### --feedback--
+
+This phrase of three words refers to something that happens once every two weeks, or biweekly. The third word is in the plural form.
+
+---
+
+`vigilant`
+
+### --feedback--
+
+This word means being alert and paying close attention, especially to avoid risks or problems.
+
+# --explanation--
+
+`Every month` means something happens once per month, regularly. For example:
+
+`We back up our system data every month to prevent data loss.` - This sentence shows that backing up system data is a regular task that happens monthly to ensure data safety.
+
+`Every two weeks` means something happens once every two weeks, or twice a month. For example:
+
+`The IT team checks for security updates every two weeks to keep systems up to date.` - This sentence highlights the importance of checking for updates twice a month to ensure that systems remain secure and functioning well.
+
+`Vigilant` means being watchful and careful to avoid risks or problems. For example:
+
+`Employees must stay vigilant when opening emails to avoid phishing scams.` - This sentence emphasizes the need for employees to pay attention and be cautious when handling emails to prevent falling victim to scams or attacks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.6,
+      "finishTimestamp": 23.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We send out reminders every month,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 2.52,
+      "finishTime": 6.08,
+      "dialogue": {
+        "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
new file mode 100644
index 0000000000..029bb35e9f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
@@ -0,0 +1,111 @@
+---
+id: 675fb7824cbbe3539de6111b
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- (Audio) Brian: We send out reminders every month, but we're planning to increase that to every two weeks to keep everyone vigilant. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How often do they remind the employees?
+
+## --answers--
+
+Once a week.
+
+### --feedback--
+
+Brian does not mention reminders being sent weekly.
+
+---
+
+Every two weeks.
+
+### --feedback--
+
+While they are planning to change to every two weeks, Brian says they currently send reminders less frequently.
+
+---
+
+Every month.
+
+---
+
+Every six months.
+
+### --feedback--
+
+Brian mentions reminders being sent much more frequently than every six months.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Brian says, `We send out reminders every month`, which means that currently, employees receive reminders once every month, although there are plans to increase the frequency in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.6,
+      "finishTimestamp": 23.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We send out reminders every month,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 2.52,
+      "finishTime": 6.08,
+      "dialogue": {
+        "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
new file mode 100644
index 0000000000..b0ae71fc54
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
@@ -0,0 +1,38 @@
+---
+id: 675fba2a32b4aa625e2f7940
+title: Task 91
+challengeType: 19
+dashedName: task-91
+---
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+What's the right reply when your team member asks `How often should we review our security policies`?
+
+## --answers--
+
+`Very important.`
+
+### --feedback--
+
+`How often` asks about frequency, not importance.
+
+---
+
+`Every two months.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The question `How often?` is used to ask about frequency, meaning how many times or at what intervals something occurs. A reply like `every two months` correctly answers this type of question by specifying the frequency.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
new file mode 100644
index 0000000000..35365cf125
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
@@ -0,0 +1,92 @@
+---
+id: 675fbba5f9807566fb0c39ef
+title: Task 92
+challengeType: 22
+dashedName: task-92
+---
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`By the end of this week, we'll have new BLANK with updated BLANK.`
+
+## --blanks--
+
+`job aids`
+
+### --feedback--
+
+This phrase of two words refers to tools or materials that help employees perform their tasks better. The second word is in the plural form.
+
+---
+
+`security tips`
+
+### --feedback--
+
+This phrase of two words refers to advice or recommendations to help keep systems and data safe. The second word is in the plural form.
+
+# --explanation--
+
+`Job aids` are tools or materials, such as guides or checklists, that help employees do their work more effectively. For example:
+
+`The company provided job aids to help employees follow new procedures.` - It shows that `job aids`, like guides or instructions, make it easier for employees to understand and follow updated processes at work.
+
+`Security tips` are pieces of advice or recommendations to help people protect systems, data, and devices from risks. For example:
+
+`The IT team shared security tips on how to create strong passwords.` - It indicates the IT team provided helpful advice, like creating strong passwords, to ensure better protection against threats like hacking.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.94,
+      "finishTimestamp": 28.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "By the end of this week, we'll have new job aids with updated security tips.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
new file mode 100644
index 0000000000..8823ceb921
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
@@ -0,0 +1,102 @@
+---
+id: 675fbefa9f40157cad662e8d
+title: Task 93
+challengeType: 19
+dashedName: task-93
+---
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the new security measure mentioned?
+
+## --answers--
+
+Developing a security app for employees.
+
+### --feedback--
+
+The audio does not mention creating a security app.
+
+---
+
+Hiring a cybersecurity consultant.
+
+### --feedback--
+
+The audio does not mention hiring external help for cybersecurity.
+
+---
+
+Providing regular workshops on online safety.
+
+### --feedback--
+
+Workshops are not mentioned as the new security measure in the audio.
+
+---
+
+Giving employees new tools to improve their security practices.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+According to Brian, the new security measure involves giving employees helpful tools to strengthen their security practices, rather than introducing software or hiring external support.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.94,
+      "finishTimestamp": 28.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "By the end of this week, we'll have new job aids with updated security tips.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
new file mode 100644
index 0000000000..5938591e85
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
@@ -0,0 +1,88 @@
+---
+id: 675fbfc6fa824c820a7e49d4
+title: Task 94
+challengeType: 19
+dashedName: task-94
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the reply showing agreement?
+
+## --answers--
+
+`That sounds like a good approach.`
+
+---
+
+`I'm not sure that's necessary.`
+
+### --feedback--
+
+This response shows doubt, not agreement.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The phrase `That sounds like a good approach` is a positive response that shows agreement with the plan to introduce new job aids with updated security tips.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "interview-room1.png",
+     "characters": [
+       {
+         "character": "Brian",
+         "position": {
+           "x": 50,
+           "y": 15,
+           "z": 1.2
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-3.mp3",
+       "startTime": 1,
+       "startTimestamp": 23.94,
+       "finishTimestamp": 28.02
+     }
+   },
+   "commands": [
+     {
+       "character": "Brian",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Brian",
+       "startTime": 1,
+       "finishTime": 5.08,
+       "dialogue": {
+         "text": "By the end of this week, we'll have new job aids with updated security tips.",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Brian",
+       "opacity": 0,
+       "startTime": 5.58
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
new file mode 100644
index 0000000000..6d93276e14
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
@@ -0,0 +1,80 @@
+---
+id: 675fc02724147984cfe068d5
+title: Task 95
+challengeType: 22
+dashedName: task-95
+---
+
+<!-- (Audio) Anna: That sounds like a good approach. When is our next security review meeting? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That sounds like a good approach. When is our next BLANK?`
+
+## --blanks--
+
+`security review meeting`
+
+### --feedback--
+
+This phrase of three words refers to a meeting where the team evaluates the current security measures and plans improvements.
+
+# --explanation--
+
+A `security review meeting` is a discussion where teams check and assess the effectiveness of their security practices and look for ways to improve them. For example:
+
+`The IT team scheduled a security review meeting to evaluate recent issues in the system.` - This sentence shows how a security review meeting helps the team discuss recent problems and find solutions to strengthen the system's safety.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.6,
+      "finishTimestamp": 31.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.1,
+      "dialogue": {
+        "text": "That sounds like a good approach. When is our next security review meeting?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
new file mode 100644
index 0000000000..8bc0623782
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
@@ -0,0 +1,102 @@
+---
+id: 675fe3fb72bdcb97dd10b7c8
+title: Task 96
+challengeType: 19
+dashedName: task-96
+---
+
+<!-- (Audio) Anna: That sounds like a good approach. When is our next security review meeting? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna ask about?
+
+## --answers--
+
+The timing of the next security review meeting.
+
+---
+
+Who will attend the next security review meeting.
+
+### --feedback--
+
+Anna does not ask about the attendees.
+
+---
+
+What topics will be covered in the security review meeting.
+
+### --feedback--
+
+Anna does not ask about the topics.
+
+---
+
+Why security review meetings are important.
+
+### --feedback--
+
+Anna does not ask about the importance of the meetings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Anna's question shows she is asking about the timing of the meeting, not about the attendees, topics, or the importance of the meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.6,
+      "finishTimestamp": 31.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.1,
+      "dialogue": {
+        "text": "That sounds like a good approach. When is our next security review meeting?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
new file mode 100644
index 0000000000..2aa134e24b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
@@ -0,0 +1,80 @@
+---
+id: 675fe58fb4c9539cb37b4065
+title: Task 97
+challengeType: 22
+dashedName: task-97
+---
+
+<!-- (Audio) Brian: It's scheduled for tomorrow afternoon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's BLANK for tomorrow afternoon.`
+
+## --blanks--
+
+`scheduled`
+
+### --feedback--
+
+This word means planned or arranged to happen at a specific time.
+
+# --explanation--
+
+`Scheduled` means planned or arranged to happen at a specific time or date. For example:
+
+`The team meeting is scheduled for Friday at 3 PM.` - This sentence shows that the meeting is planned and has a fixed time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.1,
+      "finishTimestamp": 34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It's scheduled for tomorrow afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.4
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
new file mode 100644
index 0000000000..18ee6b5760
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
@@ -0,0 +1,99 @@
+---
+id: 675fe6a1e81c4ba00f415364
+title: Task 98
+challengeType: 22
+dashedName: task-98
+---
+
+<!-- (Audio) Brian: We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK discuss our current BLANK and the steps we're taking to prevent Man-in-the-Middle attacks.`
+
+## --blanks--
+
+`We'll`
+
+### --feedback--
+
+This is the contraction for `we will`, used to talk about something planned for the future. The first letter is capitalized.
+
+---
+
+`security protocols`
+
+### --feedback--
+
+This phrase of two words refers to rules or procedures designed to keep systems, data, or networks safe. The second word is in the plural form.
+
+# --explanation--
+
+`We'll` is a contraction of `we will`, and it is used to indicate something that will happen in the future.
+
+`Security protocols` are the rules or procedures set up to protect systems, data, and networks from harm or unauthorized access. For example:
+
+`Employees must follow security protocols to avoid data breaches.` - This emphasizes that employees need to stick to specific rules and procedures to ensure that sensitive data stays safe.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.16,
+      "finishTimestamp": 40.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll discuss the current security protocols",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.2,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "and the steps we're taking to prevent man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
new file mode 100644
index 0000000000..ac74eae9ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
@@ -0,0 +1,111 @@
+---
+id: 675feaafa5546fab32aa0736
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- (Audio) Brian: We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What topics will the security review meeting cover?
+
+## --answers--
+
+Only new employee onboarding.
+
+### --feedback--
+
+Brian does not mention onboarding as a topic for the security review meeting.
+
+---
+
+Changes to company software.
+
+### --feedback--
+
+Brian does not mention software changes as part of the discussion.
+
+---
+
+Budget planning for the IT department.
+
+### --feedback--
+
+Brian does not mention anything about budget planning.
+
+---
+
+Current security protocols and steps to prevent Man-in-the-Middle attacks.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Brian's statement clearly shows that security protocols and measures to prevent Man-in-the-Middle attacks are the two main topics to be covered at the security review meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.16,
+      "finishTimestamp": 40.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll discuss the current security protocols",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.2,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "and the steps we're taking to prevent man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
new file mode 100644
index 0000000000..61c36e7762
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
@@ -0,0 +1,80 @@
+---
+id: 675febf4f03233af8e347802
+title: Task 100
+challengeType: 22
+dashedName: task-100
+---
+
+<!-- (Audio) Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Got it. We have our BLANK coming next week, and many team members are coming from other countries.`
+
+## --blanks--
+
+`summit`
+
+### --feedback--
+
+This refers to a formal meeting or event where people discuss important topics.
+
+# --explanation--
+
+A `summit` is a formal gathering or meeting where people come together to discuss specific topics, often for planning or decision-making.
+
+`The company is hosting a summit to plan next year's cybersecurity strategies.` - It shows that the company is organizing an important meeting where leaders or teams will discuss and decide on strategies for improving cybersecurity.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.64,
+      "finishTimestamp": 45
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 5.36,
+      "dialogue": {
+        "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
new file mode 100644
index 0000000000..21a9284025
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
@@ -0,0 +1,102 @@
+---
+id: 675fee8f5d64f2b504e91281
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- (Audio) Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why will people travel from other countries?
+
+## --answers--
+
+To attend training sessions for a new project.
+
+### --feedback--
+
+Anna does not mention training sessions as the reason for travel.
+
+---
+
+To visit the company headquarters.
+
+### --feedback--
+
+Anna does not mention visits to the headquarters as the reason for travel.
+
+---
+
+To participate in the upcoming summit.
+
+---
+
+To finalize a new business deal.
+
+### --feedback--
+
+Anna does not mention anything about a business deal.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Anna's statement indicates that people will travel to participate in the summit. The other options are unrelated to the reason given in the audio.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.64,
+      "finishTimestamp": 45
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 5.36,
+      "dialogue": {
+        "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
new file mode 100644
index 0000000000..458896c3da
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
@@ -0,0 +1,80 @@
+---
+id: 675ff2b7f9405abf27f26740
+title: Task 102
+challengeType: 22
+dashedName: task-102
+---
+
+<!-- (Audio) Anna: What should they do to protect themselves while traveling for work? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`What should they do to protect themselves while BLANK?`
+
+## --blanks--
+
+`traveling for work`
+
+### --feedback--
+
+This phrase of three words refers to the act of going from one place to another for job-related purposes. The first word ends in `-ing`.
+
+# --explanation--
+
+`Traveling for work` means going to different locations as part of your job responsibilities, such as attending meetings, conferences, or other work-related events. For example:
+
+`Employees traveling for work should use VPNs to secure their internet connections.` - It highlights that employees who are traveling for job-related purposes need to use VPNs to ensure their online activities are safe and protected.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.44,
+      "finishTimestamp": 48.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.58,
+      "dialogue": {
+        "text": "What should they do to protect themselves while traveling for work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.08
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
new file mode 100644
index 0000000000..140c5cc3df
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
@@ -0,0 +1,102 @@
+---
+id: 675ff37bebf32bc223e3660a
+title: Task 103
+challengeType: 19
+dashedName: task-103
+---
+
+<!-- (Audio) Anna: What should they do to protect themselves while traveling for work? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna want to discuss?
+
+## --answers--
+
+Ways to stay safe while traveling for work.
+
+---
+
+The best travel routes for employees.
+
+### --feedback--
+
+Anna's question is not about travel routes but about safety during work-related travel.
+
+---
+
+How to organize travel schedules.
+
+### --feedback--
+
+Anna is not asking about schedules; she is asking about protection while traveling.
+
+---
+
+Options for remote work while traveling.
+
+### --feedback--
+
+Anna does not mention remote work in her question.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Anna's question shows she is focused on discussing safety measures during work-related travel, not travel routes, schedules, or remote work options.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "interview-room1.png",
+     "characters": [
+       {
+         "character": "Anna",
+         "position": {
+           "x": 50,
+           "y": 15,
+           "z": 1.2
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-3.mp3",
+       "startTime": 1,
+       "startTimestamp": 45.44,
+       "finishTimestamp": 48.02
+     }
+   },
+   "commands": [
+     {
+       "character": "Anna",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Anna",
+       "startTime": 1,
+       "finishTime": 3.58,
+       "dialogue": {
+         "text": "What should they do to protect themselves while traveling for work?",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Anna",
+       "opacity": 0,
+       "startTime": 4.08
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
new file mode 100644
index 0000000000..07a32aafd2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
@@ -0,0 +1,104 @@
+---
+id: 675ff42fb8c8a6c4f21cd3bb
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (Audio) Brian: Everyone should always use a VPN, especially when accessing sensitive information. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Everyone should always use a BLANK, especially when BLANK BLANK.`
+
+## --blanks--
+
+`VPN`
+
+### --feedback--
+
+This stands for `Virtual Private Network`, which secures your internet connection by encrypting your data. All three letters are capitalized.
+
+---
+
+`accessing`
+
+### --feedback--
+
+This word refers to the act of opening or using something, such as files, systems, or websites. It ends in `-ing`.
+
+---
+
+`sensitive information`
+
+### --feedback--
+
+This phrase of two words refers to important or private data that needs to be protected, like passwords or financial details.
+
+# --explanation--
+
+`VPN` stands for `Virtual Private Network`. It makes your internet connection safer by hiding your data and protecting you from hackers. For example:
+
+`Using a VPN ensures that your connection is secure, even on public Wi-Fi.` - This means that a VPN helps keep your online activities private and safe when you use public Wi-Fi, which is not very secure.
+
+`Accessing` means opening or using something, like files, websites, or systems. For example:
+
+`Employees should be cautious when accessing company files on personal devices.` - This means employees need to be careful when opening company files on their own devices, so they don't risk losing or exposing important information.
+
+`Sensitive information` means private or important data that can cause problems if it is shared with the wrong people. For example:
+
+`Passwords and financial records are examples of sensitive information that must be protected.` - This means that things like passwords and money details need to be kept safe, because if they are stolen, someone could use them to harm you or take your money.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.56,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
new file mode 100644
index 0000000000..fc7ee72780
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
@@ -0,0 +1,92 @@
+---
+id: 675ff94f80bd9bd12c8497e2
+title: Task 105
+challengeType: 22
+dashedName: task-105
+---
+
+<!-- (Audio) Brian: They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`They should also BLANK using public Wi-Fi for important tasks, like banking or accessing BLANK.`
+
+## --blanks--
+
+`avoid`
+
+### --feedback--
+
+This word means to stay away from or not do something to prevent problems.
+
+---
+
+`corporate emails`
+
+### --feedback--
+
+This phrase of two words refers to work-related emails that often contain private or sensitive information. The second word is in the plural form.
+
+# --explanation--
+
+`Avoid` means to stay away from something or not do it because it can cause problems. For example:
+
+`Employees should avoid clicking on links from unknown senders in emails.` - It means that employees should not click on links they don't trust because these links might lead to scams or security risks.
+
+`Corporate emails` are work-related emails that often have private or sensitive information about the company. For example:
+
+`Using a secure connection is important when checking corporate emails outside the office.` - It highlights that work emails often contain important information, so using a secure internet connection is necessary to keep them private and safe from hackers.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 53.6,
+      "finishTimestamp": 60
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 7.4,
+      "dialogue": {
+        "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
new file mode 100644
index 0000000000..80d7ff822a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
@@ -0,0 +1,111 @@
+---
+id: 6760f057483bbf684bfa6457
+title: Task 106
+challengeType: 19
+dashedName: task-106
+---
+
+<!-- (Audio) Brian: Everyone should always use a VPN, especially when accessing sensitive information. They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which behavior is recommended by Brian?
+
+## --answers--
+
+Using public Wi-Fi for important tasks like banking.
+
+### --feedback--
+
+Brian advises against using public Wi-Fi for important tasks.
+
+---
+
+Always using a VPN, especially when accessing sensitive information like corporate emails.
+
+---
+
+Sharing passwords over email when needed.
+
+### --feedback--
+
+Brian does not mention sharing passwords and doing so would not be secure.
+
+---
+
+Using public Wi-Fi but only on weekends.
+
+### --feedback--
+
+Brian says to avoid public Wi-Fi for important tasks, not just on weekends.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian's statement shows that using a VPN is a key recommendation to keep data secure, particularly when handling sensitive tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.56,
+      "finishTimestamp": 60
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 6.04,
+      "finishTime": 12.44,
+      "dialogue": {
+        "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 12.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
new file mode 100644
index 0000000000..ea6563d4fc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
@@ -0,0 +1,102 @@
+---
+id: 6760f48b0fe69572664e85f1
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- (Audio) Anna: Thanks for the advice. Let's ensure everyone gets these updates before they travel next week. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will they do next?
+
+## --answers--
+
+Plan the next team-building activity.
+
+### --feedback--
+
+The audio does not mention planning team-building activities.
+
+---
+
+Schedule a meeting to discuss long-term goals.
+
+### --feedback--
+
+The audio does not mention a meeting for long-term goals.
+
+---
+
+Provide updates to everyone before they travel.
+
+---
+
+Organize a social event for travelers.
+
+### --feedback--
+
+The audio does not mention organizing a social event.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Anna says, `Let's ensure everyone gets these updates before they travel next week`. This makes it clear that their next step is to provide updates to all team members before they leave for their trips.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 60.36,
+      "finishTimestamp": 64.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.78,
+      "dialogue": {
+        "text": "Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
new file mode 100644
index 0000000000..2f56bf10c8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
@@ -0,0 +1,89 @@
+---
+id: 6760f7ca38c9167853ebf917
+title: Task 108
+challengeType: 22
+dashedName: task-108
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`often`, `usually`, `Typically`,  `we'll`, `especially`, and `every month`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. When do they BLANK happen?`
+
+`Brian: BLANK, they occur when you're using public Wi-Fi or unsecured networks. It's crucial to be careful, especially during peak travel times, like holidays or weekends.`
+
+`Anna: I see. How BLANK should we remind employees to use secure connections?`
+
+`Brian: We send out reminders BLANK, but we're planning to increase that to every two weeks to keep everyone vigilant. By the end of this week, BLANK have new job aids with updated security tips.`
+
+`Anna: That sounds like a good approach. When is our next security review meeting?`
+
+`Brian: It's scheduled for tomorrow afternoon. We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks.`
+
+`Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. What should they do to protect themselves while traveling for work?`
+
+`Brian: Everyone should always use a VPN, BLANK when accessing sensitive information. They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails.`
+
+`Anna: Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.`
+
+
+## --blanks--
+
+`usually`
+
+### --feedback--
+
+It means most of the time or in normal situations.
+
+---
+
+`Typically`
+
+### --feedback--
+
+It means generally or commonly. It is used to describe regular behavior or situations.
+
+---
+
+`often`
+
+### --feedback--
+
+It means frequently or many times.
+
+---
+
+`every month`
+
+### --feedback--
+
+It describes something happens once a month.
+
+---
+
+`we'll`
+
+### --feedback--
+
+It is a contraction of `we will`. It is used to talk about a future action.
+
+---
+
+`especially`
+
+### --feedback--
+
+It is used to emphasize something important in a specific situation.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
new file mode 100644
index 0000000000..9dc6063db6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
@@ -0,0 +1,70 @@
+---
+id: 676147de99ef019cee551581
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+Why is it important to stay secure online while traveling for work?
+
+## --answers--
+
+To avoid delays during the trip.
+
+### --feedback--
+
+The email does not mention delays as a reason for staying secure online.
+
+---
+
+To use public Wi-Fi safely.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for sensitive tasks, not about using it safely.
+
+---
+
+To protect sensitive data from being stolen.
+
+---
+
+To connect to the summit network faster.
+
+### --feedback--
+
+The email does not mention anything about connecting to a summit network.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on the email's warning about Man-in-the-Middle attacks.
+
+The email explains these happen on public Wi-Fi and can steal corporate emails and sensitive information.
+
+The main reason for staying secure is to protect this data. Look for an option that matches this.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
new file mode 100644
index 0000000000..9a71500880
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
@@ -0,0 +1,70 @@
+---
+id: 6761493d2db43ba139340975
+title: Task 110
+challengeType: 19
+dashedName: task-110
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email say about public Wi-Fi?
+
+## --answers--
+
+It is safe for sending emails.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for important tasks.
+
+---
+
+It helps employees stay connected securely.
+
+### --feedback--
+
+The email does not suggest that public Wi-Fi is secure. Instead, it warns about the risks of using it.
+
+---
+
+It is the best option for connecting to corporate systems.
+
+### --feedback--
+
+The email clearly states to avoid using public Wi-Fi for important tasks like corporate emails.
+
+---
+
+It can be dangerous when accessing sensitive information.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, focus on the email's advice about public Wi-Fi.
+
+It warns that using public networks for sensitive information can lead to attacks.
+
+The email recommends avoiding public Wi-Fi for important tasks. Look for an option that reflects this.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
new file mode 100644
index 0000000000..a9121698ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
@@ -0,0 +1,70 @@
+---
+id: 67614992d9e494a2b69f89bb
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+`Dear Team,`
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email recommend using to protect sensitive information?
+
+## --answers--
+
+Public Wi-Fi
+
+### --feedback--
+
+The email explicitly advises against using public Wi-Fi for important tasks.
+
+---
+
+Updated security tips
+
+### --feedback--
+
+While the email shares updated tips, it specifically recommends a tool to protect sensitive information.
+
+---
+
+A VPN (Virtual Private Network)
+
+---
+
+A job aid
+
+### --feedback--
+
+The job aid provides guidance, but the email mentions a specific key tool for protection.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on the email's solution for staying secure.
+
+It recommends using a VPN (Virtual Private Network) to protect data when working remotely.
+
+Look for an option that highlights it.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
new file mode 100644
index 0000000000..ffb9f77526
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
@@ -0,0 +1,70 @@
+---
+id: 67614a0187bd80a49d438b1f
+title: Task 112
+challengeType: 19
+dashedName: task-112
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email say about updated security tips?
+
+## --answers--
+
+They must be followed during the security review meeting.
+
+### --feedback--
+
+The email does not link updated security tips to the meeting but recommends reviewing them before traveling.
+
+---
+
+They help employees protect sensitive information.
+
+---
+
+They should only be used for corporate emails.
+
+### --feedback--
+
+The email mentions broader security practices, not just emails.
+
+---
+
+They are optional and can be reviewed later.
+
+### --feedback--
+
+The email emphasizes the importance of reviewing the updated tips before traveling.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the email's mention of updated security tips.
+
+These tips help employees protect sensitive information by offering practical steps for safe online practices.
+
+The email advises reviewing these tips before traveling. Look for an option that reflects it.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
new file mode 100644
index 0000000000..8dd58dfaaa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
@@ -0,0 +1,70 @@
+---
+id: 67614a6e5d4df6a6744127b7
+title: Task 113
+challengeType: 19
+dashedName: task-113
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What should employees do before traveling?
+
+## --answers--
+
+Review the updated security tips.
+
+### --feedback--
+
+While reviewing the tips is helpful, the email emphasizes something else as the most important step.
+
+---
+
+Contact the security team for VPN help.
+
+---
+
+Use public Wi-Fi with a VPN.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for sensitive tasks, even with a VPN.
+
+---
+
+Wait until the security review meeting.
+
+### --feedback--
+
+The email advises preparing before traveling, not waiting until the meeting to address these concerns.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the email's advice for preparing before traveling.
+
+It specifically asks employees to contact the security team for help with setting up their VPN.
+
+Look for an option that reflects this.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
index d354f8b2f7..0508452f04 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
@@ -58,7 +58,7 @@ If she is going to a Hackathon this weekend.
 
 To find out what Bob wants to know, listen to the second question he asks. Pay attention what comes after `I hear you're going to...` which show what Bob is trying to find out.
 
-He uses a question to confirm what he heard, specifically mentioning the event he thinks she’s attending.
+He uses a question to confirm what he heard, specifically mentioning the event he thinks she's attending.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
index 06c1cee959..25869b37cf 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
@@ -8,7 +8,7 @@ dashedName: task-14
 <!--
 AUDIO REFERENCE:
 Lisa: We plan to develop a new app for real-time project collaboration. How does that sound to you?
-Bob: Interesting! Who’s on your team?
+Bob: Interesting! Who's on your team?
 -->
 
 # --instructions--
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
index ca36ed3e23..6bc8abd325 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
@@ -7,7 +7,7 @@ dashedName: task-18
 
 <!--
 AUDIO REFERENCE:
-Bob: Interesting! Who’s on your team?
+Bob: Interesting! Who's on your team?
 Lisa: A couple of developers from our branch in Seattle, and a UX designer I've collaborated with before.
 -->
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
index 4ac4454391..1d204157a4 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
@@ -54,7 +54,7 @@ Lisa is asking about similar projects happening soon, not about moving to a diff
 
 # --explanation--
 
-Lisa asks about what’s coming up, specifically looking for information on projects that are similar to the one she is currently working on.
+Lisa asks about what's coming up, specifically looking for information on projects that are similar to the one she is currently working on.
 
 Pay attention to the phrase `similar projects coming up here` to understand what Lisa is asking about.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
index 0a3bcdfe0c..e547ded4d5 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
@@ -56,7 +56,7 @@ Bob is not asking about development status.
 
 Bob uses the word `yet`, which signals that he is asking if something expected has already happened.
 
-Pay attention to the words `potential name` and `yet` in Bob’s question, as these indicate that he is asking about the status of the app's name.
+Pay attention to the words `potential name` and `yet` in Bob's question, as these indicate that he is asking about the status of the app's name.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
index 89ea86edbd..ca9bfe0a46 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
@@ -55,9 +55,9 @@ Bob has not decided yet. He says `Maybe`.
 
 # --explanation--
 
-People sometimes express uncertainty before making a decision. Bob hasn’t fully decided if he'll join the event. You can notice that because he says `Maybe`, which shows he is still thinking about it.
+People sometimes express uncertainty before making a decision. Bob hasn't fully decided if he'll join the event. You can notice that because he says `Maybe`, which shows he is still thinking about it.
 
-Pay attention to Bob’s follow-up question where he asks, `Where can I find...?` This reveals that he needs more details before deciding whether to join the event.
+Pay attention to Bob's follow-up question where he asks, `Where can I find...?` This reveals that he needs more details before deciding whether to join the event.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
index 7d67182960..8775026bec 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
@@ -45,4 +45,4 @@ False
 
 # --explanation--
 
-To answer this question, focus on the part of the text that describes Lisa’s team. Look for the sentence that mentions `Her team includes...`. This will help you determine if there are developers from Seattle on her team.
+To answer this question, focus on the part of the text that describes Lisa's team. Look for the sentence that mentions `Her team includes...`. This will help you determine if there are developers from Seattle on her team.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
index b82062ba59..ea088d0df4 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
@@ -41,7 +41,7 @@ When someone asks if you have a moment, they want to talk to you about something
 
 When someone asks if you have a moment, they want to discuss something important.
 
-The correct response will show that you’re ready to listen or talk about the topic they want to discuss. Pay attention to options that focus on being open to a conversation.
+The correct response will show that you're ready to listen or talk about the topic they want to discuss. Pay attention to options that focus on being open to a conversation.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
index bb91b576d8..5373f218a9 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
@@ -22,7 +22,7 @@ What is Brian currently thinking about in terms of the training?
 
 ## --answers--
 
-Using real-life scenarios to identify physing attempts.
+Using real-life scenarios to identify phishing attempts.
 
 ---
 
@@ -34,7 +34,7 @@ Focus on what Brian is saying right after `I'm thinking of using...` and `especi
 
 ---
 
-Changing the topic completely because of physing attempts.
+Changing the topic completely because of phishing attempts.
 
 ### --feedback--
 
@@ -42,7 +42,7 @@ Focus on what Brian is saying right after `I'm thinking of using...` and `especi
 
 ---
 
-Canceling the training because of physing attempts.
+Canceling the training because of phishing attempts.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
index 4a83860096..ba994c9200 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
@@ -20,7 +20,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Does Anna support Brian’s idea of using real-life scenarios?
+Does Anna support Brian's idea of using real-life scenarios?
 
 ## --answers--
 
@@ -44,7 +44,7 @@ She mentions that using real-life scenarios improves the training. This indicate
 
 ---
 
-She ignores Brian’s suggestion completely. This indicates she doesn't understands his idea.
+She ignores Brian's suggestion completely. This indicates she doesn't understands his idea.
 
 ### --feedback--
 
@@ -56,7 +56,7 @@ She didn't ignore Brian. Pay attention to the words she uses after `Using real-l
 
 # --explanation--
 
-People sometimes show support indirectly without explicitly saying they agree. To understand if Anna supports Brian’s idea, focus on her comment about the training.
+People sometimes show support indirectly without explicitly saying they agree. To understand if Anna supports Brian's idea, focus on her comment about the training.
 
 Instead of directly saying she likes the idea, she mentions that using real-life scenarios `makes the training more relevant`. This shows she agrees with Brian because she highlights a positive result of using his suggestion.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
index 8a8cccc7bb..c61a585c09 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
@@ -37,9 +37,9 @@ Consider what phrase you would use to suggest connecting with someone to discuss
 
 `Touch base` means to make contact or to check in with someone, usually to discuss progress or updates. For example:
 
-- `Let’s touch base next week to see how the project is going.` - We'll talk again next week to discuss the project's progress.
+- `Let's touch base next week to see how the project is going.` - We'll talk again next week to discuss the project's progress.
 
-- `I’ll touch base with you later about the meeting.` - you'll contact this person later to talk about the meeting.
+- `I'll touch base with you later about the meeting.` - you'll contact this person later to talk about the meeting.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
index fb318c8bbf..1cb3999e59 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -83,4 +83,4 @@ Brian doesn't mention a party.
 
 # --explanation--
 
-Look at the email subject `Cybersecurity Training Session` and the first line `I want to update you on our next cybersecurity training session`. These show that Brian is informing the team about the upcoming session. There’s no mention of rescheduling, so the correct answer focuses on providing information about the training.
+Look at the email subject `Cybersecurity Training Session` and the first line `I want to update you on our next cybersecurity training session`. These show that Brian is informing the team about the upcoming session. There's no mention of rescheduling, so the correct answer focuses on providing information about the training.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
index fba928ee12..9865cdf2ce 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -55,7 +55,7 @@ To know why the training session is important.
 
 ### --feedback--
 
-Although understanding the importance is useful, it doesn’t help you attend the meeting.
+Although understanding the importance is useful, it doesn't help you attend the meeting.
 
 ---
 
@@ -63,7 +63,7 @@ To bring a laptop to take notes during the session.
 
 ### --feedback--
 
-Bringing a laptop might be helpful, but it’s not essential information for attending the meeting.
+Bringing a laptop might be helpful, but it's not essential information for attending the meeting.
 
 ---
 
@@ -83,4 +83,4 @@ This is an important information, but it won't help you to attend the meeting. Q
 
 # --explanation--
 
-To answer correctly, focus on the details needed to attend the meeting: the `date`, `time`, `topic`, and `location`. These are listed under `Details` in the email. While informing a manager is important if you can’t attend, it doesn't help you participate in the session itself.
+To answer correctly, focus on the details needed to attend the meeting: the `date`, `time`, `topic`, and `location`. These are listed under `Details` in the email. While informing a manager is important if you can't attend, it doesn't help you participate in the session itself.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
index f3937b181d..0f98762db2 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
index a7ca1ea7ce..fcc6120590 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -79,8 +79,8 @@ Think about whether the email mentions anything about meetings or focuses on cyb
 
 ## --video-solution--
 
-1
+3
 
 # --explanation--
 
-The email states, `We’re adding a section on phishing, using real-life scenarios.` This shows that the new section is focused on identifying phishing attempts, not scheduling meetings.
+The email states, `We're adding a section on phishing, using real-life scenarios.` This shows that the new section is focused on identifying phishing attempts, not scheduling meetings.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
index cff9863927..b9b8acba45 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -47,7 +47,7 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Brian`
 
-What should you do if you can’t attend the meeting?
+What should you do if you can't attend the meeting?
 
 ## --answers--
 
@@ -84,4 +84,4 @@ Reflect on whether the email mentions this as an option or gives different instr
 
 # --explanation--
 
-The email says, `If you can’t attend, please inform your manager.` This clearly shows that the correct action is to inform your manager, not reschedule the meeting yourself.
+The email says, `If you can't attend, please inform your manager.` This clearly shows that the correct action is to inform your manager, not reschedule the meeting yourself.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
index 865b9759a4..d29fa0f85c 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
@@ -45,7 +45,7 @@ Yes, but only for a moment because she has her own problems.
 
 ### --feedback--
 
-Sarah doesn’t limit the time; she simply states that she is not busy.
+Sarah doesn't limit the time; she simply states that she is not busy.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
index ee9241e31c..f2f4e253a6 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
@@ -44,7 +44,7 @@ The live preview is working correctly.
 
 ### --feedback--
 
-If it were working correctly, Tom wouldn’t say that it isn’t showing.
+If it were working correctly, Tom wouldn't say that it isn't showing.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
index 24bb29a532..94a6c7425e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
@@ -44,7 +44,7 @@ Not have this feature.
 
 ### --feedback--
 
-Pay attention to how Tom’s initial statement about the problem connects with his question, showing his surprise that the feature isn’t working as expected.
+Pay attention to how Tom's initial statement about the problem connects with his question, showing his surprise that the feature isn't working as expected.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
index 2cca4413cc..eadfeafc80 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
@@ -15,7 +15,7 @@ This is a review of the entire dialogue you just studied.
 
 Place the following phrases in the correct spot:
 
-`Where can I`, `Is that right`, `How many` , `Do you know if`,`How does that`, `Does your app`.
+`Where can I`, `Is that right`, `How many` , `Do you know if`,`How does that`, and `Does your app`.
 
 # --fillInTheBlank--
 
@@ -29,7 +29,7 @@ Place the following phrases in the correct spot:
 
 `Lisa: We plan to develop a new app for real-time project collaboration. BLANK sound to you?`
 
-`Bob: Interesting! Who’s on your team?`
+`Bob: Interesting! Who's on your team?`
 
 `Lisa: A couple of developers from our branch in Seattle, and a UX designer I've collaborated with before. BLANK we have any similar projects coming up here?`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
index 4809d4e625..d1ad2f49cc 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
@@ -32,7 +32,7 @@ This is a contraction for `it is`, indicating who or what is involved in the act
 
 ### --feedback--
 
-This word is used to make the sentence negative, showing that the action isn’t happening.
+This word is used to make the sentence negative, showing that the action isn't happening.
 
 # --explanation--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
index cf06529d4b..c55863c153 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
@@ -44,11 +44,11 @@ Remember the verb `to be`.
 
 # --explanation--
 
-`Might` is used to express possibility. When Sarah says, `might not be running`, she’s suggesting that it’s possible the live server extension isn’t currently active or working. For example:
+`Might` is used to express possibility. When Sarah says, `might not be running`, she's suggesting that it's possible the live server extension isn't currently active or working. For example:
 
-- `The server might be down.` - It’s possible the server isn’t working.
+- `The server might be down.` - It's possible the server isn't working.
 
-- `She might not be available today.` - It’s possible she’s not free today.
+- `She might not be available today.` - It's possible she's not free today.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
index 7d795fbb9b..6ac0a66232 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
@@ -16,11 +16,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What is the probable reason the live preview isn’t working?
+What is the probable reason the live preview isn't working?
 
 ## --answers--
 
-The live preview isn’t supported in Visual Studio Code.
+The live preview isn't supported in Visual Studio Code.
 
 ### --feedback--
 
@@ -40,7 +40,7 @@ Consider why Sarah would mention an issue if everything was working properly.
 
 ---
 
-Sarah doesn’t know what the problem is.
+Sarah doesn't know what the problem is.
 
 ### --feedback--
 
@@ -54,7 +54,7 @@ Think about whether Sarah suggested a possible cause for the issue.
 
 Sarah mentions three things that will help you to help identify the issue.
 
-First, she says, `It should,` showing that the live preview is expected to work. Next, she states that it’s `not displaying,` which indicates a problem. Finally, she suggests a reason: `the live server extension might not be running.`
+First, she says, `It should,` showing that the live preview is expected to work. Next, she states that it's `not displaying,` which indicates a problem. Finally, she suggests a reason: `the live server extension might not be running.`
 
 By connecting these clues, you can determine the probable reason Sarah provides for the issue.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
index 7c6b1aa2df..f13a7f41ff 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
@@ -26,7 +26,7 @@ Which option is the best answer to Sarah's question?
 
 ### --feedback--
 
-This response doesn’t address whether Tom is using the extension Sarah mentioned.
+This response doesn't address whether Tom is using the extension Sarah mentioned.
 
 ---
 
@@ -38,7 +38,7 @@ This response doesn’t address whether Tom is using the extension Sarah mention
 
 # --explanation--
 
-Sarah is asking Tom if he’s using the live server extension, which is necessary for real-time previews in Visual Studio Code. Tom’s answer will help identify if this might be the cause of the problem. Select the option that answers Sarah's question.
+Sarah is asking Tom if he's using the live server extension, which is necessary for real-time previews in Visual Studio Code. Tom's answer will help identify if this might be the cause of the problem. Select the option that answers Sarah's question.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
index c03d740306..3a9346f3bc 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
@@ -28,9 +28,9 @@ These two words together mean to configure something so it works correctly.
 
 # --explanation--
 
-`Set up right` means to configure something correctly so that it works as expected. If something isn’t `set up right`, it might not function properly. For example:
+`Set up right` means to configure something correctly so that it works as expected. If something isn't `set up right`, it might not function properly. For example:
 
-- `The printer isn’t working because it’s not set up right.` - The printer isn’t configured correctly.
+- `The printer isn't working because it's not set up right.` - The printer isn't configured correctly.
 
 - `Make sure the software is set up right before you start using it.` - You need to configure the software correctly to ensure it works.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
index 2ed0f408a8..39e59c36ba 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
@@ -21,7 +21,7 @@ Which sentence correctly uses `pop up`?
 
 ### --feedback--
 
-Think about whether `pop up` describes something that happens automatically, or if it’s something you actively do.
+Think about whether `pop up` describes something that happens automatically, or if it's something you actively do.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
index f564cf3f65..12bab43332 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
@@ -46,7 +46,7 @@ These two words together mean something suddenly appearing on the screen. The fi
 
 `IntelliJ IDEA` is a popular Integrated Development Environment (IDE) used by developers to write, test, and debug code. It is known for its powerful features, including `auto-completion`, which helps you code faster by suggesting possible completions as you type.
 
-When Tom says that `auto-completion isn’t popping up`, he means that the feature, which normally suggests code as you type, isn’t appearing on the screen like it should.
+When Tom says that `auto-completion isn't popping up`, he means that the feature, which normally suggests code as you type, isn't appearing on the screen like it should.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
index ed6d30065a..223088f40a 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
@@ -6,7 +6,7 @@ dashedName: task-122
 ---
 
 <!-- Audio Reference:
-Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic? -->
 
 # --instructions--
 
@@ -20,7 +20,7 @@ Listen to the audio and complete the sentence below.
 
 ## --blanks--
 
-`Isn’t it`
+`Isn't it`
 
 ### --feedback--
 
@@ -30,11 +30,11 @@ A tag question using the contraction of `is not` followed by a pronoun. The firs
 
 A `tag question` is a short question added to the end of a sentence to confirm or check something. It's often used when the speaker expects the listener to agree with them. For example:
 
-- `It’s a nice day, isn’t it?` - The speaker expects that the listener will agree that it’s a nice day.
+- `It's a nice day, isn't it?` - The speaker expects that the listener will agree that it's a nice day.
 
-- `They are coming to the meeting, aren’t they?` - The speaker expects that the listener will agree that they are coming to the meeting.
+- `They are coming to the meeting, aren't they?` - The speaker expects that the listener will agree that they are coming to the meeting.
 
-When Tom says, `Isn’t it automatic?`, he is asking for confirmation that the auto-completion should happen automatically.
+When Tom says, `Isn't it automatic?`, he is asking for confirmation that the auto-completion should happen automatically.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
index e64bc75442..620bea5497 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
@@ -6,7 +6,7 @@ dashedName: task-123
 ---
 
 <!-- Audio Reference:
-Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic? -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Why does Tom ask `Isn’t it automatic?`
+Why does Tom ask `Isn't it automatic?`
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
index 5d377d7ee1..b9da55a2cf 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
@@ -6,7 +6,7 @@ dashedName: task-124
 ---
 
 <!-- Audio Reference:
-Tom: The code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: The code auto-completion isn't popping up. Isn't it automatic? -->
 
 <!-- SPEAKING -->
 
@@ -30,9 +30,9 @@ Which option is the best answer to Tom's question?
 
 ### --feedback--
 
-This options is wrong because it contradicts itself. It starts saying `It is`, confirming Tom’s question, but then it adds that auto-completion needs to be enabled manually every time.
+This options is wrong because it contradicts itself. It starts saying `It is`, confirming Tom's question, but then it adds that auto-completion needs to be enabled manually every time.
 
-This doesn’t make sense — if something is automatic, you wouldn’t need to enable it manually.
+This doesn't make sense — if something is automatic, you wouldn't need to enable it manually.
 
 ## --video-solution--
 
@@ -40,7 +40,7 @@ This doesn’t make sense — if something is automatic, you wouldn’t need to
 
 # --explanation--
 
-Tom says, `The code auto-completion isn't popping up. Isn’t it automatic?` This means he expects auto-completion to work automatically.
+Tom says, `The code auto-completion isn't popping up. Isn't it automatic?` This means he expects auto-completion to work automatically.
 
 A good response would either confirm that auto-completion should be automatic or explain why it might not be working.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
index fd842b9866..3f35eea8a3 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
@@ -42,7 +42,7 @@ In the `Present Simple` tense, the negative form is created using `doesn't` or `
 
 - Use `isn't` with forms of `to be` to show that something is not true, like `isn't set up.`
 
-In this sentence, you’ll need both `doesn't` and `isn't` to correctly describe why the feature isn’t working as expected.
+In this sentence, you'll need both `doesn't` and `isn't` to correctly describe why the feature isn't working as expected.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
index 46f8651fd9..075b4fed84 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
@@ -54,13 +54,13 @@ Pay attention to what Sarah says after `it doesn't work if...`.
 
 # --explanation--
 
-When Listening to Sarah’s, pay attention to the word `if`. This word often introduces the cause of a problem, explaining what needs to happen for something else to occur.
+When Listening to Sarah's, pay attention to the word `if`. This word often introduces the cause of a problem, explaining what needs to happen for something else to occur.
 
-After finding `if`, identify the part of the sentence that describes what happens when that condition isn’t met (the effect). In Sarah’s sentence:
+After finding `if`, identify the part of the sentence that describes what happens when that condition isn't met (the effect). In Sarah's sentence:
 
-- **Effect:** `The auto-completion doesn’t work`.
+- **Effect:** `The auto-completion doesn't work`.
 
-- **Cause** introduced by `if`: `If the project isn’t set up correctly`.
+- **Cause** introduced by `if`: `If the project isn't set up correctly`.
 
 Understanding this relationship helps you explain problems and solutions clearly.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
index 0d8514e8ec..1c6799b09d 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
@@ -22,11 +22,11 @@ Tom is not sure he checked the settings and wants to check it again. How can he
 
 ## --answers--
 
-`I don’t think the settings matter.`
+`I don't think the settings matter.`
 
 ### --feedback--
 
-The correct answer would say that he isn’t sure if he has checked the settings, so he needs to check them again.
+The correct answer would say that he isn't sure if he has checked the settings, so he needs to check them again.
 
 ---
 
@@ -38,11 +38,11 @@ The correct answer would say that he isn’t sure if he has checked the settings
 
 # --explanation--
 
-Sometimes, when you’re not sure if you’ve done something, it’s important to say that you’re unsure. For example:
+Sometimes, when you're not sure if you've done something, it's important to say that you're unsure. For example:
 
 - `I'm not sure this is the correct settings.` - You are unsure whether the settings are according to what is expected or not.
 
-The correct answer will reflect Tom’s uncertainty and his plan to check the settings again.
+The correct answer will reflect Tom's uncertainty and his plan to check the settings again.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
index 9d0529ccb8..bcdb2dece2 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
@@ -32,7 +32,7 @@ These two words together mean that something is necessary or required.
 
 ### --feedback--
 
-This verb means to look at something carefully to find out if it’s correct or working properly.
+This verb means to look at something carefully to find out if it's correct or working properly.
 
 ---
 
@@ -46,7 +46,7 @@ This word means to do something one more time.
 
 `Have to` is used to express that something is necessary or required. It indicates that there is no choice but to do something. For example:
 
-- `You have to save your changes before closing the program.` - This means it’s necessary to save changes before closing the program.
+- `You have to save your changes before closing the program.` - This means it's necessary to save changes before closing the program.
 
 When Tom says, `I'll have to check again`, he is stating that it's necessary for him to check the settings one more time, suggesting he's not sure about it.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
index 5193a4b374..26cc0e0e29 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
@@ -6,7 +6,7 @@ dashedName: task-130
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. -->
+Tom: And in Eclipse, it's not showing the Git tools. -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`And in Eclipse, BLANK BLANK showing the Git tools.`
+`And in Eclipse, BLANK BLANK the Git tools.`
 
 ## --blanks--
 
@@ -36,9 +36,9 @@ This word means that something is supposed to be visible. It ends with `-ing`.
 
 # --explanation--
 
-`It’s not showing` is used to explain that something expected to appear on the screen isn’t visible. For example:
+`It's not showing` is used to explain that something expected to appear on the screen isn't visible. For example:
 
-- `The image isn’t showing on the screen.` - The image is supposed to be there, but it’s not visible.
+- `The image isn't showing on the screen.` - The image is supposed to be there, but it's not visible.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
index 508b0dc14f..9b343d92f3 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
@@ -6,7 +6,7 @@ dashedName: task-131
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. -->
+Tom: And in Eclipse, it's not showing the Git tools. -->
 
 # --instructions--
 
@@ -20,7 +20,7 @@ What problem is Tom facing now?
 
 ## --answers--
 
-He doesn’t know how to use Git tools.
+He doesn't know how to use Git tools.
 
 ### --feedback--
 
@@ -28,11 +28,11 @@ Pay attention to the part where Tom talks about something that should be visible
 
 ---
 
-He can’t see the Git tools in Eclipse.
+He can't see the Git tools in Eclipse.
 
 ---
 
-He can’t open the Eclipse software.
+He can't open the Eclipse software.
 
 ### --feedback--
 
@@ -40,7 +40,7 @@ Pay attention to the part where Tom talks about something that should be visible
 
 ---
 
-He doesn’t have Git installed.
+He doesn't have Git installed.
 
 ### --feedback--
 
@@ -52,7 +52,7 @@ Pay attention to the part where Tom talks about something that should be visible
 
 # --explanation--
 
-Tom says, `it’s not showing the Git tools,` which gives important clues to identify his problem.
+Tom says, `it's not showing the Git tools,` which gives important clues to identify his problem.
 
 The key phrase is `not showing`, which points to a visibility issue rather than a problem with knowledge or installation.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
index 54cccc567f..106c722948 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
@@ -6,7 +6,7 @@ dashedName: task-132
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. Are they built-in? -->
+Tom: And in Eclipse, it's not showing the Git tools. Are they built-in? -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`And in Eclipse, it’s not showing the Git tools. Are they BLANK?`
+`And in Eclipse, it's not showing the Git tools. Are they BLANK?`
 
 ## --blanks--
 
@@ -30,7 +30,7 @@ Something has been included as part of a larger system or structure from the sta
 
 `Built-in` refers to features or tools that are included as part of a software program or device from the start, without needing to be added or installed separately.
 
-When something is `built-in`, it’s already there and ready to use. For example:
+When something is `built-in`, it's already there and ready to use. For example:
 
 - `This laptop has a built-in camera.` - The camera is included as part of the laptop.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
index 9aa50e0fc9..6ed79263c4 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
@@ -6,7 +6,7 @@ dashedName: task-133
 ---
 
 <!-- Audio Reference:
-Tom: It’s not showing the Git tools. Are they built-in? -->
+Tom: It's not showing the Git tools. Are they built-in? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
index 93318ded00..813f4789c4 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
@@ -20,7 +20,7 @@ According to Sarah, in which case won't the Git tools be visible?
 
 ## --answers--
 
-If the project isn’t saved correctly.
+If the project isn't saved correctly.
 
 ### --feedback--
 
@@ -28,7 +28,7 @@ Pay attention to what Sarah says after `but they're not visible if...`.
 
 ---
 
-If Eclipse isn’t updated to the latest version.
+If Eclipse isn't updated to the latest version.
 
 ### --feedback--
 
@@ -36,11 +36,11 @@ Pay attention to what Sarah says after `but they're not visible if...`.
 
 ---
 
-If the project isn’t linked to Git.
+If the project isn't linked to Git.
 
 ---
 
-If the Git tools aren’t installed manually.
+If the Git tools aren't installed manually.
 
 ### --feedback--
 
@@ -58,7 +58,7 @@ After `but`, Sarah mentions `they're not visible`, followed by the condition `if
 
 This tells you that the tools are hidden unless the project is connected to Git.
 
-The phrase `if the project isn't` is a key marker that introduces the condition under which the Git tools won’t appear.
+The phrase `if the project isn't` is a key marker that introduces the condition under which the Git tools won't appear.
 
 In Sarah's sentence, she uses `they're not` to explain that the Git tools are not visible, and `isn't` to say that the project is not linked to Git.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
index 6eebd117d0..4350295d82 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
@@ -34,7 +34,7 @@ When forming questions with the verb `to be`, the usual word order of the subjec
 
 - `Is your project connected to Git?` (Question)
 
-In Sarah’s sentence, she uses this inversion to ask Tom if his project is connected to Git in Eclipse.
+In Sarah's sentence, she uses this inversion to ask Tom if his project is connected to Git in Eclipse.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
index a62104b0ec..666757cb56 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
@@ -16,11 +16,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Tom believes his project should be connected to Git, but he isn’t completely sure. What should he answer Sarah?
+Tom believes his project should be connected to Git, but he isn't completely sure. What should he answer Sarah?
 
 ## --answers--
 
-`It’s supposed to be.`
+`It's supposed to be.`
 
 ---
 
@@ -36,11 +36,11 @@ Think about whether Tom is completely sure about the connection.
 
 # --explanation--
 
-Sometimes, when you're not completely sure about something, but you believe it should be true, you can use the phrase `It’s supposed to` + verb.
+Sometimes, when you're not completely sure about something, but you believe it should be true, you can use the phrase `It's supposed to` + verb.
 
-This will express that something is expected to be a certain way, even if you haven’t confirmed it yet. For example:
+This will express that something is expected to be a certain way, even if you haven't confirmed it yet. For example:
 
-- `The update is supposed to fix the bug.` - This means you expect the update to fix the bug, but you haven’t confirmed it yet.
+- `The update is supposed to fix the bug.` - This means you expect the update to fix the bug, but you haven't confirmed it yet.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
index e6ae198ef7..6ecd32ea6a 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
@@ -32,13 +32,13 @@ These two words start the sentence and are used to describe something that is ha
 
 ### --feedback--
 
-An adjective that describes the feeling of being upset or annoyed because something isn’t working as expected. It ends with `-ing`.
+An adjective that describes the feeling of being upset or annoyed because something isn't working as expected. It ends with `-ing`.
 
 # --explanation--
 
 `This is` is a simple way to start a sentence when describing something.
 
-`Frustrating` is an adjective that describes a feeling of being upset or annoyed because something isn’t working as expected. For example:
+`Frustrating` is an adjective that describes a feeling of being upset or annoyed because something isn't working as expected. For example:
 
 - `This is confusing.` - The situation is hard to understand.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
index 5c1cb4919d..dc90df92b0 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
@@ -20,7 +20,7 @@ Why is Tom frustrated?
 
 ## --answers--
 
-Because he doesn’t know how to code.
+Because he doesn't know how to code.
 
 ### --feedback--
 
@@ -28,7 +28,7 @@ Tom's frustration is not related to his coding skills.
 
 ---
 
-Because he didn’t save his project.
+Because he didn't save his project.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
index f182ad1168..9b4afa7617 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
@@ -30,11 +30,11 @@ This word introduces the condition or situation that causes something to happen.
 
 `when` is used here to describe a specific condition or situation that causes something to happen.
 
-In Sarah’s sentence, `when` introduces the condition where the IDEs become tricky: `if they’re not set up properly`. For example:
+In Sarah's sentence, `when` introduces the condition where the IDEs become tricky: `if they're not set up properly`. For example:
 
 - `The program crashes when it runs out of memory.` - The condition of running out of memory causes the program to crash.
 
-- `The printer only works when it’s plugged in.` - The condition of being plugged in allows the printer to work.
+- `The printer only works when it's plugged in.` - The condition of being plugged in allows the printer to work.
 
 In both cases, `when` is used to explain the situation in which something occurs.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
index cf4c22aa7c..c9a8a3d164 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
@@ -41,7 +41,7 @@ The IDEs are tricky because they lack built-in tools.
 
 ### --feedback--
 
-Reflect on whether Sarah’s explanation was about built-in tools or the setup of the IDEs.
+Reflect on whether Sarah's explanation was about built-in tools or the setup of the IDEs.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
index 60dd081e30..6fe398be0c 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
@@ -26,7 +26,7 @@ Tom wants to accept Sarah's offer. How could he reply to her?
 
 ---
 
-`I’m not sure if that will help.`
+`I'm not sure if that will help.`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
index e0451e2128..643e541962 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
@@ -29,11 +29,11 @@ Place the following phrases in the correct spot:
 
 `Sarah: It should, but BLANK because the live server extension might not be running. Are you using that extension for real-time previews?`
 
-`Tom: I think we are, but maybe BLANK right. Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic?`
+`Tom: I think we are, but maybe BLANK right. Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic?`
 
 `Sarah: It usually is, but it doesn't work if the project isn't set up right. Have you checked the settings?`
 
-`Tom: I'll have to check again. And in Eclipse, it’s not showing the Git tools. BLANK built in?`
+`Tom: I'll have to check again. And in Eclipse, it's not showing the Git tools. BLANK built in?`
 
 `Sarah: Yes, they are, but BLANK if the project isn't linked to Git. Is your project connected to Git in Eclipse?`
 
@@ -57,7 +57,7 @@ This phrase is used when checking if something should be working automatically.
 
 ### --feedback--
 
-This phrase indicates that something expected to be visible on the screen isn’t appearing.
+This phrase indicates that something expected to be visible on the screen isn't appearing.
 
 ---
 
@@ -65,7 +65,7 @@ This phrase indicates that something expected to be visible on the screen isn’
 
 ### --feedback--
 
-This phrase explains that something isn’t arranged or configured correctly.
+This phrase explains that something isn't arranged or configured correctly.
 
 ---
 
@@ -81,7 +81,7 @@ This phrase is used to ask if something, like the Git tools, is included or buil
 
 ### --feedback--
 
-This phrase indicates that something, like the Git tools, can’t be seen on the screen.
+This phrase indicates that something, like the Git tools, can't be seen on the screen.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
index 7078fc94a0..4bb912d098 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
@@ -27,17 +27,17 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
 `Best, Sarah`
 
-What should Tom do if the Live Preview isn’t displaying in Visual Studio Code?
+What should Tom do if the Live Preview isn't displaying in Visual Studio Code?
 
 ## --answers--
 
@@ -45,7 +45,7 @@ Restart Visual Studio Code and check the project settings.
 
 ### --feedback--
 
-Consider whether restarting the program is Sarah’s suggested solution or if she focuses more on project settings.
+Consider whether restarting the program is Sarah's suggested solution or if she focuses more on project settings.
 
 ---
 
@@ -65,7 +65,7 @@ Switch to a different IDE to see if the issue persists. She prefers Eclipse.
 
 ### --feedback--
 
-Reflect on whether Sarah’s advice is about changing IDEs or troubleshooting within Visual Studio Code.
+Reflect on whether Sarah's advice is about changing IDEs or troubleshooting within Visual Studio Code.
 
 ## --video-solution--
 
@@ -73,8 +73,8 @@ Reflect on whether Sarah’s advice is about changing IDEs or troubleshooting wi
 
 # --explanation--
 
-To find the answer, focus on the section of Sarah’s email labeled `1. Visual Studio Code - Live preview.`
+To find the answer, focus on the section of Sarah's email labeled `1. Visual Studio Code - Live preview.`
 
-In this part, she explains that if the Live Preview isn’t displaying, Tom should first make sure the live server extension is installed and running.
+In this part, she explains that if the Live Preview isn't displaying, Tom should first make sure the live server extension is installed and running.
 
-Then, if it’s still not working, she advises checking the project settings to ensure everything is correctly set up for real-time previews.
+Then, if it's still not working, she advises checking the project settings to ensure everything is correctly set up for real-time previews.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
index cd6ca7c8a9..b010db7d26 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -41,7 +41,7 @@ Why might auto-completion not work in IntelliJ IDEA, according to Sarah's email?
 
 ## --answers--
 
-The live server extension isn’t installed.
+The live server extension isn't installed.
 
 ### --feedback--
 
@@ -53,7 +53,7 @@ The Git tools are not visible.
 
 ### --feedback--
 
-Consider whether the visibility of Git tools affects auto-completion, or if it’s more about the project setup.
+Consider whether the visibility of Git tools affects auto-completion, or if it's more about the project setup.
 
 ---
 
@@ -75,4 +75,4 @@ Reflect on whether Sarah mentioned file corruption as a reason for auto-completi
 
 Pay close attention to the section labeled `2. IntelliJ IDEA - Auto-Completion.`
 
-In this part, Sarah mentions that if auto-completion isn’t working, the problem is likely due to the project not being set up correctly. She suggests checking the project settings and verifying that all necessary plugins are enabled.
+In this part, Sarah mentions that if auto-completion isn't working, the problem is likely due to the project not being set up correctly. She suggests checking the project settings and verifying that all necessary plugins are enabled.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
index e4b2db4d62..d46dd94d8d 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -41,7 +41,7 @@ What does Sarah say about the Git tools in Eclipse?
 
 ## --answers--
 
-They are built-in but won’t be visible unless your project is linked to Git.
+They are built-in but won't be visible unless your project is linked to Git.
 
 ---
 
@@ -61,7 +61,7 @@ Consider if Sarah said the tools are automatically visible or if she mentioned a
 
 ---
 
-They only work if you’re using IntelliJ IDEA.
+They only work if you're using IntelliJ IDEA.
 
 ### --feedback--
 
@@ -75,4 +75,4 @@ Reflect on whether Sarah was talking about Eclipse or if this applies to a diffe
 
 Sarah provides instructions specifically about the Git tools in Eclipse under the section `3. Eclipse - Git Tools.`
 
-She mentions that the tools are built-in, but they won’t be visible unless the project is linked to Git. 
+She mentions that the tools are built-in, but they won't be visible unless the project is linked to Git. 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
index 6f49f93d04..c77c188650 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -53,7 +53,7 @@ She suggests that Tom should hire someone else to fix the issues.
 
 ### --feedback--
 
-Consider if Sarah’s tone is more supportive or if she is suggesting an alternative solution.
+Consider if Sarah's tone is more supportive or if she is suggesting an alternative solution.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
index 52fa983677..b00e7e2457 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
@@ -1,8 +1,8 @@
 ---
 id: 66609f86c2500e597c8cb52f
-title: "Dialogue 1: I'm Tom"
+title: "Dialogue 1: Scheduled Maintenance to Prevent DoS Attacks"
 challengeType: 21
-dashedName: dialogue-1-im-tom
+dashedName: dialogue-1-scheduled-maintenance-to-prevent-dos-attacks
 ---
 
 # --description--
@@ -11,48 +11,177 @@ Watch the video below to understand the context of the upcoming lessons.
 
 # --assignment--
 
-Watch the video
+Watch the video.
 
 # --scene--
 
 ```json
 {
-  "setup": {
-    "background": "chaos.png",
-    "characters": [
-      {
-        "character": "David",
-        "position": {"x":50,"y":80,"z":8},
-        "opacity": 0
-      }
-    ],
-    "audio": {
-      "filename": "1.1-1.mp3",
-      "startTime": 1,
-      "startTimestamp": 5.7,
-      "finishTimestamp": 6.48
-    }
-  },
-  "commands": [
-    {
-      "character": "David",
-      "opacity": 1,
-      "startTime": 0
-    },
-    {
-      "character": "David",
-      "startTime": 1,
-      "finishTime": 0.78,
-      "dialogue": {
-        "text": "I'm Tom.",
-        "align": "center"
-      }
-    },
-    {
-      "character": "Tom",
-      "opacity": 0,
-      "startTime": 1.28
-    }
-  ]
+ "setup": {
+   "background": "company2-boardroom.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Maria",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 4.94,
+     "dialogue": {
+       "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 5.22,
+     "finishTime": 10.94,
+     "dialogue": {
+       "text": "It's crucial to enhance our firewall settings to prevent any potential denial of service attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 11.9,
+     "finishTime": 17.52,
+     "dialogue": {
+       "text": "Yes, Jake. I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 18.4,
+     "finishTime": 21.06,
+     "dialogue": {
+       "text": "That's right. The update should last about two hours.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 21.42,
+     "finishTime": 25.52,
+     "dialogue": {
+       "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 26.1,
+     "finishTime": 31.76,
+     "dialogue": {
+       "text": "Will the support team be on call during the update? We need to make sure they're ready to handle any immediate issues that come up.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 32.78,
+     "finishTime": 35.44,
+     "dialogue": {
+       "text": "Absolutely. The entire technical support team will be on duty.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 35.82,
+     "finishTime": 40,
+     "dialogue": {
+       "text": "They've been briefed and are prepared to manage any unexpected situations.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 40.5,
+     "finishTime": 42.74,
+     "dialogue": {
+       "text": "Great. And when does the team perform the final checks?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 43.12,
+     "finishTime": 45.78,
+     "dialogue": {
+       "text": "The final system checks are set for Friday night.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 46.1,
+     "finishTime": 51.18,
+     "dialogue": {
+       "text": "We'll confirm that all security patches are ready to be deployed without any complications.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 51.76,
+     "finishTime": 55.42,
+     "dialogue": {
+       "text": "Perfect. And the training session for the new security protocols, when is that planned?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 55.42,
+     "finishTime": 57.98,
+     "dialogue": {
+       "text": "The training is planned for Thursday afternoon.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 58.44,
+     "finishTime": 63.06,
+     "dialogue": {
+       "text": "Every team member must understand the changes and how these will impact our operations.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 63.56
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 64.06
+   }
+ ]
 }
 ```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
new file mode 100644
index 0000000000..d78c313753
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
@@ -0,0 +1,90 @@
+---
+id: 673519c3d750b013c96f1e6f
+title: Task 1
+challengeType: 22
+dashedName: task-1
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Maria, the next BLANK BLANK is scheduled for this Saturday at 2 AM.`
+
+## --blanks--
+
+`system`
+
+### --feedback--
+
+This word refers to the entire software or hardware environment needing improvement or maintenance.
+
+---
+
+`update`
+
+### --feedback--
+
+This word describes a new version or change that improves software or adds features.
+
+# --explanation--
+
+A `system update` is an essential process that makes improvements, adds new features, or corrects issues in the software on a device or network. For example:
+
+- `The system update included security improvements to protect user data.` - The update made changes to help keep user information safe from potential threats.
+
+- `After the system update, the device ran faster and had new features.` - The update improved device speed and added new functionalities, making it more efficient and useful.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
new file mode 100644
index 0000000000..5d6e6f115b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
@@ -0,0 +1,107 @@
+---
+id: 67351b96eefe7c282ec1424b
+title: Task 2
+challengeType: 19
+dashedName: task-2
+---
+
+<!-- (Audio) Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has been scheduled?
+
+## --answers--
+
+The next system update.
+
+---
+
+A team meeting.
+
+### --feedback--
+
+James does not mention a meeting.
+
+---
+
+A system backup.
+
+### --feedback--
+
+James doesn't mention a backup.
+
+---
+
+A software installation.
+
+### --feedback--
+
+James doesn't mention a new installation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`To be scheduled` means to set a specific date and time for something to happen. In this case, the system update is planned for a specific day and hour. For example:
+
+- `The meeting is scheduled for Monday at 10 AM.` - This means the meeting will happen on Monday at 10 AM.
+
+- `The release is scheduled for next month.` - This means the release will take place sometime in the upcoming month.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
new file mode 100644
index 0000000000..57d207b4f2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
@@ -0,0 +1,108 @@
+---
+id: 673653fa580778853a7a7afd
+title: Task 3
+challengeType: 19
+dashedName: task-3
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is the system update scheduled?
+
+## --answers--
+
+This Sunday at 2 AM.
+
+### --feedback--
+
+Check if Jake mentions Saturday or Sunday for the update.
+
+---
+
+This Saturday at 2 AM.
+
+---
+
+Next Saturday at 2 PM.
+
+### --feedback--
+
+Check if Jake specifies a morning or afternoon time and which Saturday he means.
+
+---
+
+Past Saturday at 2 AM.
+
+### --feedback--
+
+Consider whether Jake refers to a future date or something that has already passed.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`This` and `next` help clarify if an event is scheduled soon or further in the future.
+
+In this case, `this Saturday at 2 AM` refers to the upcoming Saturday and a specific early morning time chosen to minimize disruption. For example:
+
+- `The meeting is scheduled for this Friday at 9 AM.` - This means the meeting is set for the closest Friday at 9 AM.
+
+- `Our next session is next Tuesday at 4 PM.` - This means the session will occur on the Tuesday following this week, at 4 PM.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
new file mode 100644
index 0000000000..15bbeeacc3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
@@ -0,0 +1,82 @@
+---
+id: 673654d11366b18b1c76d980
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to BLANK our firewall settings.`
+
+## --blanks--
+
+`enhance`
+
+### --feedback--
+
+This word means to improve or make something stronger or more effective.
+
+# --explanation--
+
+`Enhance` means to improve something or make it more effective. For example:
+
+- `We need to enhance our website's security features.` - This means improving or strengthening the website's security.
+
+- `The new update enhances the app's performance.` - This means the update improves how well the app works.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.02,
+      "finishTimestamp": 6.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.6,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.1
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
new file mode 100644
index 0000000000..2da226cc72
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
@@ -0,0 +1,107 @@
+---
+id: 673655ea628630928b5b50b8
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings to prevent any potential denial of service attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to enhance our firewall settings to prevent any potential BLANK BLANK BLANK attacks.`
+
+## --blanks--
+
+`denial`
+
+### --feedback--
+
+This word refers to refusing or blocking something from happening.
+
+---
+
+`of`
+
+### --feedback--
+
+This word is a short preposition often used to link two related ideas.
+
+---
+
+`service`
+
+### --feedback--
+
+This word describes a type of assistance or functionality provided, such as by a network.
+
+# --explanation--
+
+A `Denial of Service (DoS)` attack is a cyber-attack intended to make a network or service unavailable to its intended users, usually by overwhelming it with traffic. This type of attack disrupts normal service, causing slowdowns or complete outages. For example:
+
+- `The system went down due to a denial of service attack.` - This means the system became unavailable because it was overwhelmed by malicious traffic.
+
+- `Enhanced firewall settings can help prevent DoS attacks.` - This means improved firewall configurations can reduce the risk of such attacks by blocking unwanted traffic.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.22,
+      "finishTimestamp": 9.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.4,
+      "finishTime": 6.72,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
new file mode 100644
index 0000000000..a63034725a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
@@ -0,0 +1,110 @@
+---
+id: 6736576b5407af9bdf1f41b7
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What should be enhanced?
+
+## --answers--
+
+Network speed.
+
+### --feedback--
+
+Jake is not discussing the network's speed or performance.
+
+---
+
+Software compatibility.
+
+### --feedback--
+
+Jake is not focused on compatibility between different software.
+
+---
+
+Firewall settings.
+
+---
+
+User interface.
+
+### --feedback--
+
+Jake's focus is on something related to security, not appearance or design.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+A `firewall` is a security system that protects a network by controlling incoming and outgoing network traffic based on security rules.
+
+`Settings` refer to configurations or adjustments that determine how something functions.
+
+`Firewall settings` are the specific rules or configurations used to manage network security. For example:
+
+- `We updated the firewall settings to block unauthorized access.` - This means adjustments were made to prevent access by unauthorized users.
+
+- `Enhancing firewall settings can help prevent cyber attacks.` - This means improving the configurations to increase security against online threats.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.02,
+      "finishTimestamp": 6.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.6,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.1
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
new file mode 100644
index 0000000000..2c32852ecc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
@@ -0,0 +1,113 @@
+---
+id: 67365a08481f68acc18a9639
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings to prevent any potential denial of service attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why does Jake want to enhance their firewall settings?
+
+## --answers--
+
+To improve network speed.
+
+### --feedback--
+
+Consider if Jake's focus is on security or performance.
+
+---
+
+To add new features.
+
+### --feedback--
+
+Think about whether Jake mentions adding anything new, or if he is more focused on protection.
+
+---
+
+To fix a current security issue.
+
+### --feedback--
+
+Jake refers to a potential risk, not a current issue that needs fixing.
+
+---
+
+To prevent Denial of Service attacks.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the audio, `to prevent` is a key marker that shows Jake's main reason for enhancing the firewall settings.
+
+He emphasizes prevention, specifically mentioning `Denial of Service attacks` as the potential risk.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.22,
+      "finishTimestamp": 9.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.4,
+      "finishTime": 6.72,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
new file mode 100644
index 0000000000..749d8c4e97
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
@@ -0,0 +1,109 @@
+---
+id: 673ba128855f6e78cd392dab
+title: Task 8
+challengeType: 19
+dashedName: task-8
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. It's crucial to enhance our firewall settings to prevent any potential DoS attacks. -->
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the best response to Jake's comment?
+
+## --answers--
+
+`Yes, Jake. I've reviewed the timetable.`
+
+---
+
+`Yes, Jake. The moon looks great tonight.`
+
+### --feedback--
+
+This response is unrelated to Jake's comment about the system update and firewall settings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+A `timetable` is a schedule that outlines the times and dates of planned events or activities. In this context, Jake refers to a timetable for the system update, and Maria mentions reviewing it, showing she is prepared. For example:
+
+- `The timetable for the train is posted at the station.` - This means the schedule for train arrivals and departures is available for reference.
+
+- `We created a timetable to organize our project milestones.` - This means a schedule was set up to track when each project goal should be achieved.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 10.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2 AM.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.96,
+      "finishTime": 7.62,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 7.63,
+      "finishTime": 10.34,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 11.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
new file mode 100644
index 0000000000..8a0e9ae740
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
@@ -0,0 +1,82 @@
+---
+id: 673ba3a9d1858104dfbba180
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) Maria: Yes, Jake. I've reviewed the timetable. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, Jake. I've reviewed the BLANK.`
+
+## --blanks--
+
+`timetable`
+
+### --feedback--
+
+This word refers to a schedule that organizes events or activities based on time.
+
+# --explanation--
+
+A `timetable` is a schedule that outlines the times and dates of planned events or activities. It is used to organize and keep track of when specific tasks, meetings, or updates will happen. For example:
+
+- `The timetable for the conference was shared last week.` - This means the schedule of sessions and events for the conference was provided.
+
+- `Our team follows a weekly timetable for project check-ins.` - This means there is a set schedule each week for the team to review progress.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.7,
+      "finishTimestamp": 12.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.0,
+      "dialogue": {
+        "text": "Yes, Jake. I've reviewed the timetable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
new file mode 100644
index 0000000000..104e394e0c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
@@ -0,0 +1,106 @@
+---
+id: 673ba5bf35e3b51211c27c2b
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- (Audio) Maria: Yes, Jake, I've reviewed the timetable. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has Maria done?
+
+## --answers--
+
+She has changed the timetable.
+
+### --feedback--
+
+Consider whether Maria mentions making any edits or changes.
+
+---
+
+She has ignored the timetable.
+
+### --feedback--
+
+Think about whether Maria shows she has paid attention to the timetable.
+
+---
+
+She has created a timetable.
+
+### --feedback--
+
+Check if Maria refers to an existing timetable or mentions making a new one.
+
+---
+
+She has reviewed the timetable.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Maria's statement, `Yes, Jake, I've reviewed the timetable`, shows she has already checked or looked over the schedule for the system update. `To review` something means to examine or go over it carefully. For example:
+
+- `I reviewed the project proposal before the meeting.` - This means you checked the proposal to understand it.
+
+- `She reviewed the instructions before starting the task.` - This means she examined the instructions to ensure she knew what to do.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.7,
+      "finishTimestamp": 12.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.0,
+      "dialogue": {
+        "text": "Yes, Jake. I've reviewed the timetable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
new file mode 100644
index 0000000000..eab87a114a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
@@ -0,0 +1,101 @@
+---
+id: 673ba72bd5ef6a1bc39ba037
+title: Task 11
+challengeType: 22
+dashedName: task-11
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The BLANK BLANK starts exactly when the user traffic is at its lowest, correct?`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This word refers to a computer system that provides services, resources, or data to other computers on a network.
+
+---
+
+`downtime`
+
+### --feedback--
+
+This word refers to a period when a system or service is not available or operational.
+
+# --explanation--
+
+`Downtime` is a period when a system or service is unavailable or not operational. It is often scheduled to perform maintenance, updates, or repairs.
+
+`Server downtime` specifically refers to the time when a server — a computer system that provides data, services, or resources to other devices — is temporarily unavailable. For example:
+
+- `The server downtime was scheduled at midnight to minimize the impact on users.` - This means the server was made unavailable at midnight to reduce inconvenience to users.
+
+- `Unexpected downtime occurred due to a power failure.` - This means the system became unavailable without prior planning because of a power outage.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
new file mode 100644
index 0000000000..3e4a44f387
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
@@ -0,0 +1,111 @@
+---
+id: 673ba8558f0a93235de58ccb
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The server downtime starts exactly when the user traffic is BLANK BLANK BLANK, correct?`
+
+## --blanks--
+
+`at`
+
+### --feedback--
+
+This is a preposition used to indicate a specific time or condition.
+
+---
+
+`its`
+
+### --feedback--
+
+This is a possessive pronoun referring to something that belongs to or is related to the server traffic.
+
+---
+
+`lowest`
+
+### --feedback--
+
+This is the superlative form of `low`, describing the smallest amount or level.
+
+# --explanation--
+
+The pronoun `its` is a possessive pronoun that indicates something belongs to or is associated with a subject. For example:
+
+`The system operates best when its temperature is regulated.` - This means the system works well when the temperature belonging to it is controlled.
+
+The word `lowest` is the superlative form of `low`, meaning the least amount or the smallest degree. For example:
+
+`The lowest temperature recorded was in the early morning.` - This means the smallest temperature measured occurred in the morning.
+
+In Maria's sentence, `at its lowest` refers to the lowest level of user traffic for the server.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
new file mode 100644
index 0000000000..e814301b9d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
@@ -0,0 +1,111 @@
+---
+id: 673ba99a1280af2ba7770b56
+title: Task 13
+challengeType: 19
+dashedName: task-13
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does the server downtime start?
+
+## --answers--
+
+When the user traffic is at its peak.
+
+### --feedback--
+
+Consider whether downtime would be planned when the server is most active. Think about when the least disruption would occur.
+
+---
+
+When the user traffic is at its lowest.
+
+---
+
+When the server needs a reboot.
+
+### --feedback--
+
+Maria does not mention any specific technical need like a reboot. Focus on what she says about traffic.
+
+---
+
+When new features are added.
+
+### --feedback--
+
+Maria is talking about downtime related to user traffic, not updates or feature additions. Pay attention to the context of the sentence.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria states that the server downtime starts when `the user traffic is at its lowest`. This indicates the downtime is planned for a time with minimal user activity, likely to reduce the impact on users.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
new file mode 100644
index 0000000000..f3712a2e98
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
@@ -0,0 +1,101 @@
+---
+id: 673bab51ecb42c369eb6b37b
+title: Task 14
+challengeType: 19
+dashedName: task-14
+---
+
+<!-- (Audio) Maria: Yes, Jake, I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the best answer to Maria's question?
+
+## --answers--
+
+`That's right. The update lasted about two hours.`
+
+### --feedback--
+
+Check if the response uses the correct tense for a future event. Maria is asking about something that hasn't happened yet.
+
+---
+
+`That's right. The update should last about two hours.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria's question uses the `Present Simple` tense, `The server downtime starts...`, to talk about a planned event.
+
+This is common when discussing schedules or timetables, as the `Present Simple` indicates something fixed or organized in the future. Her intention is to confirm the timing of the downtime as planned.
+
+The answer, `That's right. The update should last about two hours`, confirms her statement and provides additional detail about the expected duration of the update.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
new file mode 100644
index 0000000000..b92c074789
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
@@ -0,0 +1,94 @@
+---
+id: 673bad5d57b0a6444819ca0e
+title: Task 15
+challengeType: 22
+dashedName: task-15
+---
+
+<!-- (Audio) Jake: That's right. The update should last about two hours. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That's right. The update BLANK BLANK about two hours.`
+
+## --blanks--
+
+`should`
+
+### --feedback--
+
+This modal verb is used to express an expectation or likelihood of something happening.
+
+---
+
+`last`
+
+### --feedback--
+
+This word means to continue for a specific period of time.
+
+# --explanation--
+
+`Should` is used to express an expectation or something that is likely to happen.
+
+`Last` means to continue or endure for a specific amount of time. For example:
+
+- `The meeting should last for one hour.` - This means it is expected that the meeting will take one hour to complete.
+
+- `This battery should last up to five hours.` - This indicates the expected duration of the battery's performance.
+
+Together, `should last` expresses the anticipated length of time something will continue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.4,
+      "finishTimestamp": 20.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "That's right. The update should last about two hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
new file mode 100644
index 0000000000..1277e59b5e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
@@ -0,0 +1,92 @@
+---
+id: 673baec00a78e04d5c6a9ea2
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Our main goal is to BLANK BLANK while strengthening our defenses.`
+
+## --blanks--
+
+`minimize`
+
+### --feedback--
+
+This word means to reduce something to the smallest possible amount or degree.
+
+---
+
+`disruption`
+
+### --feedback--
+
+This word refers to a disturbance or interruption in the normal flow or operation of something.
+
+# --explanation--
+
+`Minimize` means to reduce something to the smallest amount or degree possible.
+
+`Disruption` refers to any interruption or disturbance in normal activity.
+
+Together, `minimize disruption` means to reduce interruptions or disturbances to the lowest level possible. For example:
+
+`The team worked at night to minimize disruption to daily operations.` - This means they scheduled their work at night to cause the least amount of interference during the day.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.32,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.4,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
new file mode 100644
index 0000000000..bc428e2aa0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
@@ -0,0 +1,80 @@
+---
+id: 673c03eb9c3d4c2e12555aaf
+title: Task 17
+challengeType: 22
+dashedName: task-17
+---
+
+<!-- (Audio) Jake: Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Our main goal is to minimize disruption while BLANK our defenses.`
+
+## --blanks--
+
+`strengthening`
+
+### --feedback--
+
+This word refers to the process of making something stronger or more secure. It ends in `-ing`.
+
+# --explanation--
+
+`Strengthening` describes the ongoing process of making something stronger. For example:
+
+`We are strengthening our defenses to improve security.` - This means actively working to make the defenses better and more secure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.32,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.4,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
new file mode 100644
index 0000000000..972e3636ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
@@ -0,0 +1,113 @@
+---
+id: 673c06abb58d403f7e4533fb
+title: Task 18
+challengeType: 19
+dashedName: task-18
+---
+
+<!-- (Audio) Jake: That's right. The update should last about two hours. Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the expected outcome?
+
+## --answers--
+
+The update completely avoids all disruption.
+
+### --feedback--
+
+Consider whether Jake mentions completely avoiding disruption or minimizing it.
+
+---
+
+The update weakens defenses while maintaining user traffic.
+
+### --feedback--
+
+Think about whether Jake's goal is to weaken defenses or strengthen them.
+
+---
+
+The update causes minimal disruption and strengthens defenses.
+
+---
+
+The update distracts users to implement new features.
+
+### --feedback--
+
+Jake is focused on minimizing disruption, not on distracting users, and does not mention new features.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To identify the expected outcome, listen for the parts of the audio where Jake states the goals of the update.
+
+He mentions `minimize disruption` and `strengthening our defenses`, which clearly outline what the update aims to achieve.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.4,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "That's right. The update should last about two hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.02,
+      "finishTime": 8.32,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
new file mode 100644
index 0000000000..368a66821f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
@@ -0,0 +1,92 @@
+---
+id: 673c07da6aa1be470dc55332
+title: Task 19
+challengeType: 22
+dashedName: task-19
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK the support team be BLANK during the update?`
+
+## --blanks--
+
+`Will`
+
+### --feedback--
+
+It is used to indicate the future in this structure. The first letter is capitalized.
+
+---
+
+`on call`
+
+### --feedback--
+
+This phrase means being available online to provide support or help if needed.
+
+# --explanation--
+
+`On call` means being available online to provide help or support if necessary.
+
+This sentence uses the structure `Will + subject + verb` to ask about a planned event in the future. This structure is common in formal questions about future arrangements. For example:
+
+- `Will the meeting start at 10 AM?` - This is asking if the meeting is scheduled to begin at that specific time.
+
+- `Will they join us for dinner?` - This is asking if they have plans to come to dinner.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
new file mode 100644
index 0000000000..a0ff078d7f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
@@ -0,0 +1,104 @@
+---
+id: 673c097ad524db51cca7ae3f
+title: Task 20
+challengeType: 19
+dashedName: task-20
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to confirm about the support team?
+
+## --answers--
+
+If they will be on call during the update.
+
+---
+
+If they will perform the update themselves.
+
+### --feedback--
+
+Think about whether Maria is asking about the team's role or their availability.
+
+---
+
+If they will monitor user traffic.
+
+### --feedback--
+
+Consider whether Maria refers to managing user activity or being available to assist.
+
+---
+
+If they will install new features.
+
+### --feedback--
+
+Maria's question focuses on their availability, not specific tasks like feature installation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria uses the structure `Will the support team be on call during the update?` to ask if they will be available to help if needed.
+
+Pay attention to the phrase `on call` to understand her intention.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
new file mode 100644
index 0000000000..499a16488a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
@@ -0,0 +1,102 @@
+---
+id: 673c0bf736904660a9077269
+title: Task 21
+challengeType: 19
+dashedName: task-21
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If the support team might install new features during the update.
+
+### --feedback--
+
+Think about whether Maria's question mentions feature installation or their availability.
+
+---
+
+If the support team is not required to assist during the update.
+
+### --feedback--
+
+Consider whether Maria's question implies the team is unnecessary or if she is confirming their availability.
+
+---
+
+If the support team will be on call during the update.
+
+---
+
+If the support team will work on managing user activity.
+
+### --feedback--
+
+Maria's question does not focus on user activity but rather their availability.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Maria's question, `Will the support team be on call during the update?`, is asking about a future event in which the team needs to be available to assist.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
new file mode 100644
index 0000000000..5cafb2b6ae
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
@@ -0,0 +1,101 @@
+---
+id: 67472118e6040e52ad3ca5b0
+title: Task 22
+challengeType: 22
+dashedName: task-22
+---
+
+<!-- (Audio) Maria:  We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We need to make sure they're ready to BLANK any immediate BLANK that come up.`
+
+## --blanks--
+
+`handle`
+
+### --feedback--
+
+This word means to manage, deal with, or take care of something.
+
+---
+
+`issues`
+
+### --feedback--
+
+This word refers to problems or concerns that need to be addressed or resolved.
+
+# --explanation--
+
+`Handle` means to deal with or manage a task or situation effectively.
+
+`Issues` refers to problems or concerns that require attention or resolution. Together, `handle issues` suggests managing or solving problems as they occur. For example:
+
+- `The technician handled the issue quickly.` - This means the technician managed or resolved the problem efficiently.
+
+- `Addressing these issues is critical for project success.` - This refers to focusing on and resolving problems that affect the project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
new file mode 100644
index 0000000000..8c23c475f4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
@@ -0,0 +1,115 @@
+---
+id: 67472280c0b01f5e1442f8da
+title: Task 23
+challengeType: 19
+dashedName: task-23
+---
+
+<!-- (Audio) Maria: We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to ensure?
+
+## --answers--
+
+That they've already solved all the issues.
+
+### --feedback--
+
+Maria is talking about preparation for future problems, not resolving something that has already been handled.
+
+---
+
+That they're ready to handle any immediate issues.
+
+---
+
+That they avoid dealing with any issues.
+
+### --feedback--
+
+Maria emphasizes readiness, not avoidance. Think about whether she wants them to act or ignore.
+
+---
+
+That they focus only on long-term problems.
+
+### --feedback--
+
+Maria's focus is on immediate issues, not long-term concerns. Pay attention to the word `immediate`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, listen to the key phrases in Maria's statement: `We need to make sure they're ready` and `to handle any immediate issues that come up.`
+
+The word `ready` indicates preparation, and `immediate issues` specifies the type of problems Maria is referring to.
+
+Together, these phrases show that Maria is focused on ensuring readiness to deal with short-term, unexpected challenges.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
new file mode 100644
index 0000000000..0863bb86fe
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
@@ -0,0 +1,99 @@
+---
+id: 67472348ce54e263862c5386
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Maria: We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Maria believes they should handle issues as they come up.
+
+## --answers--
+
+True
+
+---
+
+False
+
+### --feedback--
+
+Consider whether Maria talks about avoiding or addressing issues. Pay attention to the phrase `handle any immediate issues`.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria says, `We need to make sure they're ready to handle any immediate issues that come up.`
+
+The phrase `handle issues as they come up` directly points to her belief in addressing problems as they occur.
+
+To answer correctly, focus on her use of the words `ready to handle` and `immediate issues`, which indicate her intention for proactive problem-solving.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
new file mode 100644
index 0000000000..df14a58f76
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
@@ -0,0 +1,92 @@
+---
+id: 674e3864432aea6f5ce708ed
+title: Task 26
+challengeType: 22
+dashedName: task-26
+---
+
+<!-- (Audio) Absolutely, the entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. The BLANK technical support team will be BLANK.`
+
+## --blanks--
+
+`entire`
+
+### --feedback--
+
+This word means the whole or complete group.
+
+---
+
+`on duty`
+
+### --feedback--
+
+These two words together mean being officially assigned to work or perform tasks at a specific time. The first word is a preposition, and the second is a noun.
+
+# --explanation--
+
+`Entire` means the whole or complete group, emphasizing that every member of the technical support team is included.
+
+`On duty` refers to being officially assigned to work or available to perform tasks during a specific time. For example:
+
+- `The entire staff attended the meeting.` - This means all members of the staff were present.
+
+- `The security guard is on duty until midnight.` - This means the guard is working and available until the specified time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
new file mode 100644
index 0000000000..a167546f76
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
@@ -0,0 +1,94 @@
+---
+id: 674e3b2f69b2e481d4f6cebe
+title: Task 25
+challengeType: 22
+dashedName: task-25
+---
+
+<!-- (Audio) Absolutely. The entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. The entire technical support team BLANK BLANK on duty.`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This word indicates the `Future Simple` tense.
+
+---
+
+`be`
+
+### --feedback--
+
+Infinitive form of verb `to be`.
+
+# --explanation--
+
+The sentence uses `will` to indicate the `Future Simple` tense, showing that the action is expected to happen.
+
+The structure `will + verb` is commonly used to talk about future events, plans, or predictions. For example:
+
+- `They will be at the meeting tomorrow.` - This means their presence is planned for the future.
+
+- `We will start the project next week.` - This means the project is scheduled to begin in the future.
+
+Using `will` is a straightforward way to express future intentions, promises, or schedules.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
new file mode 100644
index 0000000000..f9b77c33aa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
@@ -0,0 +1,88 @@
+---
+id: 674e3bc223f6c5862facf3e2
+title: Task 27
+challengeType: 19
+dashedName: task-27
+---
+
+<!-- (Audio) Absolutely, the entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Only a part of the technical support team will be on duty.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Focus on the word `entire` in his statement.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Entire` in the sentence makes it clear that all members of the technical support team will be available.
+
+To find the correct answer, focus on the key phrase: `the entire technical support team`. This emphasizes that no one is excluded from being on duty.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
new file mode 100644
index 0000000000..691fda15e6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
@@ -0,0 +1,99 @@
+---
+id: 674e3cb5a611618cd5301758
+title: Task 28
+challengeType: 22
+dashedName: task-28
+---
+
+<!-- (Audio) They've been briefed and are prepared to manage any unexpected situations. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`They've been BLANK and are prepared to manage any BLANK situations.`
+
+## --blanks--
+
+`briefed`
+
+### --feedback--
+
+This word means being given detailed information or instructions about a task or situation. It ends in `-ed`.
+
+---
+
+`unexpected`
+
+### --feedback--
+
+This word describes something that happens without warning or is not anticipated. It ends in `-ed`.
+
+# --explanation--
+
+`Briefed` means that someone has been provided with detailed instructions or information to prepare them for a specific task or situation.
+
+`Unexpected` refers to something that happens without prior knowledge or warning. For example:
+
+`The team was briefed on the emergency procedures.` - This means the team was given instructions about what to do in an emergency.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.82,
+      "finishTimestamp": 39
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.62,
+      "dialogue": {
+        "text": "They've been briefed and are prepared",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.62,
+      "finishTime": 5.18,
+      "dialogue": {
+        "text": "to manage any unexpected situations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
new file mode 100644
index 0000000000..c76e177c69
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
@@ -0,0 +1,111 @@
+---
+id: 67506acdf255ff94e0ba712e
+title: Task 29
+challengeType: 19
+dashedName: task-29
+---
+
+<!-- (Audio) Jake: They've been briefed and are prepared to manage any unexpected situations. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Jake instruct them about?
+
+## --answers--
+
+Completing a scheduled task.
+
+### --feedback--
+
+Think about whether Jake's statement focuses on planned tasks or unplanned situations.
+
+---
+
+Managing unexpected situations.
+
+---
+
+Avoiding all potential issues.
+
+### --feedback--
+
+Consider if Jake mentioned avoiding issues or handling them when they arise.
+
+---
+
+Reporting to him immediately.
+
+### --feedback--
+
+Jake's statement does not mention reporting back. Focus on what they are prepared to do.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, listen for the key phrase in Jake's statement: `prepared to manage any unexpected situations`. This shows that the team was briefed to handle unplanned or surprising events.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.82,
+      "finishTimestamp": 39
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.62,
+      "dialogue": {
+        "text": "They've been briefed and are prepared",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.62,
+      "finishTime": 5.18,
+      "dialogue": {
+        "text": "to manage any unexpected situations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
new file mode 100644
index 0000000000..495a696be3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
@@ -0,0 +1,90 @@
+---
+id: 67506bd2d567359bac72f760
+title: Task 30
+challengeType: 22
+dashedName: task-30
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Great, and when does the team BLANK the final BLANK?`
+
+## --blanks--
+
+`perform`
+
+### --feedback--
+
+This word means to carry out or execute a task or action.
+
+---
+
+`checks`
+
+### --feedback--
+
+This word refers to examinations or inspections to ensure something is correct or in good condition.
+
+# --explanation--
+
+`Perform` means to carry out or execute a specific task.
+
+`Checks` refers to inspections or evaluations made to ensure that everything is functioning correctly or meeting a standard. For example:
+
+`The team performed the tests before deployment.` - This means they executed tests as part of their tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
new file mode 100644
index 0000000000..7ac2e03436
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
@@ -0,0 +1,88 @@
+---
+id: 67506c7db9d148a0308107d8
+title: Task 31
+challengeType: 19
+dashedName: task-31
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Maria wants to perform the final checks with the team.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Think about whether Maria mentions her involvement in performing the checks or if she is just asking about the team's task.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria is asking about the timing of the team's task, not expressing a desire to join them in performing the checks.
+
+The phrase `when does the team perform` indicates she is inquiring rather than volunteering or participating.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
new file mode 100644
index 0000000000..62976e0eb0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
@@ -0,0 +1,104 @@
+---
+id: 67506d2c92a80fa4b7a912a7
+title: Task 32
+challengeType: 19
+dashedName: task-32
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+Who performs the final checks.
+
+### --feedback--
+
+Maria's question is about timing, not about identifying who performs the checks.
+
+---
+
+When the final checks will happen.
+
+---
+
+Why the final checks are performed.
+
+### --feedback--
+
+Maria is asking about the timing, not the reason for the checks.
+
+---
+
+What the final checks include.
+
+### --feedback--
+
+Maria does not ask about the details of the checks, but when they happen.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Listening for key question words like `when` can help identify her intent.
+
+`When` indicates that her question is focused on the timing of the task, not who performs it, why they are performed, or what they include.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
new file mode 100644
index 0000000000..43f7869327
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
@@ -0,0 +1,98 @@
+---
+id: 67506e16a9e0bdaad7267c35
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What would be the best answer to Maria's question?
+
+## --answers--
+
+`The final system checks are set for Friday night`.
+
+---
+
+`The final system checks were completed yesterday.`
+
+### --feedback--
+
+This refers to the past, but Maria is asking about a future event. Focus on the tense in her question.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`And when does the team perform the final checks?`, uses the `Present Simple` tense (`does perform`) to ask about a scheduled future event.
+
+The correct answer, `The final system checks are set for Friday night`, also uses the `Present Simple` to describe a fixed plan.
+
+`Present Simple` is often used for future events that are part of a schedule or timetable. For example:
+
+- `The train departs at 8 PM tonight.` - This indicates a scheduled departure.
+
+- `Our meeting starts tomorrow morning.` - This shows a planned time for a future event.
+
+In this context, the `Present Simple` makes the answer concise and appropriate for discussing a fixed event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
new file mode 100644
index 0000000000..e61c688f45
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
@@ -0,0 +1,88 @@
+---
+id: 67506e940e1d20ae6f0fc7e2
+title: Task 34
+challengeType: 22
+dashedName: task-34
+---
+
+<!-- (Audio) Jake: The final system checks are set for Friday night. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The final system checks are BLANK BLANK Friday night.`
+
+## --blanks--
+
+`set`
+
+### --feedback--
+
+This word means arranged or scheduled to happen at a specific time.
+
+---
+
+`for`
+
+### --feedback--
+
+This preposition indicates the purpose or time of an event.
+
+# --explanation--
+
+`Set` means that something is arranged, planned, or scheduled for a specific time or purpose. The preposition `for` is used to indicate the time or purpose of the planned event. For example:
+
+`The meeting is set for 3 PM tomorrow.` - This means the meeting is scheduled to take place at that time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.12,
+      "finishTimestamp": 44.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "The final system checks are set for Friday night.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
new file mode 100644
index 0000000000..fdfb7d5cd0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
@@ -0,0 +1,102 @@
+---
+id: 67506f57df7629b3d8d90f11
+title: Task 35
+challengeType: 19
+dashedName: task-35
+---
+
+<!-- (Audio) Jake: The final system checks are set for Friday night. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When will the final checks happen?
+
+## --answers--
+
+Tomorrow morning.
+
+### --feedback--
+
+Focus on the last two words in Jack's statement.
+
+---
+
+Next Monday.
+
+### --feedback--
+
+Pay attention to the timing in his statement.
+
+---
+
+Last Friday.
+
+### --feedback--
+
+The checks are set for a future time, not a past date.
+
+---
+
+Friday night.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jake says, `The final system checks are set for Friday night`. The phrase `are set for` indicates a future event, and `Friday night` specifies the exact time. To answer correctly, focus on the timing mentioned in the statement and note that it refers to a planned, scheduled future event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.12,
+      "finishTimestamp": 44.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "The final system checks are set for Friday night.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
new file mode 100644
index 0000000000..40612d4212
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
@@ -0,0 +1,89 @@
+---
+id: 675070049d1f9fb8c1bced11
+title: Task 36
+challengeType: 22
+dashedName: task-36
+---
+
+<!-- (Audio) We'll confirm that all security patches are ready to be deployed without any complications. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll confirm that all security BLANK are ready to be deployed without any complications.`
+
+## --blanks--
+
+`patches`
+
+### --feedback--
+
+This word refers to updates or fixes for software or systems.
+
+# --explanation--
+
+`Patches` refers to updates or fixes that address issues in software or systems. For example:
+
+`The patches are ready to be installed.` - This means the fixes are prepared for installation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.1,
+      "finishTimestamp": 50.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll confirm that all security patches",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3,
+      "finishTime": 6.28,
+      "dialogue": {
+        "text": "are ready to be deployed without any complications.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
new file mode 100644
index 0000000000..541459e2df
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
@@ -0,0 +1,99 @@
+---
+id: 675070d075960bbe3f92eca6
+title: Task 37
+challengeType: 19
+dashedName: task-37
+---
+
+<!-- (Audio) We'll confirm that all security patches are ready to be deployed without any complications. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: The security patches are ready to be deployed.
+
+## --answers--
+
+True
+
+### --feedback--
+
+`We'll` shows this is a future action not something already completed.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The contraction `We'll` stands for `We will,` indicating a future action or plan. For example:
+
+- `I'll call you tomorrow.` - This means the action of calling will happen in the future.
+
+- `We'll review the report later.` - This indicates that the review is planned but has not yet occurred.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.1,
+      "finishTimestamp": 50.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll confirm that all security patches",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3,
+      "finishTime": 6.28,
+      "dialogue": {
+        "text": "are ready to be deployed without any complications.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
new file mode 100644
index 0000000000..af84cac2e1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
@@ -0,0 +1,108 @@
+---
+id: 675074863d75f1d559b039df
+title: Task 38
+challengeType: 22
+dashedName: task-38
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Perfect. And the training session for the new BLANK BLANK, when is that planned?`
+
+## --blanks--
+
+`security`
+
+### --feedback--
+
+This word refers to measures or systems designed to protect something, such as data or systems.
+
+---
+
+`protocols`
+
+### --feedback--
+
+This word means a set of rules or procedures to follow in specific situations.
+
+# --explanation--
+
+`Security` refers to systems or actions used to protect important resources, like data or networks.
+
+`Protocols` means a set of rules or procedures that explain how to do something correctly. For example:
+
+`We followed the security protocols during the test.` - This means they followed the safety rules step by step.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
new file mode 100644
index 0000000000..9277b259ca
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
@@ -0,0 +1,124 @@
+---
+id: 6750758f8581d3dcfeb1c386
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria think about the training session?
+
+## --answers--
+
+It has not been scheduled yet.
+
+### --feedback--
+
+Focus on the tense she uses.
+
+---
+
+It will be scheduled later.
+
+### --feedback--
+
+Pay attention to her use of the `Present Simple` tense.
+
+---
+
+It is already scheduled.
+
+---
+
+It does not need to be scheduled.
+
+### --feedback--
+
+Consider her use of the phrase `is planned`.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Maria asks, `when is that planned?` The verb `is` in the `Present Simple` shows she believes the training session is already scheduled. The `Present Simple` is often used for fixed future plans, like schedules or timetables. For example:
+
+- `The train departs at 6 PM.` - This shows a planned future event using the `Present Simple`.
+
+- `What time does the concert start?` - This assumes the concert has a fixed start time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
new file mode 100644
index 0000000000..7835648ded
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
@@ -0,0 +1,110 @@
+---
+id: 6750775f2b0832e88216e98c
+title: Task 40
+challengeType: 19
+dashedName: task-40
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the best answer to Maria's question?
+
+## --answers--
+
+`The training is planned for Thursday afternoon.`
+
+---
+
+`The training will be planned for Thursday afternoon.`
+
+### --feedback--
+
+This uses the `Future Simple` tense, which suggests the plan has not been made yet. Maria's question assumes the training is already scheduled.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria's question, `when is that planned?`, uses the `Present Simple` tense (`is planned`) to ask about a fixed future event.
+
+The `Present Simple` is commonly used for schedules, timetables, or planned events because it gives a sense of certainty. For example:
+
+`The bus leaves at 9 AM tomorrow.` - This shows a fixed schedule.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
new file mode 100644
index 0000000000..8d35fa0a07
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
@@ -0,0 +1,90 @@
+---
+id: 6750784c1399a9ef62b27e9e
+title: Task 41
+challengeType: 22
+dashedName: task-41
+---
+
+<!-- (Audio) Jake: The training is planned for Thursday afternoon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The training BLANK BLANK for Thursday afternoon.`
+
+## --blanks--
+
+`is`
+
+### --feedback--
+
+This word is a form of the verb `to be` and is part of the `Present Simple` tense.
+
+---
+
+`planned`
+
+### --feedback--
+
+This word means arranged or scheduled for a specific time.
+
+# --explanation--
+
+The sentence `The training is planned for Thursday afternoon` uses the `Present Simple` tense.
+
+This tense is often used to describe fixed future events, like schedules or timetables, because it expresses certainty. For example:
+
+`The meeting starts at 10 AM tomorrow.` - This means the meeting is already scheduled for a specific time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.42,
+      "finishTimestamp": 56.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "The training is planned for Thursday afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
new file mode 100644
index 0000000000..b8c04b9747
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
@@ -0,0 +1,88 @@
+---
+id: 67507a47729d85fb7c88ee06
+title: Task 42
+challengeType: 19
+dashedName: task-42
+---
+
+<!-- (Audio) Jake: The training is planned for Thursday afternoon. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: The training happened last Thursday afternoon.
+
+## --answers--
+
+True
+
+### --feedback--
+
+The phrase `is planned` shows that the training is scheduled for the future, not something that has already happened.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Is planned` uses the `Present Simple` tense to describe a future event that is already scheduled. It indicates certainty about when the training will happen, not that it has already occurred. For example:
+
+`The meeting is planned for next Monday.` - This shows that the meeting is scheduled for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.42,
+      "finishTimestamp": 56.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "The training is planned for Thursday afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
new file mode 100644
index 0000000000..5f0989e378
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
@@ -0,0 +1,111 @@
+---
+id: 67507adbc31ab8ffa2dc5243
+title: Task 43
+challengeType: 22
+dashedName: task-43
+---
+
+<!-- (Audio) Jake: Every team member must understand the changes and how these will impact our operations. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Every team member must BLANK BLANK BLANK and how these will impact our operations.`
+
+## --blanks--
+
+`understand`
+
+### --feedback--
+
+This word means to know the meaning of something.
+
+---
+
+`the`
+
+### --feedback--
+
+This is a definite article used to specify something particular.
+
+---
+
+`changes`
+
+### --feedback--
+
+This word refers to modifications or adjustments that are made.
+
+# --explanation--
+
+`Understand` means to know the meaning of something.
+
+`The` is a definite article used to refer to specific things or ideas.
+
+`Changes` refers to modifications or adjustments that affect a situation. For example:
+
+- `It is important to understand the updates before implementing them.` - This means comprehending the details of updates before action.
+
+- `We need to explain the changes to the team.` - This refers to communicating the specific adjustments or modifications.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 57.24,
+      "finishTimestamp": 62.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.54,
+      "dialogue": {
+        "text": "Every team member must understand the changes",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 5.82,
+      "dialogue": {
+        "text": "and how these will impact our operations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
new file mode 100644
index 0000000000..08c71648ba
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
@@ -0,0 +1,117 @@
+---
+id: 67507f042946421936eb425a
+title: Task 44
+challengeType: 19
+dashedName: task-44
+---
+
+<!-- (Audio) Jake: Every team member must understand the changes and how these will impact our operations. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake's main concern in this statement?
+
+## --answers--
+
+The team has to finish the changes quickly.
+
+### --feedback--
+
+Jake does not mention speed or urgency.
+
+---
+
+The team understands the changes.
+
+---
+
+The team avoids changes.
+
+### --feedback--
+
+Jake is not concerned about avoiding changes.
+
+---
+
+Assigning tasks to the team.
+
+### --feedback--
+
+Jake's statement is not about assigning tasks to individuals.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake says, `Every team member must understand the changes and how these will impact our operations.`
+
+His main concern is ensuring that all team members fully understand the changes and their effect on operations.
+
+The word `must` highlights the importance of this understanding. For example:
+
+`The team must understand the updates before implementation.` - This shows the focus on comprehension as a priority.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 57.24,
+      "finishTimestamp": 62.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.54,
+      "dialogue": {
+        "text": "Every team member must understand the changes",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 5.82,
+      "dialogue": {
+        "text": "and how these will impact our operations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
new file mode 100644
index 0000000000..667e794c00
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
@@ -0,0 +1,96 @@
+---
+id: 67508b92b31af876eed82c66
+title: Task 45
+challengeType: 22
+dashedName: task-45
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`Will`, `is scheduled`, `will be`, `are set`, `is`, `We'll`, and `will impact`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: Maria, the next system update BLANK for this Saturday at 2 AM. It's crucial to enhance our firewall settings to prevent any potential DoS attacks.`
+
+`Maria: Yes, Jake, I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct?`
+
+`Jake: That's right. The update should last about two hours. Our main goal is to minimize disruption while strengthening our defenses.`
+
+`Maria: BLANK the support team be on call during the update? We need to make sure they're ready to handle any immediate issues that come up.`
+
+`Jake: Absolutely, the entire technical support team BLANK on duty. They've been briefed and are prepared to manage any unexpected situations.`
+
+`Maria: Great, and when does the team perform the final checks?`
+
+`Jake: The final system checks BLANK for Friday night. BLANK confirm that all security patches are ready to be deployed without any complications.`
+
+`Maria: Perfect. And the training session for the new security protocols, when BLANK that planned?`
+
+`Jake: The training is planned for Thursday afternoon. Every team member must understand the changes and how these BLANK our operations.`
+
+## --blanks--
+
+`is scheduled`
+
+### --feedback--
+
+These two words together are the `Present Simple` tense to describe a planned future event.
+
+---
+
+`Will`
+
+### --feedback--
+
+This word indicates the `Future Simple` tense and is used for asking about future actions. It is capitalized.
+
+---
+
+`will be`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense to describe a planned future action.
+
+---
+
+`are set`
+
+### --feedback--
+
+These two words together are used to talk about a future event that has been scheduled.
+
+---
+
+`We'll`
+
+### --feedback--
+
+Contraction that shows a future action or plan. The first letter is capitalized.
+
+---
+
+`is`
+
+### --feedback--
+
+This is the verb `to be` conjugated.
+
+---
+
+`will impact`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense to describe an action that will affect something in the future.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
new file mode 100644
index 0000000000..848b065854
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
@@ -0,0 +1,70 @@
+---
+id: 6752100607e30e31bd85af76
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. Please ensure all tasks are completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+When does the system downtime start?
+
+## --answers--
+
+`Friday night`
+
+### --feedback--
+
+This is when the final checks are set, not the downtime.
+
+---
+
+`Thursday afternoon`
+
+### --feedback--
+
+This refers to the training session, not the downtime.
+
+---
+
+`Friday at 2 AM`
+
+### --feedback--
+
+The downtime doesn't start on Friday.
+
+---
+
+`Saturday at 2 AM.`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find out when the system downtime starts, focus on the part of the message where Jake talks about the timeline.
+
+Look for the phrase `The system update is scheduled to...` to find the correct answer.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
new file mode 100644
index 0000000000..1e959b134d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
@@ -0,0 +1,70 @@
+---
+id: 6752133caed6e849142fcc19
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+When do the final system checks take place?
+
+## --answers--
+
+Thursday afternoon.
+
+### --feedback--
+
+This is when the training session is planned, not the final system checks.
+
+---
+
+Friday evening.
+
+---
+
+Saturday at 2 AM.
+
+### --feedback--
+
+This is when the system update starts, not the final system checks.
+
+---
+
+Friday afternoon.
+
+### --feedback--
+
+This is when the security patches are ready to be deployed, not when the final system checks occur.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out when the final system checks take place, focus on the part of the message that lists the schedule.
+
+Look for the phrase `The final system checks are...` to find the correct time.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
new file mode 100644
index 0000000000..14b19a86ed
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
@@ -0,0 +1,70 @@
+---
+id: 6752136c94c79a4ad803f0cf
+title: Task 48
+challengeType: 19
+dashedName: task-48
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+Why are the firewall settings enhanced by Friday?
+
+## --answers--
+
+To prevent potential DoS attacks.
+
+---
+
+To minimize disruption during the downtime.
+
+### --feedback--
+
+While minimizing disruption is mentioned elsewhere, it is not the reason given for enhancing firewall settings.
+
+---
+
+To ensure the system update happens on time.
+
+### --feedback--
+
+The system update happens on Saturday, but this task is unrelated to the timing of the update.
+
+---
+
+To manage immediate issues during the update.
+
+### --feedback--
+
+Managing immediate issues is the responsibility of the support team, not the firewall settings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find out why the firewall settings are enhanced, focus on the sentence `Firewall settings are enhanced by Friday to prevent potential DoS attacks.`
+
+The text explicitly states this purpose, emphasizing the importance of preparing for potential cyber threats.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
new file mode 100644
index 0000000000..81a8ef7646
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
@@ -0,0 +1,72 @@
+---
+id: 675213a1aa7da34c876d94e9
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+What happens if the final system checks are not completed by Friday?
+
+## --answers--
+
+The server downtime will last longer.
+
+### --feedback--
+
+The server downtime is scheduled to last two hours and is not directly impacted by the final checks.
+
+---
+
+The training session will be rescheduled.
+
+### --feedback--
+
+The training session takes place on Thursday, unrelated to the timing of the final checks.
+
+---
+
+The system update might be delayed.
+
+---
+
+Immediate issues won't be resolved.
+
+### --feedback--
+
+Immediate issues are handled by the support team during the update, not by the final system checks.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To understand what might happen if the final system checks are not completed, consider their role in preparing for the update.
+
+Final checks ensure readiness for the system update, so their delay could lead to postponing the update.
+
+Look for the phrase `The final system checks are set` to confirm this connection.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
new file mode 100644
index 0000000000..fefadfc1ec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
@@ -0,0 +1,72 @@
+---
+id: 675213f5a47d9e4ef23d9050
+title: Task 50
+challengeType: 19
+dashedName: task-50
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+Which event happens first?
+
+## --answers--
+
+The final system checks are set.
+
+### --feedback--
+
+The final checks happen after the training session on Thursday and after security patches on Friday.
+
+---
+
+The security patches are ready to be deployed.
+
+### --feedback--
+
+The security patches are scheduled for Friday, but the training session happens earlier.
+
+---
+
+The training session is planned.
+
+---
+
+The system update starts.
+
+### --feedback--
+
+The system update happens last, on Saturday at 2 AM, after all other events are completed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To identify which event happens first, look at the timeline in the message.
+
+The training session is scheduled for Thursday afternoon, making it the first event before the other tasks.
+
+Look for the phrase `Thursday afternoon: The training session ... is planned` to confirm.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
new file mode 100644
index 0000000000..724ededb89
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
@@ -0,0 +1,196 @@
+---
+id: 67531709d628ef047202e6ae
+title: "Dialogue 2: Responding to Phishing Threats"
+challengeType: 21
+dashedName: dialogue-2-responding-to-phishing-threats
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video..
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Sarah",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-2.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Sarah",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 4.56,
+     "dialogue": {
+       "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 4.96,
+     "finishTime": 8.52,
+     "dialogue": {
+       "text": "It looks like someone will need to notify the team and take immediate action.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 8.94,
+     "finishTime": 11.12,
+     "dialogue": {
+       "text": "Oh, no. Do you know where it originated from?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 11.38,
+     "finishTime": 13.86,
+     "dialogue": {
+       "text": "Not yet, but I think it came from an email link.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 14.1,
+     "finishTime": 18.02,
+     "dialogue": {
+       "text": "We need to investigate quickly. I'll send out a warning to everyone right away.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 18.42,
+     "finishTime": 21.48,
+     "dialogue": {
+       "text": "That sounds like a good plan. Do you think it will affect our project deadlines?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 21.88,
+     "finishTime": 25.16,
+     "dialogue": {
+       "text": "It might. I hope it won't, but we should prepare for delays.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 25.54,
+     "finishTime": 27.98,
+     "dialogue": {
+       "text": "I'll update the project manager about the situation.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 27.98,
+     "finishTime": 31.62,
+     "dialogue": {
+       "text": "I'll alert the development team and tell them to check their emails carefully.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 31.98,
+     "finishTime": 33.16,
+     "dialogue": {
+       "text": "Is there anything else we should do?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 33.46,
+     "finishTime": 37.6,
+     "dialogue": {
+       "text": "We'll probably need to run a full system scan to ensure that there's no hidden malware.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 37.96,
+     "finishTime": 40.6,
+     "dialogue": {
+       "text": "Can you coordinate with the IT support team for that?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 41,
+     "finishTime": 44.92,
+     "dialogue": {
+       "text": "Yes, I'll contact them now. How do you think our clients will react to this news?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 45.6,
+     "finishTime": 51.98,
+     "dialogue": {
+       "text": "They'll likely be concerned, but I'll reassure them that we're taking all necessary steps to secure our systems.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 52.5,
+     "finishTime": 56.92,
+     "dialogue": {
+       "text": "Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Sarah",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.52
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 57.92
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
new file mode 100644
index 0000000000..4dae0411e6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
@@ -0,0 +1,95 @@
+---
+id: 675318543812fa0f15f42c10
+title: Task 51
+challengeType: 22
+dashedName: task-51
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sarah, I just found out that we've had a BLANK BLANK on our system.`
+
+## --blanks--
+
+`phishing`
+
+### --feedback--
+
+This word refers to a type of online scam where someone tries to steal personal information.
+
+---
+
+`attack`
+
+### --feedback--
+
+This word means an attempt to harm something, usually intentionally. This word has double `t`.
+
+# --explanation--
+
+`Phishing` is a method used by scammers to trick people into sharing personal information like passwords or credit card details, usually through fake emails or websites. For example:
+
+`The phishing email looked like it came from our bank.` - This means the email was fake but designed to steal personal information.
+
+`Attack` means an act of trying to harm or damage something. It can be physical, verbal, or in cybersecurity. For example:
+
+- `The attack on the server caused it to shut down.` - This means an intentional act damaged the server.
+
+- `She defended herself during the verbal attack.` - This means someone said harmful things to her.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
new file mode 100644
index 0000000000..c1440df4fb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
@@ -0,0 +1,104 @@
+---
+id: 67531ca2cb308e28acf3bdc1
+title: Task 52
+challengeType: 19
+dashedName: task-52
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake reporting to Sarah?
+
+## --answers--
+
+Jake was attacked by a fish.
+
+### --feedback--
+
+Jake mentioned `phishing`, which refers to an online scam, not anything related to fish.
+
+---
+
+There was a phishing attack on their system.
+
+---
+
+Jake uploaded something new to the system.
+
+### --feedback--
+
+Jake is talking about a problem with the system, not adding or uploading anything.
+
+---
+
+The system was updated successfully.
+
+### --feedback--
+
+Jake is reporting a problem, not describing a successful update.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Phishing` refers to a type of online scam where someone tries to steal personal information, like passwords or credit card details. It is not related to `fishing`, even though they sound similar.
+
+Try to listen to the words `phishing attack` in Jake's statement. They make it clear that this is about a harmful event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
new file mode 100644
index 0000000000..2d5051caed
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
@@ -0,0 +1,90 @@
+---
+id: 67531f0c699943385e41734c
+title: Task 53
+challengeType: 19
+dashedName: task-53
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Jake just found out about the phishing attack.
+
+## --answers--
+
+True
+
+---
+
+False
+
+### --feedback--
+
+`Just found out` means Jake learned about something for the first time, so he didn't know about it before.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Found out` means to discover or learn something new, usually for the first time. For example:
+
+`I just found out about the meeting yesterday.` - This means I learned about the meeting for the first time yesterday.
+
+Try to listen to the phrase `just found out` in the audio. In this context, Jake is saying he just discovered that there was a phishing attack. This shows he didn't know about it before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
new file mode 100644
index 0000000000..530c0682b3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
@@ -0,0 +1,90 @@
+---
+id: 67531ff45ade873e5ff17211
+title: Task 55
+challengeType: 19
+dashedName: task-55
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Jake is not worried about the phishing attack.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Jake mentions taking `immediate action`, which shows urgency and concern about the situation.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Immediate action` means doing something without delay because it is urgent. For example:
+
+`We need to take immediate action to stop the leak.` - This shows the situation is urgent, and action must be taken quickly.
+
+In this context, Jake says `immediate action`, which indicates he is worried and believes the phishing attack is a serious issue that requires quick response. The words `notify the team` also show he is treating the matter with importance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
new file mode 100644
index 0000000000..6dd4e54d85
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
@@ -0,0 +1,92 @@
+---
+id: 67532227a04e5e4cd4ccf987
+title: Task 54
+challengeType: 22
+dashedName: task-54
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It looks like someone BLANK BLANK to notify the team and take immediate action.`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This word is a modal verb used to express a decision made at the moment of speaking.
+
+---
+
+`need`
+
+### --feedback--
+
+This word shows that something is necessary or required.
+
+# --explanation--
+
+`Will` is used to express a decision made at the moment of speaking, often when someone reacts to a situation. It is a way to show spontaneity or immediate response. For example:
+
+`I will call the manager right away.` - This shows a decision made at the moment in response to a need.
+
+`Need` means something is required or necessary. For example:
+
+`We need more time to finish the project.` - This shows something essential to complete the task.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
new file mode 100644
index 0000000000..3f08bb2acc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
@@ -0,0 +1,104 @@
+---
+id: 675323b130ad71572ef10510
+title: Task 56
+challengeType: 19
+dashedName: task-56
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Who will need to take immediate action?
+
+## --answers--
+
+Jake
+
+### --feedback--
+
+Jake does not say that he will be the one taking action in this context.
+
+---
+
+Sarah
+
+### --feedback--
+
+Jake does not mention Sarah needing to take immediate action in this context.
+
+---
+
+Someone
+
+---
+
+The entire team
+
+### --feedback--
+
+The audio does not mention the entire team needing to act.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In the audio, Jake uses the word `someone`, which means he is not specifying a particular person who needs to act. The word `someone` helps identify that the responsibility is not assigned to Jake, Sarah, or the entire team.
+
+Listen for the phrase `someone will need to notify`. This is a key part of the sentence that points out the correct answer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
new file mode 100644
index 0000000000..8ce96c60ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
@@ -0,0 +1,104 @@
+---
+id: 67532445152d375af93d4d19
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What should be done?
+
+## --answers--
+
+Notify the team and take immediate action.
+
+---
+
+Notify the team later.
+
+### --feedback--
+
+Jake uses the phrase `immediate action`, which shows urgency, not something that can be delayed.
+
+---
+
+Take immediate action without telling anyone.
+
+### --feedback--
+
+Jake mentions `notify the team`, which means informing others is part of what needs to be done.
+
+---
+
+Ignore the issue for now.
+
+### --feedback--
+
+Jake clearly says `immediate action`, which means the situation requires attention right away.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Listen for the words `notify the team` and `immediate action`. These are key parts of the sentence and point directly to the correct answer.
+
+In the audio, Jake says `notify the team and take immediate action`. These two actions are clearly mentioned together as what needs to be done.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
new file mode 100644
index 0000000000..f9a241f43e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
@@ -0,0 +1,100 @@
+---
+id: 675325cfea799165252500d4
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. It looks like someone will need to notify the team and take immediate action. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to ask Jake more about the problem?
+
+## --answers--
+
+`Oh no! What is the team going to do?`
+
+### --feedback--
+
+This question focuses on the team's response, not the details of the phishing attack itself.
+
+---
+
+`Oh no! Do you know where it originated from?`
+
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The correct option is `Oh no! Do you know where it originated from?` because it asks for specific details about the phishing attack.
+
+The phrase `where it originated from` refers to the source or starting point of the phishing attack.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.96,
+      "finishTime": 8.52,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 9.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
new file mode 100644
index 0000000000..a488b8c515
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
@@ -0,0 +1,78 @@
+---
+id: 675326de48b3e36c45ba1328
+title: Task 59
+challengeType: 22
+dashedName: task-59
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Oh no! Do you know where BLANK originated from?`
+
+## --blanks--
+
+`it`
+
+### --feedback--
+
+This pronoun is used to refer to something already mentioned, like the phishing attack.
+
+# --explanation--
+
+`It` is a pronoun used to refer to something already mentioned, so you don't have to repeat the same noun. In this context, `it` refers to the phishing attack mentioned earlier.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
new file mode 100644
index 0000000000..9af2a3bb83
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
@@ -0,0 +1,104 @@
+---
+id: 675327d73a38d5731235d764
+title: Task 60
+challengeType: 19
+dashedName: task-60
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to know?
+
+## --answers--
+
+Who will notify the team.
+
+### --feedback--
+
+Sarah is not asking about who will notify the team.
+
+---
+
+How serious the phishing attack is.
+
+### --feedback--
+
+Sarah is not asking about how serious the attack is.
+
+---
+
+If the system is safe now.
+
+### --feedback--
+
+Sarah is not asking about whether the system is safe now.
+
+---
+
+The source of the phishing attack.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Pay attention to `where it originated from`. It shows she is asking about the source or starting point of the phishing attack.
+
+In the audio, Sarah uses the pronoun `it` to refer to the phishing attack, showing she is asking about where it started.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
new file mode 100644
index 0000000000..daeb65589f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
@@ -0,0 +1,90 @@
+---
+id: 675329bc0e2bfa7f1c4f7411
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to Sarah's question?
+
+## --answers--
+
+`This is terrible! The system is currently down.`
+
+### --feedback--
+
+This focuses on the state of the system, not the origin of the phishing attack.
+
+---
+
+`Not yet, but I think it came from an email link.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Pay attention to the words `where it originated from` in Sarah's question. They indicate she is asking about the source of the issue.
+
+The correct answer is `Not yet, but I think it came from an email link`. It directly addresses Sarah's question by discussing the origin of the phishing attack.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
new file mode 100644
index 0000000000..7f0576a046
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
@@ -0,0 +1,90 @@
+---
+id: 67532ac8b110a08666ee5f18
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (Audio) Jake: Not yet, but I think it came from an email link. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Not yet, but I think it BLANK BLANK an email link.`
+
+## --blanks--
+
+`came`
+
+### --feedback--
+
+This word means to move or happen from one place or source to another. It is the past tense of `come`.
+
+---
+
+`from`
+
+### --feedback--
+
+This word shows the starting point or source of something.
+
+# --explanation--
+
+`Came from` is used to describe the source or starting point of something. For example:
+
+- `The idea came from a brainstorming session.` - This means the brainstorming session was the source of the idea.
+
+- `She said the problem came from a mistake in the code.` - This indicates the mistake in the code caused the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.38,
+      "finishTimestamp": 12.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
new file mode 100644
index 0000000000..1af4895b69
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
@@ -0,0 +1,82 @@
+---
+id: 67532bbaa817558e7691df51
+title: Task 63
+challengeType: 22
+dashedName: task-63
+---
+
+<!-- (Audio) Jake We need to investigate quickly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We need to investigate BLANK.`
+
+## --blanks--
+
+`quickly`
+
+### --feedback--
+
+This word means to do something fast or without delay.
+
+# --explanation--
+
+`Quickly` is an adverb that describes doing something in a fast or timely manner. In this context, it shows that the investigation must happen without delay. For example:
+
+- `He quickly responded to the email.` - This means he replied fast.
+
+- `We need to act quickly to prevent more damage.` - This shows urgency in taking action.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.1,
+      "finishTimestamp": 14.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
new file mode 100644
index 0000000000..0bf1ae83c5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
@@ -0,0 +1,84 @@
+---
+id: 67532c49e75faf929fd9378d
+title: Task 64
+challengeType: 22
+dashedName: task-64
+---
+
+<!-- (Audio) Jake: I'll send out a warning to everyone right away. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK send out a warning to everyone right away.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is the contraction for `I will`. The first letter is capitalized.
+
+# --explanation--
+
+`I'll` is the contraction for `I will`. It is commonly used to express decisions made at the moment of speaking or to indicate future actions. For example:
+
+- `I'll call the manager now.` - This shows a decision made at the moment of speaking.
+
+- `I'll help you with your project.` - This means offering help immediately after hearing about the need.
+
+The contraction makes the sentence shorter and more natural in spoken English.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
new file mode 100644
index 0000000000..70466b5892
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
@@ -0,0 +1,139 @@
+---
+id: 6753314748a2feb09a3059b2
+title: Task 65
+challengeType: 19
+dashedName: task-65
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? Jake: Not yet, but I think it came from an email link. We need to investigate quickly. I'll send out a warning to everyone right away. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What are the next steps?
+
+## --answers--
+
+Fix the issue and update the system.
+
+### --feedback--
+
+The audio does not mention fixing the issue or updating the system yet.
+
+---
+
+Find the source and contact IT support.
+
+### --feedback--
+
+The audio mentions investigating quickly, but it does not mention contacting IT support.
+
+---
+
+Wait for more information before taking action.
+
+### --feedback--
+
+The audio clearly states the need to act quickly and send out a warning, not to wait.
+
+---
+
+Investigate quickly and send out a warning.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the audio, Jake says, `We need to investigate quickly` and `I'll send out a warning to everyone right away.` These phrases indicate the immediate next steps.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.41
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 3.41
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 7.68,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link. We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 7.88,
+      "finishTime": 10.18,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 10.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
new file mode 100644
index 0000000000..35e4cea5e6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
@@ -0,0 +1,97 @@
+---
+id: 67533335139a96bd1eb18395
+title: Task 66
+challengeType: 19
+dashedName: task-66
+---
+
+<!-- Jake: Not yet, but I think it came from an email link. We need to investigate quickly. I'll send out a warning to everyone right away. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Sarah wants to **agree** with Jake. What should she say?
+
+## --answers--
+
+`I'm not sure about that approach. Can we wait before deciding?`
+
+### --feedback--
+
+This option disagrees with Jake, so it does not align with Sarah wanting to agree.
+
+---
+
+`That sounds like a good plan. Do you think it will affect our project deadlines?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The phrase `That sounds like a good plan` shows agreement with Jake's proposed actions. Sarah then adds a follow-up question about project deadlines, which continues the discussion.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.38,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.14,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link. We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.34,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
new file mode 100644
index 0000000000..0d49d06f15
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
@@ -0,0 +1,101 @@
+---
+id: 6753357b948f6acb55e35e3b
+title: Task 67
+challengeType: 22
+dashedName: task-67
+---
+
+<!-- (Audio) Sarah: That sounds like a good plan. Do you think it will affect our project deadlines? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That sounds like a good plan. Do you think it BLANK BLANK our project deadlines?`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This is a modal verb used to talk about something that might happen in the future.
+
+---
+
+`affect`
+
+### --feedback--
+
+This word means to cause a change or impact something.
+
+# --explanation--
+
+`Will` is a modal verb used to talk about future possibilities or decisions.
+
+`Affect` means to cause a change or impact. For example:
+
+- `Do you think the delay will affect the delivery time?` - This asks if the delay might change the delivery time.
+
+- `The new policy will affect how we work.` - This means the policy will have an impact on work processes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.22,
+      "finishTimestamp": 20.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.36,
+      "dialogue": {
+        "text": "That sounds like a good plan.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.54,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
new file mode 100644
index 0000000000..c506c55a13
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
@@ -0,0 +1,108 @@
+---
+id: 67535bfb5c07ec6334ec8ea3
+title: Task 68
+challengeType: 19
+dashedName: task-68
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to know?
+
+## --answers--
+
+If they need to update the project plan.
+
+### --feedback--
+
+This option is about changing the plan, but Sarah is asking something different.
+
+---
+
+If the project can continue as planned.
+
+### --feedback--
+
+This option talks about the project's continuation, but Sarah's question is about something else.
+
+---
+
+If the attack will delay their deadlines.
+
+---
+
+If the team has already finished the project.
+
+### --feedback--
+
+This option refers to whether the project is complete, but Sarah is not asking about that.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Pay attention to the words `will affect` and `deadlines` in the audio. These are key to understanding the question.
+
+A `project deadline` is the final date by which a project must be completed.
+
+`Will affect` is used to ask if something will cause a change or impact. For example:
+
+`The new policy will affect the project deadline.` - This means the policy will change the timeline for the project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.66,
+      "finishTimestamp": 20.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.92,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
new file mode 100644
index 0000000000..1d27ab1602
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
@@ -0,0 +1,88 @@
+---
+id: 67535e02fd808570ca6cb599
+title: Task 69
+challengeType: 19
+dashedName: task-69
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Select the most adequate answer to Sarah's question.
+
+## --answers--
+
+`It might. I hope it won't.`
+
+---
+
+`I'm not sure. Let's ignore it for now.`
+
+### --feedback--
+
+This response suggests doing nothing, which is not appropriate for addressing Sarah's concern.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Pay attention to Sarah's question, especially `will affect our project deadlines.` She is asking about the possibility of delays and expects a thoughtful and realistic answer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.66,
+      "finishTimestamp": 20.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.92,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
new file mode 100644
index 0000000000..8d38ff60ab
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
@@ -0,0 +1,82 @@
+---
+id: 675743f6f7016d1074a9bca1
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- (Audio) Jake: It might. I hope it won't. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It might. I hope it BLANK.`
+
+## --blanks--
+
+`won't`
+
+### --feedback--
+
+This is the contraction for `will not`.
+
+# --explanation--
+
+`Won't` is the contraction for `will not`, which is used to make negative sentences about the future. For example:
+
+- `They won't finish the project on time if they don't start now.` - This predicts a negative outcome if action isn't taken.
+
+- `He won't attend the meeting because he is sick.` - This shows a future action that will not happen.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 22.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.8,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
new file mode 100644
index 0000000000..6628d1b37c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
@@ -0,0 +1,134 @@
+---
+id: 675746c2d3d2f222111918d4
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? Jake: It might. I hope it won't. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jake feel about the deadlines?
+
+## --answers--
+
+He is sure they will be delayed and cannot be finished on time.
+
+### --feedback--
+
+Jake uses the word `might`, which shows he is uncertain, not certain about delays.
+
+---
+
+He thinks they might be affected but hopes they won't.
+
+---
+
+He doesn't care if the deadlines are affected or not.
+
+### --feedback--
+
+Jake expresses concern and hope in his response, which shows he does care about the deadlines.
+
+---
+
+He is confident the deadlines will be met without any delays.
+
+### --feedback--
+
+Jake's use of `might` and `I hope it won't` shows doubt, not confidence about meeting the deadlines.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake uses `might` to show uncertainty about the deadlines being affected. He also says, `I hope it won't`, which expresses hope that the deadlines remain unaffected. For example:
+
+- `The software update might cause some delays.` - This means it is possible, but not certain, that delays will happen.
+
+- `I hope the server won't go down during the deployment.` - This expresses a desire for the server to remain operational.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.76,
+      "finishTimestamp": 22.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 2.92
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 2.92
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.12,
+      "finishTime": 4.82,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
new file mode 100644
index 0000000000..ca4008841e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
@@ -0,0 +1,89 @@
+---
+id: 6757488ee5dfb72d866a36df
+title: Task 72
+challengeType: 22
+dashedName: task-72
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It might. I hope it won't, but we should prepare for BLANK.`
+
+## --blanks--
+
+`delays`
+
+### --feedback--
+
+This word means something happening later than expected. Remember, it is plural in this sentence.
+
+# --explanation--
+
+`Delays` are situations where something happens later than planned or expected. For example:
+
+`The software release faced delays due to testing issues.` - This means the release happened later than planned because of testing problems.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
new file mode 100644
index 0000000000..99e05c98fc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
@@ -0,0 +1,111 @@
+---
+id: 6757498f826b0634696f224e
+title: Task 73
+challengeType: 22
+dashedName: task-73
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It BLANK. I hope it BLANK, but we BLANK prepare for delays.`
+
+## --blanks--
+
+`might`
+
+### --feedback--
+
+This modal verb shows possibility or uncertainty about the future.
+
+---
+
+`won't`
+
+### --feedback--
+
+This contraction is used to express a negative statement about the future.
+
+---
+
+`should`
+
+### --feedback--
+
+This modal verb is used to express a recommendation or advice for future actions.
+
+# --explanation--
+
+Jake uses `might`, `won't`, and `should` to express his thoughts about possibilities, plans, and actions in the future.
+
+`Might` shows possibility or uncertainty: Jake thinks there's a chance that delays could happen but isn't certain.
+
+`Won't` is the contraction for `will not`: Jake hopes delays will not happen, expressing his desire for a positive outcome.
+
+`Should` is used to make a recommendation: Jake suggests preparing for delays as a practical step, even though he hopes they won't happen.
+
+This combination shows how Jake is reflecting on the future: acknowledging uncertainty (`might`), expressing hope (`won't`), and making a plan to act (`should`).
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
new file mode 100644
index 0000000000..d51d0dee88
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
@@ -0,0 +1,113 @@
+---
+id: 67574a712cb1143a3920f2a3
+title: Task 74
+challengeType: 19
+dashedName: task-74
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Jake's approach to the situation?
+
+## --answers--
+
+He is ignoring the delays.
+
+### --feedback--
+
+Jake says, `we should prepare for delays` so he is not ignoring them.
+
+---
+
+He is sure there will be no delays.
+
+### --feedback--
+
+Jake says, `It might` which shows he is not certain there will be no delays.
+
+---
+
+He wants to be ready for delays.
+
+---
+
+He thinks delays are already happening.
+
+### --feedback--
+
+Jake uses `might` which shows he is unsure if delays will happen.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Jake uses `might` to show he is uncertain about the delays but acknowledges the possibility. By saying, `we should prepare for delays`, he demonstrates proactive planning.
+
+This combination of modal verbs shows both reflection and preparation for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
new file mode 100644
index 0000000000..39e6aae186
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
@@ -0,0 +1,88 @@
+---
+id: 67574bb2fe3c4c42bae7b6e5
+title: Task 75
+challengeType: 22
+dashedName: task-75
+---
+
+<!-- (Audio) I'll update the project manager about the situation. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'll update the BLANK BLANK about the situation.`
+
+## --blanks--
+
+`project`
+
+### --feedback--
+
+This word refers to a specific task or goal being worked on.
+
+---
+
+`manager`
+
+### --feedback--
+
+This word refers to a person responsible for overseeing and organizing tasks or teams.
+
+# --explanation--
+
+A `project manager` is a person who oversees the progress of a project, ensuring tasks are completed on time and goals are met. For example:
+
+`The project manager called a meeting to discuss deadlines.` - This shows the manager organizing and leading the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.44,
+      "finishTimestamp": 27.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "I'll update the project manager about the situation.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
new file mode 100644
index 0000000000..e0f1027e41
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
@@ -0,0 +1,106 @@
+---
+id: 67574c6d474104486add91a7
+title: Task 76
+challengeType: 19
+dashedName: task-76
+---
+
+<!-- (Audio) Jake: I'll update the project manager about the situation. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake informing?
+
+## --answers--
+
+He has already updated the project manager about the situation.
+
+### --feedback--
+
+Jake uses `I'll` which shows this is a plan for the future, not something that has already happened.
+
+---
+
+He is updating the project manager about the situation now.
+
+### --feedback--
+
+Jake uses `I'll` which shows this is something he plans to do in the future, not right now.
+
+---
+
+He is not going to inform the project manager.
+
+### --feedback--
+
+Jake explicitly says he will do something.
+
+---
+
+He will update the project manager about the situation.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jake says, `I'll update the project manager`, this shows that Jake is talking about something he plans to do in the future, not something happening now or that has already been done. For example:
+
+- `I'll send the email tomorrow.` - This means sending the email is planned for the future.
+
+- `He'll call the client after the meeting.` - This shows a plan to contact the client later.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.44,
+      "finishTimestamp": 27.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "I'll update the project manager about the situation.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
new file mode 100644
index 0000000000..2d9f3bb8f6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
@@ -0,0 +1,97 @@
+---
+id: 67574d8786f50e500eae8e67
+title: Task 77
+challengeType: 22
+dashedName: task-77
+---
+
+<!-- (Audio) Sarah: I'll alert the development team and tell them to check their emails carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'll alert the BLANK BLANK and tell them to check their emails carefully.`
+
+## --blanks--
+
+`development`
+
+### --feedback--
+
+This word refers to the team responsible for creating or improving something, such as software or systems.
+
+---
+
+`team`
+
+### --feedback--
+
+This word refers to a group of people working together towards a common goal.
+
+# --explanation--
+
+The `development team` is a group of professionals responsible for building or improving systems, software, or products. For example:
+
+`The development team is working on the new feature.` - This means the team is creating or enhancing something specific.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.98,
+      "finishTimestamp": 30.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.06,
+      "dialogue": {
+        "text": "I'll alert the development team",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 3.06,
+      "finishTime": 4.84,
+      "dialogue": {
+        "text": "and tell them to check their emails carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
new file mode 100644
index 0000000000..95e192bf54
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
@@ -0,0 +1,121 @@
+---
+id: 67575000c0fd5b5f211d89c4
+title: Task 78
+challengeType: 19
+dashedName: task-78
+---
+
+<!-- (Audio) Sarah: I'll alert the development team and tell them to check their emails carefully. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Who is Sarah going to alert?
+
+## --answers--
+
+The development team. So they check their emails carefully.
+
+---
+
+Sarah will create a remider to herself about the emails.
+
+### --feedback--
+
+Sarah is giving instructions to others, not acting on them herself.
+
+---
+
+Jake. So he rememebers to check his emails carefully.
+
+### --feedback--
+
+Jake is not mentioned as the one being alerted in this context.
+
+---
+
+The project manager. So they check their emails carefully.
+
+### --feedback--
+
+Sarah is not addressing the project manager in this situation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Here are some elements from Sarah's statement that will help you understand what she is saying:
+
+`I'll alert` shows Sarah's future action to inform someone.
+
+`The development team` directly state who she is informing.
+
+`Tell them` makes it clear that she will give instructions to the development team.
+
+`To check their emails carefully` specifies the action Sarah is advising the development team to take.
+
+This combination of words shows Sarah is planning to inform the development team and give them instructions about being cautious with their emails.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.98,
+      "finishTimestamp": 30.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.06,
+      "dialogue": {
+        "text": "I'll alert the development team",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 3.06,
+      "finishTime": 4.84,
+      "dialogue": {
+        "text": "and tell them to check their emails carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
new file mode 100644
index 0000000000..39a3183667
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
@@ -0,0 +1,90 @@
+---
+id: 6757531dc5fbb973e1912e1a
+title: Task 79
+challengeType: 22
+dashedName: task-79
+---
+
+<!-- (Audio) Is there anything else we should do? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Is there BLANK BLANK we should do?`
+
+## --blanks--
+
+`anything`
+
+### --feedback--
+
+This word refers to something unspecified and is used in questions or negative sentences.
+
+---
+
+`else`
+
+### --feedback--
+
+This word means in addition or different from what has already been mentioned.
+
+# --explanation--
+
+`Is there anything else we should do?` is a way to ask if additional actions are necessary.
+
+It combines `anything`, which refers to something unspecified, with `else`, meaning something additional or different. For example:
+
+`Do you have anything else to add?` - This asks if there is additional input or information.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.68,
+      "finishTimestamp": 32.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.48,
+      "dialogue": {
+        "text": "Is there anything else we should do?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 2.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
new file mode 100644
index 0000000000..e3644254eb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
@@ -0,0 +1,80 @@
+---
+id: 675753a815259c781d2b6913
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll BLANK need to run a full system scan.`
+
+## --blanks--
+
+`probably`
+
+### --feedback--
+
+This word shows that something is likely but not certain to happen.
+
+# --explanation--
+
+`Probably` is an adverb used to express that something is likely to happen but not completely certain. For example:
+
+`We'll probably finish the project by Friday.` - This shows confidence in completing the project by Friday but leaves room for uncertainty.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.36,
+      "finishTimestamp": 34.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
new file mode 100644
index 0000000000..01216d5f7b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
@@ -0,0 +1,96 @@
+---
+id: 67575473b14c837d8de3a866
+title: Task 81
+challengeType: 22
+dashedName: task-81
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably need to run a BLANK BLANK BLANK.`
+
+## --blanks--
+
+`full`
+
+### --feedback--
+
+This word means complete or entire, indicating that no parts will be skipped.
+
+---
+
+`system`
+
+### --feedback--
+
+This word refers to the computer or network being examined.
+
+---
+
+`scan`
+
+### --feedback--
+
+This word means an inspection or analysis to find problems or issues.
+
+# --explanation--
+
+``Full system scan` means a comprehensive check of the entire computer or network to identify potential issues, such as viruses or security threats. For example:
+
+`The team performed a full system scan to find malware.` - This shows a complete analysis of the system for security purposes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.36,
+      "finishTimestamp": 34.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
new file mode 100644
index 0000000000..693a94ec0b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
@@ -0,0 +1,101 @@
+---
+id: 67575588dfebc085e31941e4
+title: Task 82
+challengeType: 22
+dashedName: task-82
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan to ensure there's no hidden malware. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably need to run a full system scan to ensure there's no BLANK BLANK.`
+
+## --blanks--
+
+`hidden`
+
+### --feedback--
+
+This word means something that is not visible or easily found.
+
+---
+
+`malware`
+
+### --feedback--
+
+This word refers to malicious software designed to harm or exploit a system.
+
+# --explanation--
+
+`Hidden` means something that is concealed or not immediately visible, often requiring extra effort to find.
+
+`Malware` refers to malicious software designed to damage, disrupt, or exploit a computer system.
+
+When combined, `hidden malware` describes harmful software that is difficult to detect because it is concealed within the system. For example:
+
+`The scan detected hidden malware that had bypassed the antivirus software.` - This means the malware was able to avoid detection by the antivirus program until a scan found it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.26,
+      "finishTimestamp": 36.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.48,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "to ensure that there's no hidden malware.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
new file mode 100644
index 0000000000..17b2d6d167
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
@@ -0,0 +1,117 @@
+---
+id: 67575734a3672990f7c4385a
+title: Task 83
+challengeType: 19
+dashedName: task-83
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan to ensure there's no hidden malware. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why is Jake planning a full system scan?
+
+## --answers--
+
+To fix an issue with the system.
+
+### --feedback--
+
+Jake is not fixing an issue at this moment.
+
+---
+
+To ensure there's no hidden malware.
+
+---
+
+To update the system software.
+
+### --feedback--
+
+Jake is not updating the system at the moment.
+
+---
+
+To improve the system's performance.
+
+### --feedback--
+
+Jake is not focused on performance at the moment.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+By focusing on these specific parts of the sentence, you can determine Jake's intention:
+
+`Run a full system scan` shows the action Jake is planning to take.
+
+`To ensure` introduces the reason for the scan.
+
+`There's no hidden malware` explains the final purpose — Jake is checking for concealed malicious software.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.26,
+      "finishTimestamp": 36.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.48,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "to ensure that there's no hidden malware.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
new file mode 100644
index 0000000000..1e3ab1fcfa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
@@ -0,0 +1,90 @@
+---
+id: 6757585d71b1ad9924a96eb9
+title: Task 84
+challengeType: 22
+dashedName: task-84
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Can you BLANK with the IT BLANK team for that?`
+
+## --blanks--
+
+`coordinate`
+
+### --feedback--
+
+This word means to organize or work together with others to achieve a goal.
+
+---
+
+`support`
+
+### --feedback--
+
+This word refers to assistance or help, often related to solving technical or operational issues.
+
+# --explanation--
+
+`Coordinate` means to organize or collaborate with others to complete a task or achieve a goal.
+
+`Support` refers to the help or assistance provided by the IT team, often related to technical issues. For example:
+
+`We need to coordinate with the IT team to ensure the system runs smoothly.` - This shows collaboration to manage technical processes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
new file mode 100644
index 0000000000..d83c585008
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
@@ -0,0 +1,110 @@
+---
+id: 675758e09f09139cb34169f9
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake asking Sarah?
+
+## --answers--
+
+To solve the problem on her own.
+
+### --feedback--
+
+Jake is not asking Sarah to handle the task alone.
+
+---
+
+To explain the issue to the development team.
+
+### --feedback--
+
+Jake doesn't mention the development team.
+
+---
+
+To update the project manager about the task.
+
+### --feedback--
+
+Jake does not mention the project manager in this context.
+
+---
+
+To work with the IT support team to handle the task.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+By focusing on key parts of the sentence, you can determine what Jake is asking Sarah:
+
+`Coordinate` shows Jake is asking Sarah to organize or collaborate.
+
+`With the IT support team` specifies who Sarah needs to work with.
+
+`For that` refers to the task Jake wants her to handle with their help.
+
+This shows Jake is asking Sarah to work with the IT support team to address a specific task.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
new file mode 100644
index 0000000000..e857e557f2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
@@ -0,0 +1,92 @@
+---
+id: 67575a0d4b966da41383050b
+title: Task 86
+challengeType: 19
+dashedName: task-86
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to Jake's question?
+
+## --answers--
+
+`Yes, I'll contact them now.`
+
+---
+
+`I don't know how to work with people.`
+
+### --feedback--
+
+This doesn't address Jake's request or offer a solution.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The best response is `Yes, I'll contact them now.` Here's why:
+
+`Yes` directly agrees to Jake's request.
+
+`I'll contact them now` shows willingness to act promptly, which matches the tone of Jake's question.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
new file mode 100644
index 0000000000..073a185670
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
@@ -0,0 +1,90 @@
+---
+id: 675c8db0264a83364dc521ac
+title: Task 87
+challengeType: 22
+dashedName: task-87
+---
+
+<!-- (Audio) Sarah: Yes, I'll contact them now. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, BLANK contact them BLANK.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is the contraction for `I will`. The first letter is capitalized.
+
+---
+
+`now`
+
+### --feedback--
+
+This word indicates that Sarah is planning to act immediately.
+
+# --explanation--
+
+`I'll` is the contraction for `I will`. In this context, it expresses a decision made at the moment of speaking. This is common when someone reacts to a situation or agrees to do something promptly.
+
+`Now` is used to indicate something happening at the present moment. For example:
+
+`I'll send the report now.` - This shows a decision to act right away.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.9,
+      "finishTimestamp": 41.4
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.5,
+      "dialogue": {
+        "text": "Yes, I'll contact them now.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.0
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
new file mode 100644
index 0000000000..ff24f27ca7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
@@ -0,0 +1,92 @@
+---
+id: 675c8f75eaf3914275999cae
+title: Task 88
+challengeType: 22
+dashedName: task-88
+---
+
+<!-- (Audio) Sarah: How do you think our clients will react to this news? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`How do you think our clients BLANK BLANK to this news?`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This modal verb is used to talk about what is likely to happen in the future.
+
+---
+
+`react`
+
+### --feedback--
+
+This word means to respond or behave in a certain way when something happens.
+
+# --explanation--
+
+`Will` is a modal verb used to predict the future.
+
+`React` means how someone responds or behaves in response to something. For example:
+
+- `How do you think the team will react to the delay?` - This predicts the team's response to a delay.
+
+- `Our clients will react positively to the improved service.` - This shows an expected positive response to a change.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.7,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.32,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
new file mode 100644
index 0000000000..ebfb93b3d4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
@@ -0,0 +1,117 @@
+---
+id: 675c900ff099fa46fad7624d
+title: Task 89
+challengeType: 19
+dashedName: task-89
+---
+
+<!-- (Audio) Sarah: Yes, I'll contact them now. How do you think our clients will react to this news? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Sarah wondering about?
+
+## --answers--
+
+How the clients will react to the news.
+
+---
+
+If the clients reacted well to the news.
+
+### --feedback--
+
+Sarah is asking about the future, not something that has already happened.
+
+---
+
+How the clients reacted to the news.
+
+### --feedback--
+
+Sarah is asking about the future, not something that has already happened.
+
+---
+
+If they should let the clients know about the news.
+
+### --feedback--
+
+Sarah is not asking whether to share the news.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+In the sentence, Sarah says, `How do you think our clients will react to this news?` Here's how to find the answer:
+
+`Will react` uses the `Future Simple` tense, showing Sarah is asking about a future possibility.
+
+`React` focuses on the clients' response or behavior.
+
+This indicates Sarah is wondering about how the clients might respond to the news.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.9,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.6,
+      "dialogue": {
+        "text": "Yes, I'll contact them now.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.9,
+      "finishTime": 5.12,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
new file mode 100644
index 0000000000..ff6c44bda5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
@@ -0,0 +1,92 @@
+---
+id: 675c91b0c74a72519ebb0a83
+title: Task 91
+challengeType: 22
+dashedName: task-91
+---
+
+<!-- (Audio) Jake: They'll likely be concerned. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK BLANK be concerned.`
+
+## --blanks--
+
+`They'll`
+
+### --feedback--
+
+This is the contraction for `They will,` used to talk about something that is expected to happen in the future. The first letter is capitalized.
+
+---
+
+`likely`
+
+### --feedback--
+
+This word means that something is probable or has a high chance of happening.
+
+# --explanation--
+
+`They'll` is the contraction for `they will`. It is used to talk about something expected or predicted to happen in the future.
+
+`Likely` means something is probable or has a high chance of happening. For example:
+
+- `They'll likely ask for more information.` - This predicts a probable request from the clients.
+
+- `The feature will likely need additional testing.` - This indicates a high probability that testing will be required.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 46.0
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.4,
+      "dialogue": {
+        "text": "They'll likely be concerned",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
new file mode 100644
index 0000000000..739a336cde
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
@@ -0,0 +1,92 @@
+---
+id: 675c92e9a6133659ccad5424
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- (Audio) Sarah: How do you think our clients will react to this news? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Jake thinks clients will be probably worried. Which option will deliver this message to Sarah?
+
+## --answers--
+
+`They'll likely be concerned.`
+
+---
+
+`They already know about the news.`
+
+### --feedback--
+
+Jake is not discussing whether the clients know about the news; he is focusing on their potential reaction.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The correct answer is `They'll likely be concerned.` Here's why:
+
+`They'll` indicates Jake is predicting the clients' future reaction.
+
+`Likely` suggests that worry is probable, though not certain.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.7,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.32,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
new file mode 100644
index 0000000000..cb9b9f73d5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
@@ -0,0 +1,109 @@
+---
+id: 675c94decb56d46654acf008
+title: Task 92
+challengeType: 19
+dashedName: task-92
+---
+
+<!-- (Audio) Jake: They'll likely be concerned. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How will the clients feel?
+
+## --answers--
+
+They'll be completely calm.
+
+### --feedback--
+
+Jake uses the word `concerned` which suggests worry, not calmness.
+
+---
+
+They'll likely be concerned.
+
+---
+
+They'll be unaware of the situation.
+
+### --feedback--
+
+Jake's statement focuses on their feelings, not whether they know about the situation.
+
+---
+
+They'll feel excited.
+
+### --feedback--
+
+The word `concerned` means worry, which is the opposite of excitement.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Likely be` suggests this is a probable outcome, though not certain.
+
+`Concerned` means feeling worried or anxious about something. In this context, Jake predicts that the clients will feel worried about the news. For example:
+
+- `The team was concerned about meeting the deadline.` - This shows they were worried about achieving their goal.
+
+- `Our clients were concerned about the system's performance.` - This indicates they were anxious about how well the system was functioning.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 46.0
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.4,
+      "dialogue": {
+        "text": "They'll likely be concerned",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
new file mode 100644
index 0000000000..c66686a2a9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
@@ -0,0 +1,100 @@
+---
+id: 675c9579b10f316b5542b331
+title: Task 93
+challengeType: 22
+dashedName: task-93
+---
+
+<!-- (Audio) Jake: But I'll reassure them that we are taking all necessary steps to secure our systems. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`But I'll BLANK them that we BLANK BLANK all necessary steps to secure our systems.`
+
+## --blanks--
+
+`reassure`
+
+### --feedback--
+
+This word means to comfort or make someone feel less worried about something.
+
+---
+
+`are`
+
+### --feedback--
+
+This is part of the structure `to be` + a verb ending in `-ing`, used here to describe an action planned for the near future
+
+---
+
+`taking`
+
+### --feedback--
+
+This word means performing or carrying out an action or step. In this context, it refers to actions being planned or executed.
+
+# --explanation--
+
+`Reassure` means to provide confidence or reduce someone's anxiety about a situation.
+
+`We are taking` combines the verb `to be` with a verb ending in `-ing`. This is often used to talk about future actions already planned or happening soon. For example:
+
+- `I'll reassure the team that we are reviewing the report.` - This means you will comfort the team by telling them the review is happening soon.
+
+- `She is meeting the client tomorrow to reassure them about the changes.` - This shows the `to be` + a verb ending in `-ing` structure for a planned event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.98,
+      "finishTimestamp": 50.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 6,
+      "dialogue": {
+        "text": "But I'll reassure them that we're taking all necessary steps to secure our systems.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
new file mode 100644
index 0000000000..f39ef43914
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
@@ -0,0 +1,115 @@
+---
+id: 675c96e7feed5f75004ea8a4
+title: Task 94
+challengeType: 19
+dashedName: task-94
+---
+
+<!-- (Audio) Jake: They'll likely be concerned, but I'll reassure them that we are taking all necessary steps to secure our systems. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake's statement show about his priorities for the future?
+
+## --answers--
+
+Fixing the problem without telling the clients.
+
+### --feedback--
+
+The audio mentions both actions, not just fixing the issue.
+
+---
+
+Avoiding responsibility for what happened.
+
+### --feedback--
+
+The audio shows Jake is planning to take action, not avoiding it.
+
+---
+
+Keeping clients calm and fixing the security issue.
+
+---
+
+Waiting to see what happens next.
+
+### --feedback--
+
+The audio shows Jake is planning to act now, not waiting.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Jake's statement shows his priorities are about keeping clients calm and solving the problem. Here's how the audio explains this:
+
+`I'll reassure them` shows Jake wants to help clients feel less worried by telling them what the team is doing.
+
+`We are taking all necessary steps` shows Jake's focus on solving the security issue as quickly and completely as possible.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 51.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.3,
+      "dialogue": {
+        "text": "They'll likely be concerned,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.38,
+      "finishTime": 7.58,
+      "dialogue": {
+        "text": "but I'll reassure them that we're taking all necessary steps to secure our systems.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.08
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
new file mode 100644
index 0000000000..27de1c1036
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
@@ -0,0 +1,109 @@
+---
+id: 675c9900820144823ed5b11a
+title: Task 95
+challengeType: 22
+dashedName: task-95
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks, Jake. BLANK BLANK BLANK to discuss the investigation results and plan our next steps.`
+
+## --blanks--
+
+`Let's`
+
+### --feedback--
+
+This is a contraction for `Let us`, used to suggest doing something together. The first letter is capitalized.
+
+---
+
+`meet`
+
+### --feedback--
+
+This word means to come together, often to discuss or plan something.
+
+---
+
+`later`
+
+### --feedback--
+
+This word refers to a time in the future, not immediately.
+
+# --explanation--
+
+`Let's` is a contraction for `Let us`, used to make a suggestion or propose doing something together.
+
+`Meet` means to come together, often for a discussion or planning.
+
+`Later` refers to a future time, not immediately. Sarah is suggesting they meet in the near future to discuss the results and plan further actions. For example:
+
+`Let's meet tomorrow to finalize the details.` - This suggests getting together the next day to complete planning.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
new file mode 100644
index 0000000000..2cba93d41a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
@@ -0,0 +1,101 @@
+---
+id: 675c9a309dcbc3053601e653
+title: Task 96
+challengeType: 22
+dashedName: task-96
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks, Jake. Let's meet later to discuss the BLANK BLANK and plan our next steps.`
+
+## --blanks--
+
+`investigation`
+
+### --feedback--
+
+This word refers to a detailed process of examining or finding information about something, especially a problem or issue.
+
+---
+
+`results`
+
+### --feedback--
+
+This word means the outcomes or findings from an action, process, or investigation.
+
+# --explanation--
+
+`Investigation` refers to a detailed examination or inquiry to uncover facts or information.
+
+`Results` are the findings or outcomes of the investigation. For example:
+
+- `The investigation showed there was a security breach.` - This means the inquiry revealed information about the breach.
+
+- `The results of the investigation helped us fix the issue.` - This indicates that the findings led to corrective actions.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
new file mode 100644
index 0000000000..912695fbd3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
@@ -0,0 +1,117 @@
+---
+id: 675c9a9d87d492086e1ab3cf
+title: Task 97
+challengeType: 19
+dashedName: task-97
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to do?
+
+## --answers--
+
+Solve the issue immediately without a meeting.
+
+### --feedback--
+
+Sarah suggests meeting later, not solving the issue immediately.
+
+---
+
+Finish the investigation before meeting with the clients.
+
+### --feedback--
+
+Sarah is not talking about finishing the investigation first; she wants to discuss the results they already have.
+
+---
+
+Ask Jake to share the results and next steps with the clients.
+
+### --feedback--
+
+Sarah is talking about discussing the results with Jake, not sharing them with the clients.
+
+---
+
+Meet later to discuss the results and plan the next steps.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Here's how to find the answer:
+
+`Let's meet later` shows she is proposing a meeting in the future.
+
+`To discuss the investigation results` explains what the meeting will focus on.
+
+`Plan our next steps` shows that Sarah wants to decide on future actions during the meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
new file mode 100644
index 0000000000..eebfe0f563
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
@@ -0,0 +1,96 @@
+---
+id: 67619dab2031295f7b4dcee1
+title: Task 98
+challengeType: 22
+dashedName: task-98
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`probably`, `I'll reassure`, `I'll send`, `will need`, `it won't`, `will affect`, and `I'll alert`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: Sarah, I just found out that we've had a phishing attack on our system. It looks like someone BLANK to notify the team and take immediate action.`
+
+`Sarah: Oh no! Do you know where it originated from?`
+
+`Jake: Not yet, but I think it came from an email link. We need to investigate quickly. BLANK out a warning to everyone right away.`
+
+`Sarah: That sounds like a good plan. Do you think it BLANK our project deadlines?`
+
+`Jake: It might. I hope BLANK, but we should prepare for delays. I'll update the project manager about the situation.`
+
+`Sarah: BLANK the development team and tell them to check their emails carefully. Is there anything else we should do?`
+
+`Jake: We'll BLANK need to run a full system scan to ensure there's no hidden malware. Can you coordinate with the IT support team for that?`
+
+`Sarah: Yes, I'll contact them now. How do you think our clients will react to this news?`
+
+`Jake: They'll likely be concerned, but BLANK them that we are taking all necessary steps to secure our systems.`
+
+## --blanks--
+
+`will need`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense and describe a future necessity. The second word indicates a requirement or something essential.
+
+---
+
+`I'll send`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, showing a future action. The first letter is capitalized. The second word means to deliver something to someone or somewhere.
+
+---
+
+`will affect`
+
+### --feedback--
+
+This phrase describes the future impact of an action using the `Future Simple` tense. The second word means to change or influence something.
+
+---
+
+`it won't`
+
+### --feedback--
+
+This is the contraction for `it will not`, showing a negative prediction about the future. The second word indicates refusal or something not happening.
+
+---
+
+`I'll alert`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, indicating a future action. The first letter is capitalized. The second word means to notify or warn someone.
+
+---
+
+`probably`
+
+### --feedback--
+
+This adverb is used to describe something that is likely to happen. It shows a high chance of something occurring.
+
+---
+
+`I'll reassure`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, indicating a future action to comfort or reassure someone. The first letter is capitalized. The second word means to calm someone's concerns or provide confidence.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
new file mode 100644
index 0000000000..0ebff27010
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
@@ -0,0 +1,178 @@
+---
+id: 6761c4698166cd2462c1d685
+title: "Dialogue 3: Planning for SQL Injection Prevention"
+challengeType: 21
+dashedName: dialogue-3-planning-for-sql-injection-prevention
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Maria",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-3.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 3.42,
+     "dialogue": {
+       "text": "I've been looking into our database security,",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 3.66,
+     "finishTime": 7.64,
+     "dialogue": {
+       "text": "and I think we're going to need some additional measures to prevent SQL injection attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 8.3,
+     "finishTime": 13.62,
+     "dialogue": {
+       "text": "I agree. We've been noticing some unusual queries in the logs. What are you going to recommend to improve security?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 14.16,
+     "finishTime": 17.88,
+     "dialogue": {
+       "text": "We're going to implement parameterized queries to minimize the risk.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 18.16,
+     "finishTime": 21.62,
+     "dialogue": {
+       "text": "This should reduce the chances of unauthorized access to our data.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 22.06,
+     "finishTime": 26.18,
+     "dialogue": {
+       "text": "That sounds like a solid plan. Are we going to require additional training for our developers?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 26.82,
+     "finishTime": 31.68,
+     "dialogue": {
+       "text": "Yes. We're going to hold the session next week to ensure everyone knows how to implement these changes.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 31.94,
+     "finishTime": 34.98,
+     "dialogue": {
+       "text": "It's crucial that we all follow best practices.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 35.9,
+     "finishTime": 39.8,
+     "dialogue": {
+       "text": "I'm going to inform the team about the upcoming training. Is there anything else we need to do?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 40.12,
+     "finishTime": 46.08,
+     "dialogue": {
+       "text": "We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 46.58,
+     "finishTime": 49.34,
+     "dialogue": {
+       "text": "Great. I think this is going to make a big difference in our security.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 49.74,
+     "finishTime": 52.02,
+     "dialogue": {
+       "text": "Are we going to share this information with other departments?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 52.4,
+     "finishTime": 57.44,
+     "dialogue": {
+       "text": "We'll probably do that after we've completed the training. It's better to ensure our team is fully prepared first.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.94
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 58.44
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
new file mode 100644
index 0000000000..07d026345b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
@@ -0,0 +1,70 @@
+---
+id: 6761c69821431133f4860640
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What action will Jake take next?
+
+## --answers--
+
+He won't talk to the clients and focus only on fixing the system.
+
+### --feedback--
+
+The message shows Jake is keeping the clients informed, not ignoring their concerns.
+
+---
+
+He'll reassure the clients that steps are being taken.
+
+---
+
+He'll tell Sarah to report directly to the clients.
+
+### --feedback--
+
+Jake has already taken responsibility for communicating with the clients.
+
+---
+
+He'll ask the IT team to delay their investigation.
+
+### --feedback--
+
+The IT team is already actively monitoring the situation, so delaying the investigation doesn't make sense.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To determine what Jake will do next, focus on his message:
+
+`I'll provide you with regular updates` shows Jake's plan to keep the clients informed.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
new file mode 100644
index 0000000000..68ed2d0825
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
@@ -0,0 +1,76 @@
+---
+id: 6761ca7cf0fd854c646ebd11
+title: Task 100
+challengeType: 19
+dashedName: task-100
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What is the clients' main concern?
+
+## --answers--
+
+They are worried about losing access to their accounts.
+
+### --feedback--
+
+The message focuses on the security of the clients' data, not account access.
+
+---
+
+They think the issue has already been fixed.
+
+### --feedback--
+
+The clients are asking for confirmation, which shows they are not sure the issue has been resolved.
+
+---
+
+They are concerned about the safety of their data.
+
+---
+
+They are asking for technical details about the system scan.
+
+### --feedback--
+
+The clients are asking *when* the issue will be resolved, not for technical details.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The clients say, `We're very concerned about the security of our data.`
+
+This clearly shows their main concern is the **safety of their data**.
+
+They ask, `Can you confirm when this issue will be fully resolved?` which suggests they are looking for reassurance that their data is secure and the problem will soon be fixed. For example:
+
+- `We're worried about losing sensitive information.` - This shows concern for data safety.
+
+- `Is the system safe now?` - This reflects a need for confirmation about the resolution.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
new file mode 100644
index 0000000000..48ed6deba0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
@@ -0,0 +1,72 @@
+---
+id: 6761cae47045b54f50840915
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What do Jake's actions show about his priorities?
+
+## --answers--
+
+Keeping the clients informed and addressing the issue quickly.
+
+---
+
+Focusing on fixing the technical issue.
+
+### --feedback--
+
+Jake promises to provide updates to the clients, so he is not just focusing on fixing the system.
+
+---
+
+Finding the person who made this mistake.
+
+### --feedback--
+
+Jake's message does not assign blame.
+
+---
+
+Delaying the resolution to gather more information.
+
+### --feedback--
+
+Jake highlights that steps are already being taken to resolve the issue quickly.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jake's actions show that he prioritizes keeping the clients informed and solving the issue quickly.
+
+`I'll provide you with regular updates` shows his focus on clear and transparent communication.
+
+`We're taking all necessary steps to secure the system` highlights his commitment to resolving the issue as soon as possible.  
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
new file mode 100644
index 0000000000..c65556d1ec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
@@ -0,0 +1,74 @@
+---
+id: 6761cb950d555c54150b2212
+title: Task 102
+challengeType: 19
+dashedName: task-102
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What is the next step Jake refers to in his message?
+
+## --answers--
+
+Running a full system scan.
+
+### --feedback--
+
+Jake mentions that the full system scan has already been done.
+
+---
+
+Actively monitoring the system.
+
+---
+
+Resolving the issue completely.
+
+### --feedback--
+
+The text shows the issue is still being worked on, and Jake has not yet resolved it.
+
+---
+
+Sending details about the phishing attack.
+
+### --feedback--
+
+Jake focuses on actions being taken, not on sharing details about the phishing attack.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the next step Jake refers to, look at the specific actions mentioned in his message:
+
+`We've run a full system scan` shows this step has already been done.
+
+`The IT support team is actively monitoring the situation` is the next step currently happening to secure the system.
+
+Jake does not yet mention resolving the issue or providing additional details about the phishing attack.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
new file mode 100644
index 0000000000..1e70e5b13d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
@@ -0,0 +1,82 @@
+---
+id: 6761e3efbd12c067489c90fe
+title: Task 103
+challengeType: 22
+dashedName: task-103
+---
+
+<!-- (audio) Jake: I've been looking into our database security. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I've been BLANK into our database security.`
+
+## --blanks--
+
+`looking`
+
+### --feedback--
+
+This word means trying to find information or investigate. it ends in `-ing`.
+
+# --explanation--
+
+`Looking into` means to investigate or examine something carefully. For example:
+
+- `The manager is looking into the issue with the server.` - This means the manager is investigating the server problem.
+
+- `She is looking into ways to improve our performance.` - This means she is searching for ways to make the team perform better.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 2.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
new file mode 100644
index 0000000000..2c880f8a46
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
@@ -0,0 +1,124 @@
+---
+id: 6761e51505b1d96f537b089e
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I've been looking into our database security, and I think BLANK BLANK BLANK some additional measures to prevent SQL injection attacks.`
+
+## --blanks--
+
+`we're`
+
+### --feedback--
+
+This is a contraction for `we are`.
+
+---
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned or intended action in the future. The first is a verb and the second a preposition.
+
+---
+
+`need`
+
+### --feedback--
+
+This verb means something is required or necessary. It is a verb in its base form.
+
+# --explanation--
+
+`Going to` is used to talk about planned actions or intentions for the future. For example:
+
+- `We are going to upgrade the system next month.` - This means the upgrade is planned and will happen soon.
+
+- `She is going to learn SQL next year.` - This means she intends to learn SQL in the future.
+
+In this sentence:
+
+`We're` is the contraction for `we are`.
+
+`Going to` shows the action is planned for the near future.
+
+`Need` is the base verb indicating something necessary or required.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
new file mode 100644
index 0000000000..1b1456c086
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
@@ -0,0 +1,124 @@
+---
+id: 6761e7b82f98fc7fb7d9c06b
+title: Task 105
+challengeType: 19
+dashedName: task-105
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake currently looking into?
+
+## --answers--
+
+Database security
+
+---
+
+Server upgrades
+
+### --feedback--
+
+Jake doesn't mention upgrading servers; he's focused on something else.
+
+---
+
+New software
+
+### --feedback--
+
+Jake isn't talking about installing new software.
+
+---
+
+Network performance
+
+### --feedback--
+
+Jake's focus is not on network performance. Listen carefully to the audio.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Database security` refers to protecting databases from unauthorized access or attacks. For example:
+
+`The team is improving database security to prevent hackers from accessing confidential data.` - This means they are making the database safer to stop any illegal access.
+
+Jake says he is `looking into` their `database security`, which means he is investigating or checking its safety.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
new file mode 100644
index 0000000000..2e8b4f8e36
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
@@ -0,0 +1,125 @@
+---
+id: 6761e90350ebde88221daeea
+title: Task 106
+challengeType: 19
+dashedName: task-106
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake think they need to do?
+
+## --answers--
+
+A new database
+
+### --feedback--
+
+Jake doesn't mention needing a new database. Listen carefully to what he says they require.
+
+---
+
+More team members
+
+### --feedback--
+
+Jake doesn't suggest needing more people for the task.
+
+---
+
+Additional measures
+
+---
+
+Less security
+
+### --feedback--
+
+This option is the opposite of what Jake suggests. He is looking to improve security, not reduce it.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Additional measures` refers to extra actions or steps taken to fix or improve something. For example:
+
+`We need additional measures to protect the system from future attacks.` - This means more steps are necessary to improve the system's safety.
+
+Jake says they need additional measures, meaning more steps are required to improve the database security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
+
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
new file mode 100644
index 0000000000..bdd401e122
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
@@ -0,0 +1,124 @@
+---
+id: 6761e99e3e0f098cc0f265aa
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What problem are the additional measures meant to address?
+
+## --answers--
+
+Slow database performance
+
+### --feedback--
+
+Jake is not talking about improving the database speed. Listen carefully to what the measures are for.
+
+---
+
+Data backup issues
+
+### --feedback--
+
+Jake does not mention any problem with data backups. Focus on the security issue he talks about.
+
+---
+
+Software updates
+
+### --feedback--
+
+Jake is not discussing updates to software. He is concerned with preventing a specific type of attack.
+
+---
+
+SQL injection attacks
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`SQL injection attacks` are a type of cyber attack where hackers insert harmful code into a database query to access or damage data. For example:
+
+`The company added security measures to prevent SQL injection attacks on their website.` - This means they took steps to stop hackers from entering harmful code.
+
+Jake says the `additional measures` are needed to `prevent SQL injection attacks`, meaning they are trying to stop this specific type of threat.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
new file mode 100644
index 0000000000..0690caa26b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
@@ -0,0 +1,124 @@
+---
+id: 6761eb2e4b1192968b2303f4
+title: Task 108
+challengeType: 19
+dashedName: task-108
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jake describe their current database security?
+
+## --answers--
+
+They are not prepared at all and need to start from scratch.
+
+### --feedback--
+
+Jake doesn't say they have no security at all. Listen again to his comment about needing additional measures.
+
+---
+
+They have some security, but they need more measures to improve it.
+
+---
+
+They have already taken additional measures and are now fully protected.
+
+### --feedback--
+
+Jake mentions `additional measures`, which means they haven't done it yet.
+
+---
+
+Their security is perfect, and no further actions are required.
+
+### --feedback--
+
+Jake clearly says they need to add more measures, so their security is not perfect yet.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake says he has been `looking into` their database security, which means he is investigating its current state. He concludes that they `need additional measures`, meaning some security exists, but it's not enough. For example:
+
+`The team needed additional measures to ensure their security was strong.` - This means the team added extra steps to improve something that already existed.
+
+Jake's statement shows their database security is in place but requires more work to prevent `SQL injection attacks`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
new file mode 100644
index 0000000000..c8cbde4537
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
@@ -0,0 +1,106 @@
+---
+id: 6761ecb48889faa066740143
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the best answer to Jake's comment?
+
+## --answers--
+
+`I agree.`
+
+---
+
+`Why don't we ignore it?`
+
+### --feedback--
+
+Ignoring the issue doesn't address Jake's concern about security.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The most appropriate answer is `I agree` because it supports Jake's suggestion that additional measures are needed to improve database security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
new file mode 100644
index 0000000000..04a9c8dd49
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
@@ -0,0 +1,103 @@
+---
+id: 6761ee00596d9fa8c8c3ac90
+title: Task 110
+challengeType: 22
+dashedName: task-110
+---
+
+<!-- (audio) Maria: I agree. We've been noticing some unusual queries in the logs. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I agree. We've been noticing some unusual BLANK in the BLANK.`
+
+## --blanks--
+
+`queries`
+
+### --feedback--
+
+This is the plural form of a request for information in a database.
+
+---
+
+`logs`
+
+### --feedback--
+
+These are files or records where events, activities, or actions are stored.
+
+# --explanation--
+
+`Query` refers to a request for information, often in a database. `Queries` means more than one request. For example:
+
+- `The developer sent a query to find user data.` - This means the developer made a single request for information.
+
+- `There were multiple queries for customer information.` - This means there were several requests for data.
+
+`Logs` refers to files or records that track events or actions. For example:
+
+`The team checked the logs to find unusual activities.` - This means they looked at the stored records to identify any issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.1,
+      "finishTimestamp": 10.36
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.64,
+      "dialogue": {
+        "text": "I agree.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.64,
+      "finishTime": 4.26,
+      "dialogue": {
+        "text": "We've been noticing some unusual queries in the logs.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
new file mode 100644
index 0000000000..410ae23ed2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
@@ -0,0 +1,113 @@
+---
+id: 6761f0dc81967cbbe1118dae
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- (audio) Maria: I agree. We've been noticing some unusual queries in the logs. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why does Maria agree with Jake?
+
+## --answers--
+
+Because the database is completely secure.
+
+### --feedback--
+
+Maria does not say the database is secure. She agrees with Jake about needing additional measures.
+
+---
+
+Because she noticed unusual queries in the logs.
+
+---
+
+Because they have already fixed the problem.
+
+### --feedback--
+
+Maria mentions noticing unusual queries, which suggests the problem is not yet fixed.
+
+---
+
+Because there are no issues in the logs.
+
+### --feedback--
+
+Maria says the opposite: there are unusual queries in the logs.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria agrees with Jake because she has evidence that supports his concern about database security.
+
+She mentions noticing `unusual queries in the logs`, which means some unexpected or suspicious requests were recorded.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.1,
+      "finishTimestamp": 10.36
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.64,
+      "dialogue": {
+        "text": "I agree.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.64,
+      "finishTime": 4.26,
+      "dialogue": {
+        "text": "We've been noticing some unusual queries in the logs.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
new file mode 100644
index 0000000000..605cd2e804
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
@@ -0,0 +1,98 @@
+---
+id: 6761f1e5287834c2cb5f4631
+title: Task 112
+challengeType: 22
+dashedName: task-112
+---
+
+<!-- (audio) What are you going to recommend to improve security? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`What BLANK BLANK BLANK recommend to improve security?`
+
+## --blanks--
+
+`are`
+
+### --feedback--
+
+This word is part of the verb `to be` and is used here to form a question about the future.
+
+---
+
+`you`
+
+### --feedback--
+
+This is the pronoun that refers to the person being asked.
+
+---
+
+`going to`
+
+### --feedback--
+
+These two words indicate a planned or intended action in the future. One is a verb, and the other is a preposition.
+
+# --explanation--
+
+This type of question uses `going to` to ask about someone's **future actions or plans**. You use it when you want to know what someone `intends to do` or has already planned. For example:
+
+- `What are you going to do about the missing files?` - This asks about the person's future action to solve a problem.
+
+- `When are you going to update the system?` - This asks about a specific plan for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.52,
+      "finishTimestamp": 12.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "What are you going to recommend to improve security?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
new file mode 100644
index 0000000000..ad528387ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
@@ -0,0 +1,106 @@
+---
+id: 6761f2fbd2db7aca063b6a5c
+title: Task 113
+challengeType: 19
+dashedName: task-113
+---
+
+<!-- (audio) Maria: What are you going to recommend to improve security? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+What Jake suggests to improve security in the future.
+
+---
+
+What has already been done to improve security.
+
+### --feedback--
+
+Maria is asking about a future action, not something that has already happened.
+
+---
+
+What kind of security measures are not useful.
+
+### --feedback--
+
+Maria is asking for suggestions, not about measures that are ineffective.
+
+---
+
+Who is responsible for causing the security issues.
+
+### --feedback--
+
+Maria is focused on improving security, not finding out who caused the issues.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Recommend` means to suggest or advise something as a good idea or solution. Maria uses `going to` in her question to ask about **future actions** or plans. For example:
+
+`What are you going to recommend for the project?` - This asks what someone will suggest as a solution or improvement.
+
+In this sentence, Maria wants to know what Jake will suggest to improve security in the future. She is not asking about past actions or problems, but about ideas to move forward.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.52,
+      "finishTimestamp": 12.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "What are you going to recommend to improve security?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
new file mode 100644
index 0000000000..e6bd753de9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
@@ -0,0 +1,90 @@
+---
+id: 6761f509323d5ad6cfe9d212
+title: Task 114
+challengeType: 22
+dashedName: task-114
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're BLANK BLANK parameterized queries to minimize the risk.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned or intended action in the future. The first is a verb, and the second is a preposition.
+
+---
+
+`implement`
+
+### --feedback--
+
+This verb means to put an action, idea, or plan into effect.
+
+# --explanation--
+
+`Going to` is used to show that something has been decided and will happen soon.
+
+`Implement` means to put a plan or idea into action. For example:
+
+`The team is going to implement a new security strategy next month.` - This means the team has decided to take action and will begin soon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
new file mode 100644
index 0000000000..c71051c55c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
@@ -0,0 +1,84 @@
+---
+id: 6761f66b536d13df9a6e4b87
+title: Task 115
+challengeType: 22
+dashedName: task-115
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're going to implement BLANK queries to minimize the risk.`
+
+## --blanks--
+
+`parameterized`
+
+### --feedback--
+
+This word describes queries that use predefined values to improve security. It is a long word often used in database contexts.
+
+# --explanation--
+
+`Parameterized` comes from the root word `parameter`, which is a value or placeholder used to control how something works.
+
+When people say a query is `parameterized`, it means it uses predefined values (parameters) instead of inserting user input directly.
+
+This helps improve database security by preventing certain attacks like SQL injection. For example:
+
+- `The developer used parameterized queries to secure the database.` - This means they used placeholders to ensure no harmful code could be inserted.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
new file mode 100644
index 0000000000..d7c5ba0cd2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
@@ -0,0 +1,106 @@
+---
+id: 6761f6dc272d86e2f315b79c
+title: Task 116
+challengeType: 19
+dashedName: task-116
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Jake's plan?
+
+## --answers--
+
+To improve the database's performance with faster queries.
+
+### --feedback--
+
+Jake's plan focuses on minimizing risk, not improving the database speed.
+
+---
+
+To implement parameterized queries to minimize the risk.
+
+---
+
+To add more servers to handle heavy traffic.
+
+### --feedback--
+
+Jake doesn't mention servers or traffic. He talks about securing the database.
+
+---
+
+To fix the errors caused by broken queries.
+
+### --feedback--
+
+Jake is not fixing broken queries. He's focused on reducing risks by implementing a specific security method.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Implement` means to put an idea or solution into action.
+
+`Parameterized queries` are a method used in databases to reduce security risks, like SQL injection. This works by using placeholders for data instead of inserting user input directly into the query.
+
+In this sentence, Jake's plan is to take action to improve security and prevent risks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
new file mode 100644
index 0000000000..d89ad70d05
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
@@ -0,0 +1,80 @@
+---
+id: 6761f838245300ebfcf372cd
+title: Task 117
+challengeType: 22
+dashedName: task-117
+---
+
+<!-- (audio) This should reduce the chances of unauthorized access to our data. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`This should reduce the chances of BLANK access to our data.`
+
+## --blanks--
+
+`unauthorized`
+
+### --feedback--
+
+This word describes something that is not allowed or approved. It starts with `un-` to show the negative form.
+
+# --explanation--
+
+`Unauthorized` means **not allowed** or **not approved**. It is formed by adding the prefix `un-` to the root word `authorized`, which means permitted or approved. For example:
+
+`Unauthorized users tried to access the system.` - This means users who did not have permission attempted to get in.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
new file mode 100644
index 0000000000..86bfe5f3aa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
@@ -0,0 +1,119 @@
+---
+id: 6761f9d7a849d8f61aa12deb
+title: Task 118
+challengeType: 19
+dashedName: task-118
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What problem is Jake trying to solve by implementing parameterized queries?
+
+## --answers--
+
+Data not being backed up correctly.
+
+### --feedback--
+
+Jake does not mention anything about data backups. Focus on the issue he wants to minimize.
+
+---
+
+Errors in the database caused by broken queries.
+
+### --feedback--
+
+Jake talks about minimizing risk, not fixing broken queries or errors.
+
+---
+
+Slow database performance when handling queries.
+
+### --feedback--
+
+Jake's goal is related to security, not improving database speed or performance.
+
+---
+
+Unauthorized access to data.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, listen for the words:
+
+`Should reduce` shows Jake's intention to make something smaller or less likely.
+
+`Unauthorized access` refers to someone without permission trying to view or use data.
+
+Jake says `this should reduce the chances of unauthorized access to our data`.
+
+This shows his plan is to minimize a security risk, not to fix backups, errors, or improve database performance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5,
+      "finishTime": 8.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
new file mode 100644
index 0000000000..57f418be46
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
@@ -0,0 +1,96 @@
+---
+id: 6762dceeac22841f223b0101
+title: Task 119
+challengeType: 19
+dashedName: task-119
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data. -->
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to show support to Jake's plan?
+
+## --answers--
+
+`That sounds like a solid plan.`
+
+---
+
+`Let's focus on other issues for now.`
+
+### --feedback--
+
+This response does not address Jake's plan and shifts attention away from his suggestion.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The phrase `That sounds like a solid plan` is supportive because it shows agreement and confidence in the idea.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5,
+      "finishTime": 8.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
new file mode 100644
index 0000000000..8a89f9d9e9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
@@ -0,0 +1,108 @@
+---
+id: 6762e2adb437563844364cf1
+title: Task 120
+challengeType: 19
+dashedName: task-120
+---
+
+<!-- (audio) Maria: That sounds like a solid plan. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Maria's opinion about Jake's plan?
+
+## --answers--
+
+She thinks it is a good idea.
+
+---
+
+She thinks it is risky and might not minimize the problem.
+
+### --feedback--
+
+Maria does not mention any doubts or risks. Listen to how she uses the word `solid` to show support.
+
+---
+
+She thinks it needs more details to be effective.
+
+### --feedback--
+
+Maria does not suggest adding details. Her response shows confidence in the plan as it is.
+
+---
+
+She thinks it will require additional resources to work.
+
+### --feedback--
+
+Maria's response does not mention resources. She expresses agreement and support for Jake's plan.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Solid` means strong, reliable, and effective. It suggests that the plan is well thought out and likely to succeed.
+
+`Plan` refers to an organized strategy to solve a problem.
+
+`That sounds like a solid plan` shows support and confidence in Jake's idea. For example:
+
+`That sounds like a solid plan to improve security.` - This shows agreement and belief that the idea is dependable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.96,
+      "finishTimestamp": 22.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.46,
+      "dialogue": {
+        "text": "That sounds like a solid plan.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 2.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
new file mode 100644
index 0000000000..a92c835f0b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
@@ -0,0 +1,104 @@
+---
+id: 6762e430c7646a422c17966f
+title: Task 121
+challengeType: 22
+dashedName: task-121
+---
+
+<!-- (audio) Maria: Are we going to require additional training for our developers? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are we going to BLANK BLANK BLANK for our developers?`
+
+## --blanks--
+
+`require`
+
+### --feedback--
+
+This verb means something is needed or necessary.
+
+---
+
+`additional`
+
+### --feedback--
+
+This word means extra or more. It is used to describe something that is added to what already exists.
+
+---
+
+`training`
+
+### --feedback--
+
+This word refers to the process of teaching or learning skills needed for a job or task.
+
+# --explanation--
+
+`Require` means to need or make something necessary. For example:
+
+`The job requires technical knowledge.` - This means technical knowledge is needed for the job.
+
+`Additional` means extra or more than what already exists. For example:
+
+`The project requires additional resources.` - This means extra resources are needed.
+
+`Training` refers to the process of learning or improving skills for a specific purpose. For example:
+
+`The company provided training for the new software.` - This means the company helped employees learn how to use the software.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.62,
+      "finishTimestamp": 25.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "Are we going to require additional training for our developers?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
new file mode 100644
index 0000000000..478b3fc00f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
@@ -0,0 +1,108 @@
+---
+id: 6762edd89388ad7b3950d01a
+title: Task 122
+challengeType: 19
+dashedName: task-122
+---
+
+<!-- (Audio) Maria: Are we going to require additional training for our developers? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If training is already complete.
+
+### --feedback--
+
+Maria is asking about something that might happen in the future, not the past.
+
+---
+
+If additional training will be required.
+
+---
+
+If training sessions are planned for managers.
+
+### --feedback--
+
+Maria's question is about developers, not managers.
+
+---
+
+If training will happen next week.
+
+### --feedback--
+
+Maria's question does not mention any specific time.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the parts of Maria's question:
+
+`Are we going to` indicates she is asking about a plan or action in the future.
+
+`Require additional training` means she is asking if more training is needed.
+
+`For our developers` specifies who might need the training.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.62,
+      "finishTimestamp": 25.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "Are we going to require additional training for our developers?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
new file mode 100644
index 0000000000..66c38ed008
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
@@ -0,0 +1,101 @@
+---
+id: 6762f11f6a96d19057229bf2
+title: Task 123
+challengeType: 22
+dashedName: task-123
+---
+
+<!-- (Audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we're BLANK BLANK a session next week to ensure everyone knows how to implement these changes.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned action in the future. The first word is a verb ending in `-ing`, and the second is a preposition.
+
+---
+
+`hold`
+
+### --feedback--
+
+This means to organize or conduct an event, like a meeting or session.
+
+# --explanation--
+
+`Going to` indicates a future plan or intention. It is often used to talk about actions that are already decided or likely to happen.
+
+`Hold` refers to organizing or conducting an event, like a meeting, session, or training. For example:
+
+- `We're going to organize a team meeting next Monday.` - This shows a planned action in the near future.
+
+- `They are going to hold a workshop on software updates.` - This highlights a scheduled event for sharing knowledge or training.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
new file mode 100644
index 0000000000..7619da2910
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
@@ -0,0 +1,113 @@
+---
+id: 676320cd1c9cee55ab53687a
+title: Task 124
+challengeType: 19
+dashedName: task-124
+---
+
+<!-- (audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is the next session going to happen?
+
+## --answers--
+
+This week
+
+### --feedback--
+
+Listen carefully to the audio. Jake does not say the session will happen during the current week.
+
+---
+
+Last week
+
+### --feedback--
+
+Jake is talking about a future session, not one that has already happened.
+
+---
+
+In a couple of weeks
+
+### --feedback--
+
+Jake mentions a specific time, not two weeks from now.
+
+---
+
+Next week
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, pay attention to the words that come after `hold a session`. Jake says, `next week`, which tells you the session will happen in the week after this one.
+
+`Next week` means the week following the current one. For instance, if today is Tuesday, `next week` starts on the following Sunday or Monday.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
new file mode 100644
index 0000000000..48cf723159
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
@@ -0,0 +1,113 @@
+---
+id: 676321f8a8692b5d4b211dde
+title: Task 125
+challengeType: 19
+dashedName: task-125
+---
+
+<!-- (audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why are they holding this meeting?
+
+## --answers--
+
+To make sure everyone understands how to apply the changes.
+
+---
+
+To discuss new changes they might make.
+
+### --feedback--
+
+Jake does not say they are planning changes, but how to implement the current ones.
+
+---
+
+To share updates about the company.
+
+### --feedback--
+
+The meeting is not about general updates but about specific changes.
+
+---
+
+To ensure everyone finishes their work on time.
+
+### --feedback--
+
+Jake does not mention deadlines or completing work in the audio.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To answer this question, focus on Jake's purpose for the session. He says, `to ensure everyone knows how to implement these changes`.
+
+The options "To make sure everyone understands how to apply the changes", matches the purpose described in the audio.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
new file mode 100644
index 0000000000..05591d1d24
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
@@ -0,0 +1,110 @@
+---
+id: 67632267336dcf6068f39407
+title: Task 126
+challengeType: 19
+dashedName: task-126
+---
+
+<!-- (audio) Jake: It's crucial that we all follow best practices. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's important to Jake?
+
+## --answers--
+
+That everyone works hard.
+
+### --feedback--
+
+Jake does not talk about working hard in the audio.
+
+---
+
+That everyone follows best practices.
+
+---
+
+That everyone follows their own rules.
+
+### --feedback--
+
+Jake does not say anything about following personal rules.
+
+---
+
+That everyone communicates well.
+
+### --feedback--
+
+Jake does not mention communication as important.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, break down the key words in the audio:
+
+`Crucial` means very important. Jake is talking about something that must be done.
+
+`Follow` means to do or obey something.
+
+`Best practices` refers to the best and most effective ways to do something.
+
+Jake says, `It's crucial that we all follow best practices`. This shows that he thinks it is very important for everyone to use the best methods when working.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.94,
+      "finishTimestamp": 33.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "It's crucial that we all follow best practices.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
new file mode 100644
index 0000000000..39ef7348e1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
@@ -0,0 +1,92 @@
+---
+id: 6763238e902cdf688f49152f
+title: Task 127
+challengeType: 22
+dashedName: task-127
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'm BLANK BLANK the team about the upcoming training.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together show that Maria is talking about something planned in the future. The first word is a verb ending in `-ing`, and the second is a preposition.
+
+---
+
+`inform`
+
+### --feedback--
+
+This word means to give information or tell someone about something.
+
+# --explanation--
+
+`Going to` shows that Maria is talking about something planned or decided for the future. For example:
+
+`I'm going to visit the headquarters tomorrow.` - it means the visit is planned.
+
+`Inform` means to give information or notify someone. For example:
+
+`He will inform his team leader about the issue.` - It means he will tell the team leader about the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
new file mode 100644
index 0000000000..018ccabf15
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
@@ -0,0 +1,116 @@
+---
+id: 6763251d0b7d8872b5543df8
+title: Task 128
+challengeType: 19
+dashedName: task-128
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Maria planning to do?
+
+## --answers--
+
+To attend a training session.
+
+### --feedback--
+
+Maria does not say she will attend the training.
+
+---
+
+To organize the training for the team.
+
+### --feedback--
+
+Maria does not mention organizing the training.
+
+---
+
+To inform the team about the upcoming training.
+
+---
+
+To ask the team about their training needs.
+
+### --feedback--
+
+Maria does not say anything about asking the team questions. She is going to provide information.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on Maria's words in the audio:
+
+`I'm going to` shows her plan for the future.
+
+`Inform the team` tell us what Maria is planning to do.
+
+Maria's exact plan is to inform the team about something specific.
+
+`Upcoming` means something that will happen soon. For example:
+
+`We have an upcoming meeting next week.` - This means the meeting is scheduled for the near future.
+
+`Upcoming training` means a training session that is planned to take place soon.
+
+Together, the phrase shows Maria's responsibility to give information about the training that will happen in the near future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
new file mode 100644
index 0000000000..c96250b419
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
@@ -0,0 +1,88 @@
+---
+id: 676325dfad1ee0784c7f1a5e
+title: Task 129
+challengeType: 19
+dashedName: task-129
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Maria wants to confirm if she needs to do more things. Which option is the best?
+
+## --answers--
+
+`Is there anything else we need to do?`
+
+---
+
+`Should I inform them now or later?`
+
+### --feedback--
+
+This question focuses on timing, not whether more tasks are required.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The best option is `Is there anything else we need to do?` because it directly asks about whether there are more tasks to complete.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
new file mode 100644
index 0000000000..1184550212
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
@@ -0,0 +1,121 @@
+---
+id: 6763271c3d195780a672e061
+title: Task 130
+challengeType: 19
+dashedName: task-130
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. Is there anything else we need to do? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+When the training will happen.
+
+### --feedback--
+
+Maria is not asking about the time of the training.
+
+---
+
+Who needs to be informed about the training.
+
+### --feedback--
+
+Maria is not asking about who should be informed.
+
+---
+
+How to organize the training.
+
+### --feedback--
+
+Maria is not asking about how to organize the training.
+
+---
+
+If there are more tasks to complete.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Anything` means any item, task, or thing.
+
+`Else` means in addition to what has already been mentioned.
+
+Together, `anything else` means "any other things". For example:
+
+- `Do you need anything else before I leave?` - This asks if the person needs more help or items.
+
+- `Is there anything else on the agenda?` - This asks if there are more topics to discuss.
+
+Maria says, `Is there anything else we need to do?` This shows she wants to know if there are more tasks she needs to do beyond informing the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 38.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3.8,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Is there anything else we need to do?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
new file mode 100644
index 0000000000..330c8abfcb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
@@ -0,0 +1,92 @@
+---
+id: 6763285df9a9b6039696c389
+title: Task 131
+challengeType: 22
+dashedName: task-131
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're going to BLANK the database activity more BLANK.`
+
+## --blanks--
+
+`monitor`
+
+### --feedback--
+
+This word means to watch or check something carefully.
+
+---
+
+`closely`
+
+### --feedback--
+
+This word means in a careful or detailed way.
+
+# --explanation--
+
+The verb `monitor` means to watch or check something, especially in a business or technical setting. For example:
+
+`Managers monitor employee productivity to meet project deadlines.` - This means they check progress regularly to make sure work is on track.
+
+`Closely` means to do something in a careful or detailed way. For example:
+
+`The team is reviewing the security logs closely for any unusual activity.` - This means they are looking carefully at the logs for problems.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 41.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.72,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
new file mode 100644
index 0000000000..24b821538d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
@@ -0,0 +1,110 @@
+---
+id: 67632a419a12aa10b1e76954
+title: Task 132
+challengeType: 19
+dashedName: task-132
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is going to be monitored?
+
+## --answers--
+
+The database activity
+
+---
+
+The server performance
+
+### --feedback--
+
+Jake does not mention monitoring the server performance.
+
+---
+
+The team's tasks
+
+### --feedback--
+
+Jake does not talk about monitoring the team's tasks.
+
+---
+
+The system logs
+
+### --feedback--
+
+Jake does not say anything about monitoring system logs.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Database` refers to a system where data is stored and organized.
+
+`Activity` refers to the actions or processes happening in the database.
+
+- `The database contains customer information and order details.` - This means the database stores important business data.
+
+- `There was unusual activity in the database last night.` - This means something unexpected happened in the database.
+
+Together, `database activity` means all the actions, changes, or processes happening within the database system.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.02,
+      "finishTimestamp": 41.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.82,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
new file mode 100644
index 0000000000..370fdcce77
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
@@ -0,0 +1,100 @@
+---
+id: 67632cefda53f021ab6ecfb4
+title: Task 133
+challengeType: 22
+dashedName: task-133
+---
+
+<!-- (audio) This will help us catch any suspicious patterns early. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`This will BLANK BLANK BLANK any suspicious patterns early.`
+
+## --blanks--
+
+`help`
+
+### --feedback--
+
+This word means to assist or make something easier.
+
+---
+
+`us`
+
+### --feedback--
+
+This word refers to the group or team being talked about.
+
+---
+
+`catch`
+
+### --feedback--
+
+This word means to find or notice something.
+
+# --explanation--
+
+`Help` means to make it easier to do something or to provide assistance.
+
+`Catch` means to find, notice, or identify something. For example:
+
+`The system is designed to catch errors in real-time.` - This means the system finds mistakes as they happen.
+
+`Help us catch` means to assist in identifying something.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.96,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
new file mode 100644
index 0000000000..00d7873654
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
@@ -0,0 +1,119 @@
+---
+id: 67632e1b477101295cf2fc77
+title: Task 134
+challengeType: 19
+dashedName: task-134
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why is Jake planning to monitor the database activity more closely?
+
+## --answers--
+
+To catch suspicious patterns early.
+
+---
+
+To improve the database structure.
+
+### --feedback--
+
+Jake does not mention improving the database structure.
+
+---
+
+To monitor the team's productivity.
+
+### --feedback--
+
+Jake is talking about monitoring database activity, not the team.
+
+---
+
+To track system performance over time.
+
+### --feedback--
+
+Jake does not mention tracking system performance over time.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jake says, `This will help us catch any suspicious patterns early.` Let's break down what he means.
+
+`Help us catch` means to make it easier for the team to find or notice something.
+
+`Suspicious patterns` refers to activities or changes in the database that seem unusual or could signal potential problems, such as unauthorized access or errors in the data.
+
+`Early` means finding these patterns as soon as possible, before they can cause significant harm.
+
+Together, Jake's statement means that by monitoring the database closely, the team can quickly find and fix any unusual activity before it becomes a bigger issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.84,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
new file mode 100644
index 0000000000..05aaa1bfaf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
@@ -0,0 +1,99 @@
+---
+id: 67632f1219de712fcf37d295
+title: Task 135
+challengeType: 19
+dashedName: task-135
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Maria thinks Jake's plan is important and useful. Which option better reflects that?
+
+## --answers--
+
+`Do you really think this will work?`
+
+### --feedback--
+
+This question shows doubt, not agreement with Jake's plan.
+
+---
+
+`I think this is going to make a big difference in our security.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`I think this is going to make a big difference in our security.` shows that Maria agrees with Jake's plan and thinks it is valuable.
+
+`Do you really think this will work?` shows doubt.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.84,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
new file mode 100644
index 0000000000..d02747ff4c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
@@ -0,0 +1,108 @@
+---
+id: 67633077c55c0f38b9166323
+title: Task 136
+challengeType: 22
+dashedName: task-136
+---
+
+<!-- (audio) Maria: Great. I think this is going to make a big difference in our security. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Great. I think this is going to BLANK BLANK BLANK BLANK in our security.`
+
+## --blanks--
+
+`make`
+
+### --feedback--
+
+This word means to create or cause something to happen.
+
+---
+
+`a`
+
+### --feedback--
+
+This is an article used before singular nouns.
+
+---
+
+`big`
+
+### --feedback--
+
+This word means large or significant.
+
+---
+
+`difference`
+
+### --feedback--
+
+This word means a change or effect on something.
+
+# --explanation--
+
+`Make` means to cause something to happen or exist.
+
+`A big difference` means a significant or noticeable change or improvement.
+
+Together, `make a big difference` means to cause something to improve or become better in an important way. For example:
+
+`Updating our software will make a big difference in system performance.` - This means the update will improve how the system works.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.58,
+      "finishTimestamp": 48.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.76,
+      "dialogue": {
+        "text": "Great. I think this is going to make a big difference in our security.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
new file mode 100644
index 0000000000..7352992b2d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
@@ -0,0 +1,102 @@
+---
+id: 6763322b77048c43b92f9c28
+title: Task 137
+challengeType: 19
+dashedName: task-137
+---
+
+<!-- (audio) Maria: Great. I think this is going to make a big difference in our security. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does Maria think the changes will have an impact on security?
+
+## --answers--
+
+The changes already improved security.
+
+### --feedback--
+
+Maria does not say the changes have already happened. She is talking about the future.
+
+---
+
+The changes are currently improving security.
+
+### --feedback--
+
+Maria is not referring to something happening now. She is talking about what will happen later.
+
+---
+
+The changes might improve security someday.
+
+### --feedback--
+
+Maria is confident about the changes making an impact, not uncertain.
+
+---
+
+The changes will improve security in the future.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Maria says, `I think this is going to make a big difference in our security.` The phrase `is going to` shows that Maria is talking about the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.58,
+      "finishTimestamp": 48.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.76,
+      "dialogue": {
+        "text": "Great. I think this is going to make a big difference in our security.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
new file mode 100644
index 0000000000..45580e5d90
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
@@ -0,0 +1,98 @@
+---
+id: 67633424bfc56f4fec3edf3c
+title: Task 138
+challengeType: 22
+dashedName: task-138
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are we going to BLANK BLANK BLANK with other departments?`
+
+## --blanks--
+
+`share`
+
+### --feedback--
+
+This is a verb that means to give something to others or use it together.
+
+---
+
+`this`
+
+### --feedback--
+
+This is a demonstrative pronoun that refers to something specific being talked about.
+
+---
+
+`information`
+
+### --feedback--
+
+This is a noun that means knowledge or facts that are communicated.
+
+# --explanation--
+
+`Share` means to give something to others or to use it together.
+
+`This` is a demonstrative pronoun that refers to something specific, in this case, the information.
+
+`Information` refers to knowledge, data, or facts that are communicated.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
new file mode 100644
index 0000000000..64366032e9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
@@ -0,0 +1,108 @@
+---
+id: 676335dbbbe14c5acdafc970
+title: Task 139
+challengeType: 19
+dashedName: task-139
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If the information will be shared with other departments.
+
+---
+
+If the departments need more information.
+
+### --feedback--
+
+Maria does not mention needing more information in her question.
+
+---
+
+When the information will be shared.
+
+### --feedback--
+
+Maria does not ask about the timing of sharing the information.
+
+---
+
+Why the information is important.
+
+### --feedback--
+
+Maria is not asking about the importance of the information.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the verb `share`. It means to give or make something available to others. Maria is asking if the information will be shared.
+
+`Other departments` tells you who might receive the information. Maria's question is specifically about these departments.
+
+The structure `Are we going to...` shows that Maria is asking about a plan for the future.
+
+By identifying these parts of the sentence, you can understand that Maria is asking whether the information will be shared with other departments.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
new file mode 100644
index 0000000000..6d267335bc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
@@ -0,0 +1,89 @@
+---
+id: 676338a796ace16be009e9d6
+title: Task 140
+challengeType: 19
+dashedName: task-140
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Jake is still deciding what to do. What's the most appropriate answer to Maria's question?
+
+## --answers--
+
+`We'll probably do that after we've completed the training.`
+
+---
+
+`I think sharing this information is unnecessary.`
+
+### --feedback--
+
+This response contradicts the idea of considering sharing information.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The correct answer is `We'll probably do that after we've completed the training.` This response is appropriate because it aligns with Maria's question while emphasizing the need to complete the training first.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
new file mode 100644
index 0000000000..0d67d478c4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
@@ -0,0 +1,98 @@
+---
+id: 676339b7a8460f7302b2d966
+title: Task 141
+challengeType: 22
+dashedName: task-141
+---
+
+<!-- (audio) Jake: We'll probably do that after we've completed the training. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably BLANK BLANK BLANK we've completed the training.`
+
+## --blanks--
+
+`do`
+
+### --feedback--
+
+This is a verb that means to perform or carry out an action.
+
+---
+
+`that`
+
+### --feedback--
+
+This is a demonstrative pronoun referring to something already mentioned.
+
+---
+
+`after`
+
+### --feedback--
+
+This is a conjunction that shows the sequence of events.
+
+# --explanation--
+
+`Do` means to perform or carry out an action.
+
+`That` is a demonstrative pronoun that refers to something already mentioned or understood. In this case, it refers to an action previously discussed.
+
+`After` is a conjunction that indicates the sequence of events.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
new file mode 100644
index 0000000000..feafb7ba43
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
@@ -0,0 +1,136 @@
+---
+id: 67633a6ff2f2ef78701975c9
+title: Task 142
+challengeType: 19
+dashedName: task-142
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? Jake: We'll probably do that after we've completed the training. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is Jake planning to share the information with other departments?
+
+## --answers--
+
+Before they start the training.
+
+### --feedback--
+
+Jake mentions sharing the information after the training, not before.
+
+---
+
+After they've completed the training.
+
+---
+
+While the training is happening.
+
+### --feedback--
+
+Jake does not say they will share the information during the training.
+
+---
+
+He is not planning to share the information.
+
+### --feedback--
+
+Jake does mention sharing the information but plans to do so after the training.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`After we've completed` indicates that Jake is planning to share the information once the training is finished. Let's break it down:
+
+`After` shows the sequence of events, meaning the information will be shared following the training.
+
+`Completed the training` means finishing the training sessions or program.
+
+Together, this means Jake's plan is to share the information only once the training is fully done.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.47
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 3.47
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.86,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
new file mode 100644
index 0000000000..46676e6f22
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
@@ -0,0 +1,92 @@
+---
+id: 67633b012085337c52b93096
+title: Task 143
+challengeType: 22
+dashedName: task-143
+---
+
+<!-- (audio) Jake: It's better to ensure our team is fully prepared first. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's better to ensure our team is BLANK BLANK first.`
+
+## --blanks--
+
+`fully`
+
+### --feedback--
+
+This is an adverb meaning completely or entirely.
+
+---
+
+`prepared`
+
+### --feedback--
+
+This is an adjective meaning ready or equipped to do something.
+
+# --explanation--
+
+`Fully` means completely or entirely. It shows that no part of the task or readiness is incomplete. For example:
+
+`The project was fully reviewed before the deadline.` - This means the review was completed entirely.
+
+`Prepared` means ready or equipped to do something. For example:
+
+`The team is prepared to present their findings.` - This means the team is ready to give the presentation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 53.6,
+      "finishTimestamp": 56.44
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.84,
+      "dialogue": {
+        "text": "It's better to ensure our team is fully prepared first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
new file mode 100644
index 0000000000..11dbacc17f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
@@ -0,0 +1,111 @@
+---
+id: 67633b85c9f913803fd8591c
+title: Task 144
+challengeType: 19
+dashedName: task-144
+---
+
+<!-- (audio) Jake: We'll probably do that after we've completed the training. It's better to ensure our team is fully prepared first. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why doesn't Jake want to inform other departments before the training?
+
+## --answers--
+
+Because the team is already prepared.
+
+### --feedback--
+
+Jake does not say the team is already prepared. He talks about the need to prepare them first.
+
+---
+
+Because the other departments don't need the information.
+
+### --feedback--
+
+Jake does not mention that the other departments don't need the information.
+
+---
+
+Because the team needs to be fully prepared first.
+
+---
+
+Because the training is not important.
+
+### --feedback--
+
+Jake does not imply that the training is unimportant. In fact, he emphasizes its importance.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Fully prepared` means completely ready. Jake wants the team to be ready before sharing the information.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 56.44
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "It's better to ensure our team is fully prepared first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
new file mode 100644
index 0000000000..94d9f6467b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
@@ -0,0 +1,97 @@
+---
+id: 67633d331eeb858a9803794f
+title: Task 145
+challengeType: 22
+dashedName: task-145
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`going to hold`, `going to need`, `monitor`, `do that after`, `require`, `implement`, and `are you going to`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: I've been looking into our database security, and I think we're BLANK some additional measures to prevent SQL injection attacks.`
+
+`Maria: I agree. We've been noticing some unusual queries in the logs. What BLANK recommend to improve security?`
+
+`Jake: We're going to BLANK parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data.`
+
+`Maria: That sounds like a solid plan. Are we going to BLANK additional training for our developers?`
+
+`Jake: Yes, we're BLANK a session next week to ensure everyone knows how to implement these changes. It's crucial that we all follow best practices.`
+
+`Maria: I'm going to inform the team about the upcoming training. Is there anything else we need to do?`
+
+`Jake: We're going to BLANK the database activity more closely. This will help us catch any suspicious patterns early.`
+
+`Maria: Great. I think this is going to make a big difference in our security. Are we going to share this information with other departments?`
+
+`Jake: We'll probably BLANK we've completed the training. It's better to ensure our team is fully prepared first.`
+
+## --blanks--
+
+`going to need`
+
+### --feedback--
+
+This phrase uses the `Future Simple` tense and indicates something necessary in the future.
+
+---
+
+`are you going to`
+
+### --feedback--
+
+This question uses the `Future Simple` tense to ask about plans or intentions.
+
+---
+
+`implement`
+
+### --feedback--
+
+This verb means to put something into practice or carry out a plan.
+
+---
+
+`require`
+
+### --feedback--
+
+This verb means to need or make something necessary.
+
+---
+
+`going to hold`
+
+### --feedback--
+
+This phrase uses the `Future Simple` tense to talk about scheduling or planning an event.
+
+---
+
+`monitor`
+
+### --feedback--
+
+This verb means to watch or check something carefully.
+
+---
+
+`do that after`
+
+### --feedback--
+
+This phrase combines a verb and a preposition to indicate completing one action following another.
+
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
new file mode 100644
index 0000000000..421bf93f13
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
@@ -0,0 +1,72 @@
+---
+id: 67634107b478caa17f37c628
+title: Task 146
+challengeType: 19
+dashedName: task-146
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What is the purpose of the training mentioned in the text?
+
+## --answers--
+
+To improve the team's skills and reduce security risks.
+
+---
+
+To teach the team about project deadlines.
+
+### --feedback--
+
+The text does not mention anything about project deadlines.
+
+---
+
+To explain how to share updates with other departments.
+
+### --feedback--
+
+Sharing updates is mentioned at the end of the training but is not the main purpose of the training.
+
+---
+
+To monitor every department's activity.
+
+### --feedback--
+
+The text focuses on monitoring database activity, not department activity.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The purpose of the training is to improve the team's skills and reduce security risks. Let's break it down:
+
+The text begins with, `To protect our databases from threats like SQL injection attacks`. The preposition `to` introduces the purpose of the entire training. It shows that the main goal is to protect the database from threats.
+
+The next part, `we are going to focus on improving the team's skills`, explains how this purpose will be achieved. By improving their skills, the team will learn methods to address these threats effectively.
+
+The training is described as teaching developers `how to use parameterized queries and follow best practices`. These specific actions connect directly to reducing security risks, which ties back to the purpose stated at the beginning.
+
+By following this structure, you can conclude that the training is focused on improving skills to protect the database, making this the primary purpose of the session.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
new file mode 100644
index 0000000000..2ed677a913
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
@@ -0,0 +1,64 @@
+---
+id: 67634294671bb8ac40e2cc85
+title: Task 147
+challengeType: 19
+dashedName: task-147
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What actions are planned to reduce the risk of SQL injection attacks?
+
+## --answers--
+
+Running full system scans for hidden malware.
+
+### --feedback--
+
+The text does not mention running system scans to prevent SQL injection attacks.
+
+---
+
+Improving database structure with advanced tools.
+
+### --feedback--
+
+The text does not discuss changing the database structure as a preventive measure.
+
+---
+
+Teaching developers to use parameterized queries and follow best practices.
+
+---
+
+Monitoring network activity instead of database activity.
+
+### --feedback--
+
+The text emphasizes monitoring database activity, not network activity.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` These two actions are specifically mentioned as ways to reduce the risk of SQL injection attacks. 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
new file mode 100644
index 0000000000..2edbd8fa0a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
@@ -0,0 +1,64 @@
+---
+id: 676342de292eafae91acee29
+title: Task 148
+challengeType: 19
+dashedName: task-148
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+Who is going to participate in the training?
+
+## --answers--
+
+The project managers
+
+### --feedback--
+
+The text does not mention project managers as participants in the training.
+
+---
+
+The developers
+
+---
+
+The IT support team
+
+### --feedback--
+
+The IT support team is not mentioned as part of the training.
+
+---
+
+The clients
+
+### --feedback--
+
+The text does not mention clients participating in the training.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` This shows that developers are the ones participating in the training.  
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
new file mode 100644
index 0000000000..b2fdce00f2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
@@ -0,0 +1,64 @@
+---
+id: 6763432a8c2ae1b0de0e1fc0
+title: Task 149
+challengeType: 19
+dashedName: task-149
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What will the training teach the team?
+
+## --answers--
+
+How to improve database performance.
+
+### --feedback--
+
+The text does not mention improving database performance as part of the training.
+
+---
+
+How to design new database structures.
+
+### --feedback--
+
+The training does not focus on creating new database structures.
+
+---
+
+How to secure network communications.
+
+### --feedback--
+
+The training focuses on database security, not network communications.
+
+---
+
+How to use parameterized queries and follow best practices.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` These are the two specific skills that the training will focus on. 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
index be23a7e272..87ec323ff2 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`BLANK received any detailed reports from users about this issue?`
+`BLANK any detailed reports from users about this issue?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
index b1682fdb15..b0bcc66654 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-111
 ---
 
-<!-- (audio) Linda: That’s true! You've been integrating UX into your work more than ever before. -->
+<!-- (audio) Linda: That's true! You've been integrating UX into your work more than ever before. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
index ce180fe911..f51c60f446 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-112
 ---
 
-<!-- (audio) Linda: That’s true! You've been integrating UX into your work more than ever before. -->
+<!-- (audio) Linda: That's true! You've been integrating UX into your work more than ever before. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
index 949d86af71..d4b8bda063 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-123
 ---
 
-<!-- (audio) James: I’m happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
+<!-- (audio) James: I'm happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
index 027f1acbbf..4acd87ae3e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-125
 ---
 
-<!-- (audio) James: I’m happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
+<!-- (audio) James: I'm happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
index 6b57edd965..305ba737ce 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
@@ -17,7 +17,7 @@ Read the text and answer the question below.
 
 Linda posted an update about her team's development process:
 
-`Over the past year, we've been focusing on user feedback more than ever, and it's really changed our approach to development. Instead of just tackling technical issues, we're now looking at everything from the user’s perspective.`
+`Over the past year, we've been focusing on user feedback more than ever, and it's really changed our approach to development. Instead of just tackling technical issues, we're now looking at everything from the user's perspective.`
 
 `Last month, we rolled out a major update inspired by user feedback, and the response has been amazing. Now, rather than just reacting to issues, we're proactively making improvements based on what our users tell us.`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
index 960d88b2e2..436a8c1fe7 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
@@ -1,8 +1,8 @@
 ---
 id: 66609a1199ddd03548c45423
-title: "Dialogue 1: I'm Tom"
+title: "Dialogue 1: A Debugging Session Recap"
 challengeType: 21
-dashedName: dialogue-1-im-tom
+dashedName: dialogue-1-a-debugging-session-recap
 ---
 
 # --description--
@@ -17,42 +17,198 @@ dashedName: dialogue-1-im-tom
 
 ```json
 {
-  "setup": {
-    "background": "chaos.png",
-    "characters": [
-      {
-        "character": "David",
-        "position": {"x":50,"y":80,"z":8},
-        "opacity": 0
-      }
-    ],
-    "audio": {
-      "filename": "1.1-1.mp3",
-      "startTime": 1,
-      "startTimestamp": 5.7,
-      "finishTimestamp": 6.48
-    }
-  },
-  "commands": [
-    {
-      "character": "David",
-      "opacity": 1,
-      "startTime": 0
-    },
-    {
-      "character": "David",
-      "startTime": 1,
-      "finishTime": 0.78,
-      "dialogue": {
-        "text": "I'm Tom.",
-        "align": "center"
-      }
-    },
-    {
-      "character": "Tom",
-      "opacity": 0,
-      "startTime": 1.28
-    }
-  ]
+ "setup": {
+   "background": "interview-room3.png",
+   "characters": [
+     {
+       "character": "Lisa",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "James",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_2-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Lisa",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "James",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Lisa",
+     "startTime": 1,
+     "finishTime": 4.04,
+     "dialogue": {
+       "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 4.46,
+     "finishTime": 9.52,
+     "dialogue": {
+       "text": "Yes, I did. It was quite a hunt. First, I checked the recent changes we made to the code.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 9.86,
+     "finishTime": 10.86,
+     "dialogue": {
+       "text": "What did you find there?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 11.14,
+     "finishTime": 14.86,
+     "dialogue": {
+       "text": "Nothing at first. Then I reviewed the error logs more carefully.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 15.24,
+     "finishTime": 17.12,
+     "dialogue": {
+       "text": "That's when I noticed something odd.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 17.42,
+     "finishTime": 17.96,
+     "dialogue": {
+       "text": "What was it?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 18.3,
+     "finishTime": 20.78,
+     "dialogue": {
+       "text": "The system wasn't connecting to the database properly.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 21.16,
+     "finishTime": 26.36,
+     "dialogue": {
+       "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 26.86,
+     "finishTime": 29.48,
+     "dialogue": {
+       "text": "Ah, so the credentials were the issue. Did you fix them?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 29.48,
+     "finishTime": 33.78,
+     "dialogue": {
+       "text": "Yes, I updated the credentials and the connection was finally successful.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 34.1,
+     "finishTime": 35.58,
+     "dialogue": {
+       "text": "The app started working again.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 35.96,
+     "finishTime": 37.94,
+     "dialogue": {
+       "text": "Great job. Wasn't it stressful though?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 38.38,
+     "finishTime": 42.66,
+     "dialogue": {
+       "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 43.22,
+     "finishTime": 45.58,
+     "dialogue": {
+       "text": "Absolutely. Thanks for handling it, James.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 46.12,
+     "finishTime": 47.82,
+     "dialogue": {
+       "text": "Did anything else come up while you were debugging?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 48.3,
+     "finishTime": 52.6,
+     "dialogue": {
+       "text": "Not really. Everything else was running smoothly once the database issue was fixed.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 53.12,
+     "finishTime": 57,
+     "dialogue": {
+       "text": "Perfect. Let's make sure we double check credentials after security updates in the future.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.5
+   },
+   {
+     "character": "Lisa",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 58
+   }
+ ]
 }
 ```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
new file mode 100644
index 0000000000..e6326dbc47
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
@@ -0,0 +1,106 @@
+---
+id: 6704f438e6e9120d5a1274c6
+title: Task 1
+challengeType: 19
+dashedName: task-1
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does the word `bug` mean in Lisa's question?
+
+## --answers--
+
+A small insect
+
+### --feedback--
+
+In the context of programming, a `bug` refers to an issue, not an insect.
+
+---
+
+A piece of hardware
+
+### --feedback--
+
+A `bug` refers to a software issue, not a physical component.
+
+---
+
+An error or flaw in the code
+
+---
+
+A new feature in the software
+
+### --feedback--
+
+A `bug` is not a feature; it's an unintended issue that needs to be fixed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+A `bug` is an error, flaw, or fault in a computer program that causes it to produce incorrect or unexpected results. For example:
+
+- `I found a bug in the code.` - You discovered an error in the code.
+
+- `I am fixing a bug.` - You are working on solving a problem in the code.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
new file mode 100644
index 0000000000..1ec4342486
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
@@ -0,0 +1,92 @@
+---
+id: 6704fbd43885300e4aa221e9
+title: Task 2
+challengeType: 22
+dashedName: task-2
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey, James. BLANK you BLANK that bug we were stuck on yesterday?`
+
+## --blanks--
+
+`Did`
+
+### --feedback--
+
+This word is used to form a question in the past tense. It's placed before the subject (`you`). Don't forget to capitalize it.
+
+---
+
+`find`
+
+### --feedback--
+
+This word means to locate or discover something, in its base form after `did` in questions.
+
+# --explanation--
+
+The `Simple Past` structure for forming questions starts with `did` + subject + base form of the verb. You use `did` to show the action happened in the past, but keep the main verb (e.g., `find`) in its base form. For example:
+
+- `Did they finish the report on time?` - You want to know if the report was concluded before it was due.
+
+- `Did she call you yesterday?` - You want to know if the person received a call the day before.
+
+In Lisa's question, `did you find` is the question form to ask if James located or identified the `bug` they were working on the day before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
new file mode 100644
index 0000000000..81fe3a3153
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
@@ -0,0 +1,108 @@
+---
+id: 6704fd952ad2560e9a7ca070
+title: Task 3
+challengeType: 19
+dashedName: task-3
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does the expression `stuck on` mean in this sentence?
+
+## --answers--
+
+To continuously work on something without any issues.
+
+### --feedback--
+
+While `stuck on` involves working on something, it specifically refers to being unable to make progress.
+
+---
+
+To be unable to solve or make progress on something.
+
+---
+
+To quickly solve a problem.
+
+### --feedback--
+
+`Stuck on` does not mean solving a problem quickly. It refers to facing difficulties or being unable to progress.
+
+---
+
+To ignore a problem.
+
+### --feedback--
+
+`Stuck on` means trying to solve something but being unable to move forward, not ignoring it.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The expression `stuck on` is used when someone is unable to move forward with a task or solve a problem. It suggests being trapped or unable to progress. For example:
+
+- `We were stuck on this code error for hours.` - We could not proceed until that error in the code was found.
+
+- `She got stuck on the final question of the exam.` - She spent a long time on the final question.
+
+In the dialogue, Lisa uses `stuck on` to describe how they were unable to make progress in solving a bug in their work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
new file mode 100644
index 0000000000..f091e7300b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
@@ -0,0 +1,92 @@
+---
+id: 6705055b28e3c20fce27a15c
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey, James. Did you find that bug we were BLANK BLANK yesterday?`
+
+## --blanks--
+
+`stuck`
+
+### --feedback--
+
+This word means unable to move forward or solve a problem.
+
+---
+
+`on`
+
+### --feedback--
+
+This word shows the connection to the problem or task that was causing difficulty.
+
+# --explanation--
+
+The expression `stuck on` is used to describe a situation where someone is unable to make progress or solve an issue. It emphasizes being trapped or halted in a task. For example:
+
+- `I was stuck on that tricky math problem for hours.` - The problem made me waste a long time.
+
+- `We got stuck on deciding the best solution to the project's issues.` - We did not know the best solution and it took us a long time to find it.
+
+In this sentence, Lisa is referring to a bug they couldn't solve or fix the day before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
new file mode 100644
index 0000000000..4aade2cd2a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
@@ -0,0 +1,92 @@
+---
+id: 67050a8becee6d10619fa5ff
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? --> 
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could James tell Lisa that he found the bug using a very short answer to say it?
+
+## --answers--
+
+`Yes, I found it.`
+
+### --feedback--
+
+Short answers to questions that involve the `Simple Past` normally are `Yes,` + person + `did.` for affirmatives or `No,` + person + `didn't.` for negatives.
+
+---
+
+`Yes, I did.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When giving short answers to a question directed to you about something you did or did not do in the past, use `Yes, I did.` or `No, I didn't` to answer to them briefly. For example:
+
+- `Did you buy that car you wanted? No, I didn't.` - This means you did not buy the car.
+
+- `Did you pass the English test? Yes, I did` - This means you passed the test.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
new file mode 100644
index 0000000000..0cebfd16c3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
@@ -0,0 +1,84 @@
+---
+id: 67050fd29a37de112051064b
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) James: Yes, I did. It was quite a hunt. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I BLANK. It was quite a hunt.`
+
+## --blanks--
+
+`did`
+
+### --feedback--
+
+This word is used in short answers to confirm or emphasize an action in the past.
+
+# --explanation--
+
+Short answers in the `Simple Past` often use the auxiliary verb `did` to confirm or deny an action. This structure avoids repeating the full sentence while maintaining clarity. For example:
+
+Question: `Did you finish the project?` Short answer: `Yes, I did.`
+
+Question: `Did they call you back?` Short answer: `No, they didn't.`
+
+In the dialogue, James uses `Yes, I did` to confirm that he found the bug Lisa asked about.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.26,
+      "finishTimestamp": 5.34
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.08,
+      "dialogue": {
+        "text": "Yes, I did. It was quite a hunt.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
new file mode 100644
index 0000000000..c561e52141
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
@@ -0,0 +1,113 @@
+---
+id: 670515561e620a11f2d7308c
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+<!-- (Audio) James: Yes, I did. It was quite a hunt. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the meaning of `quite a hunt` in James's answer?
+
+## --answers--
+
+It means a fast and easy search for something.
+
+### --feedback--
+
+`Quite a hunt` suggests difficulty, not an easy search.
+
+---
+
+It refers to an actual hunting activity, like searching for animals.
+
+### --feedback--
+
+The word `hunt` is used figuratively here, meaning a search for something.
+
+---
+
+It refers to a challenging or difficult search for something.
+
+---
+
+It means the bug was already fixed without any effort.
+
+### --feedback--
+
+`Quite a hunt` emphasizes that finding the bug required significant effort.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In this context, the word `hunt` is used figuratively to describe a focused search for something difficult to find. For example:
+
+- `It was a real hunt to track down that missing file.` - Finding the missing file was difficult.
+
+- `Finding the right apartment in the city was quite a hunt.` - We looked everywhere until we found the right apartment for us in this city.
+
+The expression `quite a/an` + noun is used to emphasize something as impressive, intense, or remarkable. For example:
+
+- `That was quite a show!` - This sentence emphasizes how impressive the show was.
+- `She gave quite an explanation.` - This sentence emphasizes that the explanation was thorough or detailed.
+
+Here, `quite a hunt` highlights that the search for the bug was challenging, intense, and significant.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.26,
+      "finishTimestamp": 5.34
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.08,
+      "dialogue": {
+        "text": "Yes, I did. It was quite a hunt.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
new file mode 100644
index 0000000000..146f720231
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
@@ -0,0 +1,94 @@
+---
+id: 6705177d1d3dbb124955a397
+title: Task 8
+challengeType: 22
+dashedName: task-8
+---
+
+<!-- (Audio) James: First, I checked the recent changes we made to the code. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, I checked the BLANK changes we made to the code.`
+
+## --blanks--
+
+`First`
+
+### --feedback--
+
+This word is used to indicate the initial step or action in a sequence. As it is the first word in a sentence, do not forget to capitalize it.
+
+---
+
+`recent`
+
+### --feedback--
+
+This word describes something that happened or was made not long ago.
+
+# --explanation--
+
+In this sentence, `first` is used to show the initial action James took to debug the code. It indicates the start of a sequence of steps. Other examples of this usage include:
+
+- `First, we need to set up the database.` - This means setting up the database is the initial step.
+
+- `First, I turned on the computer.` - This means that before working on the computer, the initial thing I did was to turn it on.
+
+The word `recent` refers to something that happened or was made not long ago. It describes changes to the code that were made shortly before the bug was discovered. Another example:
+
+`The team discussed the most recent updates to the project.` - The updates that were talked about by the team were only the ones made in the last few days.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.5,
+      "finishTimestamp": 8.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.02,
+      "dialogue": {
+        "text": "First, I checked the recent changes we made to the code.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
new file mode 100644
index 0000000000..283565a56e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
@@ -0,0 +1,96 @@
+---
+id: 670518bd8ec6f012af235433
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) James: First, I checked the recent changes we made to the code. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`First, I BLANK the recent changes we BLANK to the code.`
+
+## --blanks--
+
+`checked`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `check`, formed by adding `-ed` to the base verb.
+
+---
+
+`made`
+
+### --feedback--
+
+This is the `Simple Past` form of the irregular verb `make`, which does not follow the regular `-ed` pattern.
+
+# --explanation--
+
+You use the `Simple Past` tense in affirmative sentences when you want to talk about completed actions at a moment in the past.
+
+In the `Simple Past`, regular verbs like `check` are formed by adding `-ed` to the base verb. Irregular verbs, such as `make`, have unique forms that do not follow this rule. In James's sentence:
+
+`Checked` is the past form of the regular verb `check`, indicating an action that was completed in the past. For example:
+
+`He checked his email before the meeting.` - He looked at the e-mails at a moment in the past prior to the meeting.
+
+`Made` is the past form of the irregular verb `make`, indicating something that was created or done in the past. For example:
+
+`She made a list of items to buy.` - She created a list of what she wanted to buy before going to the store.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.5,
+      "finishTimestamp": 8.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.02,
+      "dialogue": {
+        "text": "First, I checked the recent changes we made to the code.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
new file mode 100644
index 0000000000..6b3c747577
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
@@ -0,0 +1,114 @@
+---
+id: 67051b185149b6130426a9ad
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- (Audio) Lisa: What did you find there? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+Why James found the bug.
+
+### --feedback--
+
+Lisa's question focuses on what James discovered, not on the reason for that.
+
+---
+
+When James found the bug.
+
+### --feedback--
+
+Lisa's question is not related to time. It's about what James found.
+
+---
+
+How James fixed the bug.
+
+### --feedback--
+
+Lisa isn't asking about the method or solution. She's asking for the result of James's search.
+
+---
+
+What James discovered.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the `Simple Past`, questions may start with a question word (e.g., `what`, `where`, `how`, `who`) using the following structure:
+
+**Question word + `did` + subject + base verb.**
+
+Lisa's question, `What did you find there?`, uses `what` to ask for specific information about the result of James's actions. Other examples include:
+
+- `Where did you go yesterday?` - You are asking about a location.
+
+- `How did they solve the problem?` - You are asking about a method.
+
+- `Who did you call last night?` - You are asking about a person.
+
+In the dialog, Lisa is asking about James's discovery while searching for the bug.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.86,
+      "finishTimestamp": 9.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.1,
+      "dialogue": {
+        "text": "What did you find there?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
new file mode 100644
index 0000000000..9019a032fa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
@@ -0,0 +1,148 @@
+---
+id: 67053619dd65bd1459449bf0
+title: Task 11
+challengeType: 19
+dashedName: task-11
+---
+
+<!-- (Audio) Lisa: What did you find there? James: Nothing at first. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James discover initially?
+
+## --answers--
+
+He discovered nothing.
+
+---
+
+He discovered something.
+
+### --feedback--
+
+The expression James says doesn't say that he found something.
+
+---
+
+He found everything immediately.
+
+### --feedback--
+
+What James says contradicts the idea that he found everything.
+
+---
+
+He didn't look for anything.
+
+### --feedback--
+
+He was actually searching for something.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+James uses the word `nothing`, which indicates the absence of any discovery. For example:
+
+- `She found nothing unusual in the report.` -The report had the usual characteristics.
+
+- `We saw nothing strange during the test.` - It was a pretty common test.
+
+In contrast, in negative sentences, you'll use `anything` instead of `nothing`. For example:
+
+- Affirmative: `He found nothing.` - There were no discoveries.
+
+- Negative: `He didn't find anything.` - There were no discoveries.
+
+Notice that, in negative sentences and in questions with `did`, the main verb (in this case, `find`) is in its base form. The auxiliary verb `did` is what shows that this sentence is in the past tense. For example:
+
+- `They didn't find anything wrong with the program.` - Not finding anything was in the past.
+
+- `I didn't see anything unusual during the presentation.` - Nothing unusual was seen in the presentation that happened in the past.
+
+This structure helps avoid double negatives. James's answer, `Nothing at first`, reflects an affirmative sentence emphasizing that he couldn't find anything when he began his search.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.86,
+      "finishTimestamp": 11.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2,
+      "dialogue": {
+        "text": "What did you find there?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.14
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.14
+    },
+    {
+      "character": "James",
+      "startTime": 2.28,
+      "finishTime": 3.18,
+      "dialogue": {
+        "text": "Nothing at first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
new file mode 100644
index 0000000000..55fb293609
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
@@ -0,0 +1,92 @@
+---
+id: 670538f8565fb514ddf24b85
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK I reviewed the error logs more carefully.`
+
+## --blanks--
+
+`Then`
+
+### --feedback--
+
+This word is used to show the next step in a sequence of actions. It's in the beginning of the sentence, so don't forget to capitalize it.
+
+# --explanation--
+
+`Then` is used to indicate the next action in a sequence of events. It shows what happens after something else. For example:
+
+- `I turned on the computer, and then I opened my email.` - You only opened the email after turning on the computer.
+
+- `We fixed the bug, then we tested the application again.` - They only tested the application again after fixing the bug.
+
+In James's sentence, he uses `then` to explain the next action he took after checking the recent changes made to the code.
+
+Other words and phrases that can be used with the same meaning as `then` in this context are `after that` and `next`. For example:
+
+- `I checked the updates. After that, I started debugging.`
+
+- `I reviewed the requirements. Next, I shared my thoughts with the team.`.
+
+These words help structure descriptions of actions in chronological order.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
new file mode 100644
index 0000000000..c0c28e490c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
@@ -0,0 +1,94 @@
+---
+id: 67053b9fe0a27715979bee1b
+title: Task 13
+challengeType: 22
+dashedName: task-13
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Then I reviewed the BLANK BLANK more carefully.`
+
+## --blanks--
+
+`error`
+
+### --feedback--
+
+This word refers to mistakes or problems in a system or program.
+
+---
+
+`logs`
+
+### --feedback--
+
+This word refers to records or detailed reports of events or actions in a system.
+
+# --explanation--
+
+`Logs` generally means records or reports that document events, actions, or data over time. `Logs` are often used in technical contexts to track system activity. For example:
+
+`The server logs showed multiple login attempts.` - There is a record in the server of attempts of logging into it.
+
+`Error logs` specifically refer to records of system or application errors. These logs help identify issues by providing detailed information about what went wrong and when. For example:
+
+`The error logs revealed that the application crashed due to a missing file.` - In the record of issues or problems, you can see a missing file was the cause for the crash.
+
+In James's sentence, he refers to checking the `error logs` carefully to identify the source of a problem. These logs are essential for troubleshooting in programming.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
new file mode 100644
index 0000000000..921e911605
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
@@ -0,0 +1,96 @@
+---
+id: 67053ea535fe23160e6b29c1
+title: Task 14
+challengeType: 22
+dashedName: task-14
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Then I reviewed the error logs BLANK BLANK.`
+
+## --blanks--
+
+`more`
+
+### --feedback--
+
+This word is used to indicate a higher degree or intensity.
+
+---
+
+`carefully`
+
+### --feedback--
+
+This word is an adverb that describes how the action was performed, with care.
+
+# --explanation--
+
+`More carefully` uses `more` to intensify the adverb `carefully`, which describes the way James reviewed the error logs. Adverbs like `carefully` modify verbs, showing how an action is performed.
+
+If you compare `more careful` and `more carefully`, the difference is in the fact that `more careful` is an adjective phrase describing a noun (person, place, or thing). For example:
+
+`She was more careful with her calculations.` - Here, `more careful` describes the subject/person, `she`.
+
+`More carefully` is an adverb phrase, which describes how the action is performed. For example:
+
+`She checked her calculations more carefully.` - It describes how the calculations were `checked` - in other words, it describes the action of `checking`, not the person who `checks`.
+
+In James's sentence, `more carefully` explains that James increased the level of attention or detail in the reviewing of the logs. It describes the review, not James.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
new file mode 100644
index 0000000000..af24cbccb4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
@@ -0,0 +1,116 @@
+---
+id: 67053faa1471c916446ad615
+title: Task 15
+challengeType: 19
+dashedName: task-15
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James discover when reviewing the error logs?
+
+## --answers--
+
+He didn't discover anything.
+
+### --feedback--
+
+James explicitly states that he noticed `something`, meaning he found something.
+
+---
+
+He discovered something.
+
+---
+
+He discovered a common mistake.
+
+### --feedback--
+
+James mentions finding `something odd`. `Odd` is different from `common`.
+
+---
+
+He didn't look for anything.
+
+### --feedback--
+
+James was actively investigating and found something during his review.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Something` is used in affirmative sentences to indicate that a thing exists or happened. For example:
+
+- `He found something unusual in the logs.` - He discovered that the logs had a different thing from the usual.
+
+- `She noticed something during the meeting.` - One particular thing drew her attention during the meeting.
+
+In contrast, `anything` is used in negative sentences or questions. For example:
+
+- Negative: `He didn't find anything in the logs.` - The logs did not help him understand the problem.
+
+- Question: `Did she notice anything during the meeting?` - You are asking if she was able to see something during the meeting.
+
+In negative sentences with `did not` or `didn't`, the main verb remains in its base form (`find`, `notice` etc.), and `anything` is used instead of `something`.
+
+Here, James says, `That's when I noticed something odd`, meaning he found something during his review process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
new file mode 100644
index 0000000000..467d8d263f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
@@ -0,0 +1,84 @@
+---
+id: 670541bdd115c71686a398c3
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That's when I noticed something BLANK.`
+
+## --blanks--
+
+`odd`
+
+### --feedback--
+
+This word means strange or unusual.
+
+# --explanation--
+
+`Odd` is used to describe something that is unusual, strange, or unexpected. It often refers to something that does not fit the norm or is out of the ordinary. For example:
+
+- `The system showed an odd behavior during the test.` - Meaning the system acted different from the normal.
+
+- `I saw an odd pattern in the data.` - Meaning the pattern in the data was different.
+
+In James's sentence, he uses `odd` to describe something he noticed that seemed strange or unexpected while reviewing the logs.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
new file mode 100644
index 0000000000..0dee3f856f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
@@ -0,0 +1,94 @@
+---
+id: 6705425a4b3df216cb6de9a7
+title: Task 17
+challengeType: 19
+dashedName: task-17
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Lisa ask **in a short way** about James's discovery in the error logs?
+
+## --answers--
+
+`What was the odd thing that you found when you were reviewing the error logs?`
+
+### --feedback--
+
+Even though this is exactly what she wants to know, it is not a short question.
+
+---
+
+`What was it?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+James talks about `something odd`. Lisa asks him to identify what this odd thing (`it`) was by asking `What was it?`. `Was` is used because it is a singular thing (`something odd`) and it was found in the past, when James reviewed the error logs.
+
+Remember that, in questions, you normally invert verb and subject, so `it was` becomes `was it`. For example:
+
+- `It was fun!` - You're saying you liked an activity.
+
+- `Was it fun?` - You're asking the other person if they liked it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
new file mode 100644
index 0000000000..a2124d76af
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
@@ -0,0 +1,142 @@
+---
+id: 6705442e6a6ebf1725bc8e1f
+title: Task 18
+challengeType: 19
+dashedName: task-18
+---
+
+<!-- (Audio) James: That's when I noticed something odd. Lisa: What was it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+She wants to know where it was.
+
+### --feedback--
+
+Lisa's question is not about the location of the problem, but about what James noticed.
+
+---
+
+She wants to know what it was.
+
+---
+
+She wants to know when it happened.
+
+### --feedback--
+
+Lisa's question is not about time. It's about identifying the odd thing.
+
+---
+
+She wants to know why it was odd.
+
+### --feedback--
+
+Lisa's question focuses on what the odd thing was, not about why James thought it was odd.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The verb `to be` in the `Simple Past` is used to describe or ask about states or characteristics in the past. The forms are `was` (singular) and `were` (plural). For example:
+
+- Affirmative: `The meeting was productive.` - You had a good opinion about the meeting
+
+- Negative: `The meeting wasn't productive.` - Your opinion about the meeting was that it was a waste of time.
+
+In questions, the verb `to be` and the subject are inverted. For example:
+
+- Affirmative sentence: `It was a bug.` - You're confirming the presence of a bug in the code.
+
+- Question: `Was it a bug?` - You want to know if it was a bug. Notice `was` goes before `it` here.
+
+In this dialogue, Lisa asks `What was it?` to ask James to identify what the `something odd` that he noticed was.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.96
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.03
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 3.03
+    },
+    {
+      "character": "Lisa",
+      "startTime": 3.18,
+      "finishTime": 3.72,
+      "dialogue": {
+        "text": "What was it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
new file mode 100644
index 0000000000..771ccd9100
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
@@ -0,0 +1,108 @@
+---
+id: 6705573e13b1211820a3ac67
+title: Task 19
+challengeType: 19
+dashedName: task-19
+---
+
+<!-- (Audio) James: The system wasn't connecting to the database properly. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James find in the error logs?
+
+## --answers--
+
+The system was connecting to many databases at the same time.
+
+### --feedback--
+
+James states that the system wasn't connecting properly to the database. There is no mention of more than one database in the sentence.
+
+---
+
+The system was turned off.
+
+### --feedback--
+
+James didn't mention that the system was off. The issue was with its connection to the database.
+
+---
+
+The system wasn't connecting to the database properly.
+
+---
+
+There were no errors in the system.
+
+### --feedback--
+
+James found an error: the system wasn't connecting to the database.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The negative form of the verb `to be` in the `Simple Past` tense is `was not` or `wasn't` for singular subjects, and `were not` or `weren't` for plural subjects. It is used to describe something that did not happen or was not true. For example:
+
+- Singular: `The code wasn't running as expected.` - An issue was happening with the code.
+
+- Plural: `The changes weren't implemented correctly.` - Errors in the implementation caused the bugs.
+
+In James's sentence, he uses `wasn't` to explain that the system was failing to connect to the database. Negative sentences with `wasn't` or `weren't` indicate what did not occur or work as you might expect.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.3,
+      "finishTimestamp": 19.78
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "The system wasn't connecting to the database properly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
new file mode 100644
index 0000000000..d3012ef7e2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
@@ -0,0 +1,84 @@
+---
+id: 67055872382df21871200427
+title: Task 20
+challengeType: 22
+dashedName: task-20
+---
+
+<!-- (Audio) James: The system wasn't connecting to the database properly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The system wasn't connecting to the database BLANK.`
+
+## --blanks--
+
+`properly`
+
+### --feedback--
+
+This word means in the correct or appropriate way.
+
+# --explanation--
+
+`Properly` is the adverb form of the adjective `proper`. Both words can express doing something in the correct or suitable manner, but their usage differs depending on the sentence structure. For example:
+
+- `The application didn't function properly after the update.` - This means the updates brought errors to the code. The adverb `properly` modifies the verb `function`.
+
+- `This wasn't a proper configuration of the database.` - The adjective `proper` describes the noun `configuration`.
+
+Here, James uses `properly` to describe that the system wasn't connecting to the database in the correct way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.3,
+      "finishTimestamp": 19.78
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "The system wasn't connecting to the database properly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
new file mode 100644
index 0000000000..2a544ee3ca
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
@@ -0,0 +1,98 @@
+---
+id: 67055c02b6774a18f8f7186f
+title: Task 21
+challengeType: 22
+dashedName: task-21
+---
+
+<!-- (Audio) James: After that, I realized we didn't update the database credentials after the last security patch. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`After that, I realized we didn't update the database BLANK after the last security BLANK.`
+
+## --blanks--
+
+`credentials`
+
+### --feedback--
+
+This word refers to the username, password, or other information required to access a system.
+
+---
+
+`patch`
+
+### --feedback--
+
+This word refers to an update or fix applied to software or a system, often for security purposes.
+
+# --explanation--
+
+`Credentials` refers to information such as usernames, passwords, or keys that allow a user or system to access another system or resource. For example:
+
+- `Please enter your credentials to log in to the server.` - meaning you should insert your information to access the server.
+
+- `The credentials were incorrect, so the login failed.` - meaning the information you inserted is different from the one the system has in its database.
+
+A `patch` is an update or fix applied to software or systems to correct issues, improve functionality, or enhance security. For example:
+
+- `The developers released a patch to fix the bug.` - meaning they fixed the bug through an update to the system.
+
+- `Make sure to apply the latest security patch to protect your system.` - meaning the last security update will be able to protect your system better.
+
+Here, James explains that the issue was caused by forgetting to update the database `credentials` after applying a security `patch`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.16,
+      "finishTimestamp": 25.36
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 6.2,
+      "dialogue": {
+        "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 6.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
new file mode 100644
index 0000000000..0bad385235
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
@@ -0,0 +1,94 @@
+---
+id: 67055d274231051940d0c8ea
+title: Task 22
+challengeType: 22
+dashedName: task-22
+---
+
+<!-- (Audio) James: After that, I realized we didn't update the database credentials after the last security patch. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK BLANK, I realized we didn't update the database credentials after the last security patch.`
+
+## --blanks--
+
+`After`
+
+### --feedback--
+
+The opposite of `before`. Capitalize it as it is in the beginning of a sentence.
+
+---
+
+`that`
+
+### --feedback--
+
+Demonstrative pronoun used when something is more distant from the speaker. When something is close to the speaker, you can use `this`.
+
+# --explanation--
+
+`After that` is used to show the order of events, meaning the next action or event followed something that happened previously. It helps organize actions in chronological order. For example:
+
+- `We finished the code review. After that, we started debugging.` - First, they reviewed the code. Then, they debugged it.
+
+- `He submitted the report. After that, he took a short break.` - First, he submitted the report. Then, he rested.
+
+`After that` is similar in meaning to expressions like `then` or `next`, but it specifically emphasizes that one action follows another in time.
+
+Here, James uses `after that` to indicate that realizing what the credentials issue was came after another action in the debugging process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.16,
+      "finishTimestamp": 25.36
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 6.2,
+      "dialogue": {
+        "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 6.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
new file mode 100644
index 0000000000..271d3441ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
@@ -0,0 +1,120 @@
+---
+id: 67055f5c9bdb8e1999102827
+title: Task 23
+challengeType: 19
+dashedName: task-23
+---
+
+<!-- (Audio) James: I realized we didn't update the database credentials after the last security patch. Lisa: Ah, so the credentials were the issue. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+After these lines, Lisa then asks James if he solved the problem. How could she ask that **in a brief way**?
+
+## --answers--
+
+`Did you fix the credentials that were causing the issue?`
+
+### --feedback--
+
+That is indeed what she wants to know, but she asks a much shorter question than this one.
+
+---
+
+`Did you fix them?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When talking about something you already mentioned before, you can use `it` to replace it if it is a singular noun or `them` if it is a plural noun to avoid repetition. For example:
+
+- `You were looking for a car to buy. Did you buy it?` - `It` is used instead of `the car` in the question.
+
+- `How were your tests last week? Did you do well on all of them?` - `Them` replaces `your tests` here.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.88,
+      "finishTimestamp": 27.62
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.73
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 5.73
+    },
+    {
+      "character": "Lisa",
+      "startTime": 5.98,
+      "finishTime": 7.74,
+      "dialogue": {
+        "text": "Ah, so the credentials were the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 8.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
new file mode 100644
index 0000000000..30101291fb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
@@ -0,0 +1,114 @@
+---
+id: 6705605c7fb8f619e0068634
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Lisa: Ah, so the credentials were the issue. Did you fix them? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Lisa asking James about?
+
+## --answers--
+
+She is asking if James fixed the credentials.
+
+---
+
+She is asking if the credentials caused the issue.
+
+### --feedback--
+
+Lisa already understands that the credentials were the problem. She is asking if James fixed them.
+
+---
+
+She is asking if James fixed the database.
+
+### --feedback--
+
+Lisa's question specifically refers to the credentials, not to the database as a whole.
+
+---
+
+She is asking if there are more issues.
+
+### --feedback--
+
+Lisa's question focuses on whether James fixed the credentials.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Issue` in this context means a problem or difficulty that needs to be solved. In the sentence, it refers to the database credentials being incorrect. For example:
+
+- `There was an issue with the system configuration.` - The problem was related to the configuration of the system.
+
+- `The main issue was a missing file.` - The problem was caused by a file not being where it should be.
+
+`Them` is a pronoun used to replace plural nouns already mentioned. In Lisa's question, `them` refers to the `credentials`. For example:
+
+- `The files were corrupted. Did you fix them?` - `them` refers to the files.
+
+- `The permissions were incorrect. I updated them this morning.` - `them` refers to the permissions.
+
+Lisa's question asks if James fixed the credentials.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.86,
+      "finishTimestamp": 28.48
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "Ah, so the credentials were the issue. Did you fix them?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
new file mode 100644
index 0000000000..3c649d9faf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
@@ -0,0 +1,117 @@
+---
+id: 670561a8af3d901a431549fe
+title: Task 25
+challengeType: 19
+dashedName: task-25
+---
+
+<!-- (Audio) James: Yes, I updated the credentials and the connection was finally successful. The app started working again. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was necessary to make the app work again?
+
+## --answers--
+
+Restarting the app.
+
+### --feedback--
+
+James doesn't mention restarting the app as the solution. He says updating the credentials was necessary.
+
+---
+
+Fixing the database server.
+
+### --feedback--
+
+James mentions updating the credentials, not fixing the server, as the key to solving the issue.
+
+---
+
+Updating the credentials.
+
+---
+
+Reinstalling the app.
+
+### --feedback--
+
+James says updating the credentials solved the issue, not reinstalling the app.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Successful` means achieving the desired result or goal. In this context, James says the connection was `successful`, meaning the database connection worked correctly after updating the credentials. For example:
+
+- `The team completed a successful deployment yesterday.` - meaning the deployment finished with good results.
+
+- `Her solution to the problem was successful and saved a lot of time.` - meaning she found a good solution to the problem.
+
+In James's case, updating the credentials to make a successful connection to the database was necessary for the app to start working again.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.48,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.3,
+      "dialogue": {
+        "text": "Yes, I updated the credentials and the connection was finally successful.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "startTime": 5.62,
+      "finishTime": 7.1,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
new file mode 100644
index 0000000000..f9c2b9d940
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
@@ -0,0 +1,113 @@
+---
+id: 670562a2aa92081a89ba77f6
+title: Task 26
+challengeType: 22
+dashedName: task-26
+---
+
+<!-- (Audio) James: Yes, I updated the credentials and the connection was finally successful. The app started working again. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I BLANK the credentials and the connection BLANK finally successful. The app BLANK working again.`
+
+## --blanks--
+
+`updated`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `update`, created by adding `-ed` to the base verb.
+
+---
+
+`was`
+
+### --feedback--
+
+This is the `Simple Past` form of the verb `to be`, used here to describe the state of the connection.
+
+---
+
+`started`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `start`, created by adding `-ed` to the base verb.
+
+# --explanation--
+
+Affirmative sentences in the `Simple Past` follow specific rules:
+
+For the verb `to be`, the forms are `was` (singular) and `were` (plural). These forms are used without auxiliary verbs. For example:
+
+- `The project was successful.` - This means the project brought good results.
+
+- `They were happy with the results.` - this represents how `they` felt about the results of the project.
+
+Regular verbs in the Simple Past are formed by adding `-ed` to the base verb. For example:
+
+- `I worked on the project yesterday.` - You add `-ed` to the base form of the verb `work` to say that the action happened in a moment in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.48,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.3,
+      "dialogue": {
+        "text": "Yes, I updated the credentials and the connection was finally successful.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "startTime": 5.62,
+      "finishTime": 7.1,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
new file mode 100644
index 0000000000..a9c803c3d8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
@@ -0,0 +1,90 @@
+---
+id: 6705638c3791881aed186e9d
+title: Task 27
+challengeType: 19
+dashedName: task-27
+---
+
+<!-- (Audio) James: The app started working again. -->
+
+<!-- SPEAKING --> 
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How can Lisa congratulate James **in a brief way** to make him know she is happy with the results?
+
+## --answers--
+
+`Congratulations on a job well done. I'm really happy to know you solved this issue.`
+
+### --feedback--
+
+That is the idea. However, Lisa could say that in a much shorter form.
+
+---
+
+`Great job.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Great job` can be used to tell someone you are satisfied with their effort or achievement. It expresses appreciation and acknowledgment of their success. For example:
+
+Kid: `Mom, I finished all my homework!` Mother: `Great job.`
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.9,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.68,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.18
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
new file mode 100644
index 0000000000..5b08edcaf8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
@@ -0,0 +1,134 @@
+---
+id: 670564e883b7911b4ec31e29
+title: Task 28
+challengeType: 19
+dashedName: task-28
+---
+
+<!-- (Audio) James: The app started working again. Lisa: Great job. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What can you conclude based on Lisa's comment?
+
+## --answers--
+
+She is telling James the app is broken.
+
+### --feedback--
+
+Lisa's comment intends to praise James for fixing the app, not to criticize him.
+
+---
+
+She is praising James for his effort.
+
+---
+
+She is asking James to work faster.
+
+### --feedback--
+
+Lisa's comment is about appreciating James's work, not asking for speed.
+
+---
+
+She is unsure if the app is working.
+
+### --feedback--
+
+Lisa's comment shows that she is confident in James's success and appreciates his work.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The phrase `Great job` is used to praise or compliment someone for their effort or achievement. It expresses appreciation and acknowledgment of their success. For example:
+
+`You fixed the bug in record time. Great job!` - meaning you think it is great that the other person fixed the bug so fast.
+
+Lisa's use of `Great job` in the dialogue reflects her recognition of James's effort in solving the problem and getting the app working again.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.9,
+      "finishTimestamp": 35.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.68,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 2.87
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 2.87
+    },
+    {
+      "character": "Lisa",
+      "startTime": 3.06,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "Great job.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
new file mode 100644
index 0000000000..60e30e466f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
@@ -0,0 +1,60 @@
+---
+id: 67056697de96ba1ba012eb44
+title: Task 42
+challengeType: 22
+dashedName: task-42
+---
+
+# --instructions--
+
+Fill each blank with one of the following words to add the correct sequential linkers to the text below: `After`, `Finally`, `First`, or `Then`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, James checked the code for recent changes. BLANK, he reviewed the error logs more carefully. BLANK that, he found the bug in the database credentials. BLANK, he updated the credentials, and the app worked again.`
+
+## --blanks--
+
+`First`
+
+### --feedback--
+
+James' initial action was checking the code. The first letter is capitalized.
+
+---
+
+`Then`
+
+### --feedback--
+
+This linker indicates the immediate next action, which was reviewing the error logs. The first letter is capitalized.
+
+---
+
+`After`
+
+### --feedback--
+
+This word combined with the following makes a linker that correctly introduces a step with more separation, when James found the bug in the credentials. The first letter is capitalized.
+
+---
+
+`Finally`
+
+### --feedback--
+
+This linker indicates that updating the credentials was the last step in solving the issue. The first letter is capitalized.
+
+# --explanation--
+
+Sequential linkers like `first`, `then`, `after that`, and `finally` are used to describe the order of actions or events.
+
+- `First` is used to describe the initial action.
+
+- `Then` refers to the next immediate step.
+
+- `After that` is used to introduce a step following another action with some distinction between them.
+
+- `Finally` marks the last step in a sequence.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
new file mode 100644
index 0000000000..42892a829e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
@@ -0,0 +1,64 @@
+---
+id: 67056b4950144e1cf10c53a6
+title: Task 43
+challengeType: 19
+dashedName: task-43
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What would be the most appropriate subject for James' email to the team?
+
+## --answers--
+
+`Update on the system connection issue`
+
+### --feedback--
+
+This subject is relevant but a bit too vague about the exact problem James fixed.
+
+---
+
+`Bug fixed. Database credentials updated`
+
+---
+
+`Security patch problems`
+
+### --feedback--
+
+This subject is misleading because the security patch wasn't the problem, it was the credentials not being updated after the patch.
+
+---
+
+`Error logs reviewed. No issues found`
+
+### --feedback--
+
+This subject is incorrect because James did find an issue while reviewing the error logs.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the most appropriate subject take into consideration the whole email and think about the main issue discussed.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
new file mode 100644
index 0000000000..6c62c01113
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
@@ -0,0 +1,66 @@
+---
+id: 670570ad97d26e1d6bad572d
+title: Task 44
+challengeType: 19
+dashedName: task-44
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What was the first thing James did to investigate the bug?
+
+## --answers--
+
+He checked the recent code changes.
+
+---
+
+He updated the credentials.
+
+### --feedback--
+
+This is incorrect because James updated the credentials later.
+
+---
+
+He reviewed the error logs.
+
+### --feedback--
+
+James reviewed the error logs after checking the recent code changes.
+
+---
+
+He restarted the system.
+
+### --feedback--
+
+This action wasn't mentioned in the dialogue.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find out what was the first thing James did, focus on the sentence that starts with `First I...`.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
new file mode 100644
index 0000000000..eca1d02afd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
@@ -0,0 +1,66 @@
+---
+id: 6705725e2814c91dd738e8f4
+title: Task 45
+challengeType: 19
+dashedName: task-45
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What was the main cause of the bug James found?
+
+## --answers--
+
+The error logs were not updated.
+
+### --feedback--
+
+This is incorrect because the issue wasn't related to the logs.
+
+---
+
+The system wasn't connecting to the database properly.
+
+---
+
+The code changes introduced a new error.
+
+### --feedback--
+
+The bug wasn't directly caused by the code changes.
+
+---
+
+The internet connection was unstable.
+
+### --feedback--
+
+James doesn't mention this.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out the main cause of the bug, look for the part of the text that talks about the system's connection. Focus on the sentence that starts with `Then, I...`.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
new file mode 100644
index 0000000000..9fb48db944
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
@@ -0,0 +1,66 @@
+---
+id: 6705742b9616e01e275e5c08
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+How did James fix the problem?
+
+## --answers--
+
+He reviewed the error logs again.
+
+### --feedback--
+
+Reviewing the logs helped James find the issue but didn't directly fix it.
+
+---
+
+He updated the credentials.
+
+---
+
+He made changes to the code.
+
+### --feedback--
+
+The issue wasn't fixed by changing the code, but by updating the credentials.
+
+---
+
+He restarted the app.
+
+### --feedback--
+
+Restarting the app wasn't mentioned as part of the solution.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out how James fixed the problem, look for the part of the text that talks about updating the credentials. Focus on the sentence that starts with `We hadn't...`.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
new file mode 100644
index 0000000000..201b595e5b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
@@ -0,0 +1,66 @@
+---
+id: 67057604ca099f1e7df78e77
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+When were the credentials updated last time?
+
+## --answers--
+
+Before the bug was found.
+
+### --feedback--
+
+The credentials weren't updated before the bug was found, which was actually the cause of the issue.
+
+---
+
+After the last security patch.
+
+---
+
+When the error logs were cleared.
+
+### --feedback--
+
+The error logs revealed the issue, but the credentials weren't updated when the logs were cleared.
+
+---
+
+During the last system backup.
+
+### --feedback--
+
+No mention of a system backup was made, so this doesn't apply to the situation.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out when the credentials were updated, check the part where James explains why the app wasn't working. Focus on the sentence starting with, `We hadn't updated...`. 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
new file mode 100644
index 0000000000..cdff5a1471
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
@@ -0,0 +1,66 @@
+---
+id: 67057e02da44871f492f6f35
+title: Task 48
+challengeType: 19
+dashedName: task-48
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+Is the app working now?
+
+## --answers--
+
+No, the app still has bugs.
+
+### --feedback--
+
+The bug was fixed after updating the credentials, so the app no longer has issues.
+
+---
+
+Yes, it's running smoothly.
+
+---
+
+No, the database is still down.
+
+### --feedback--
+
+The database connection issue was resolved, so it's not down anymore.
+
+---
+
+Yes, but only partially.
+
+### --feedback--
+
+The app is fully operational, not partially working.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To figure out if the app is working now, look at the last part of James' explanation where he says, `I fixed...`.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
new file mode 100644
index 0000000000..83bb86d2ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
@@ -0,0 +1,223 @@
+---
+id: 670f6ca334a541048d0e9a76
+title: "Dialogue 2: Project Post-Mortem"
+challengeType: 21
+dashedName: dialogue-2-project-post-mortem
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video
+
+# --scene--
+
+```json
+{
+"setup": {
+  "background": "company2-center.png",
+  "characters": [
+    {
+      "character": "Linda",
+      "position": { "x": -25, "y": 0, "z": 1 }
+    },
+    {
+      "character": "Jake",
+      "position": { "x": 125, "y": 0, "z": 1 }
+    }
+  ],
+  "audio": {
+    "filename": "B1_2-2.mp3",
+    "startTime": 1
+  },
+  "alwaysShowDialogue": true
+},
+"commands": [
+  {
+    "character": "Linda",
+    "position": { "x": 25, "y": 0, "z": 1 },
+    "startTime": 0
+  },
+  {
+    "character": "Jake",
+    "position": { "x": 70, "y": 0, "z": 1 },
+    "startTime": 0.5
+  },
+  {
+    "character": "Linda",
+    "startTime": 1,
+    "finishTime": 4.88,
+    "dialogue": {
+      "text": "I was thinking we could do a quick post-mortem of the design project.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 5.42,
+    "finishTime": 10.42,
+    "dialogue": {
+      "text": "Sure. I was reviewing our security protocols for the project just yesterday. What's on your mind?",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 11.08,
+    "finishTime": 14.44,
+    "dialogue": {
+      "text": "Well, during the project, I was working closely with the development team,",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 14.58,
+    "finishTime": 17.94,
+    "dialogue": {
+      "text": "and we were constantly updating the user interface based on user feedback.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 18.58,
+    "finishTime": 20.78,
+    "dialogue": {
+      "text": "I noticed that. But there was a time",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 20.78,
+    "finishTime": 24.26,
+    "dialogue": {
+      "text": "when we weren't considering security implications during those updates, right?",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 24.66,
+    "finishTime": 29.14,
+    "dialogue": {
+      "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 29.14,
+    "finishTime": 32.18,
+    "dialogue": {
+      "text": "Did you use to check the updates for security vulnerabilities?",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 32.9,
+    "finishTime": 35.5,
+    "dialogue": {
+      "text": "I did, but not always in real time.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 35.78,
+    "finishTime": 39.12,
+    "dialogue": {
+      "text": "Sometimes I was checking them a day later, which wasn't ideal.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 39.68,
+    "finishTime": 42.66,
+    "dialogue": {
+      "text": "I remember there was a week when we were all working overtime.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 43,
+    "finishTime": 45.1,
+    "dialogue": {
+      "text": "You were fixing a security issue, weren't you?",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 45.88,
+    "finishTime": 49.48,
+    "dialogue": {
+      "text": "Exactly. There was a major vulnerability that needed immediate action.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 49.68,
+    "finishTime": 53.2,
+    "dialogue": {
+      "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 53.72,
+    "finishTime": 55.56,
+    "dialogue": {
+      "text": "It was quite a learning curve for us.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 55.74,
+    "finishTime": 58.92,
+    "dialogue": {
+      "text": "We didn't use to integrate security and design as much as we should.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 59.7,
+    "finishTime": 65.94,
+    "dialogue": {
+      "text": "Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 66.06,
+    "finishTime": 68.64,
+    "dialogue": {
+      "text": "We can't afford to overlook this aspect again.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "position": { "x": 125, "y": 0, "z": 1 },
+    "startTime": 69.14
+  },
+  {
+    "character": "Linda",
+    "position": { "x": -25, "y": 0, "z": 1 },
+    "startTime": 69.64
+  }
+]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
new file mode 100644
index 0000000000..24008becf5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
@@ -0,0 +1,106 @@
+---
+id: 670f71de33e0be053934a9c3
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Linda mean by `postmortem`?
+
+## --answers--
+
+She means a review of the design project after its completion to analyze what went well and what didn't.
+
+---
+
+She means creating a new design for the project.
+
+### --feedback--
+
+A `postmortem` is not about designing something new but about reviewing what happened after a project.
+
+---
+
+She means canceling the design project.
+
+### --feedback--
+
+A `postmortem` is done after a project is completed, not about canceling it.
+
+---
+
+She means reviewing the project before starting it.
+
+### --feedback--
+
+A `postmortem` happens after the project is finished, not before.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The term `postmortem` comes from Latin, meaning *after death*, but in a business context, it refers to a meeting or review conducted after the completion of a project to analyze its successes and problems.
+
+This meeting helps organizations learn from their experiences and improve future projects. For example:
+
+`The team conducted a postmortem to discuss the challenges faced during the product launch.` - This means the team met after product launch to discuss the challenges they encountered in the process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
new file mode 100644
index 0000000000..017e62394f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
@@ -0,0 +1,92 @@
+---
+id: 670f74145be4b907a1b9c915
+title: Task 50
+challengeType: 22
+dashedName: task-50
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I BLANK BLANK we could do a quick postmortem of the design project.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`thinking`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It is used to talk about a process that happens on your mind.
+
+# --explanation--
+
+The `Past Continuous` tense is used to describe actions or thoughts that were in progress at a specific time in the past.
+
+This tense is often used to describe background actions or ongoing processes in the past. The structure is **`was`/`were` + verb ending in `-ing`**.
+
+In this sentence, `I was thinking` shows that Linda's thought about doing a postmortem was in progress at a specific time. Another example:
+
+`He was reviewing the report when the meeting started.` - Meaning that the action of reviewing the report was in progress and another situation interrupted it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
new file mode 100644
index 0000000000..cdee09e739
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
@@ -0,0 +1,92 @@
+---
+id: 6710bc2f9f242e03ebeccbe9
+title: Task 51
+challengeType: 19
+dashedName: task-51
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake very briefly tell Linda that he agrees with the idea of having a quick `postmortem`?
+
+## --answers--
+
+`Oh, absolutely. I think doing a postmortem would be a great idea.`
+
+### --feedback--
+
+Even though this is correct, it is not brief. There's a simple, 4-letter word you can use to say exactly the same.
+
+---
+
+`Sure.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When agreeing with someone's idea you can briefly tell a person that by saying `Sure`. For example:
+
+- `Would you like to visit another country some day? Sure.` - This means you want to do it.
+
+- `How about going to the movies this week? Sure.` - This means you accept the invitation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
new file mode 100644
index 0000000000..6834c3899c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
@@ -0,0 +1,106 @@
+---
+id: 6710bf5df20df90498c991a2
+title: Task 52
+challengeType: 19
+dashedName: task-52
+---
+
+<!-- (Audio) Jake: Sure. I was reviewing our security protocols for the project just yesterday. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was Jake doing yesterday?
+
+## --answers--
+
+He was updating the security protocols.
+
+### --feedback--
+
+Jake says he was reviewing the protocols, not updating them.
+
+---
+
+He was designing a new security system.
+
+### --feedback--
+
+Jake was reviewing existing protocols, not designing a new system.
+
+---
+
+He was reviewing the security protocols for the project.
+
+---
+
+He was fixing a bug in the project.
+
+### --feedback--
+
+Jake's focus was on reviewing the security protocols, not fixing a bug.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The `Past Continuous` tense often emphasizes the duration or background of an action in the past. It is used to describe an action that was ongoing at a specific time in the past. The structure is: **`was`/`were` + verb ending in `-ing`**.
+
+In Jake's sentence, `I was reviewing` shows that the action of reviewing was in progress yesterday. Another example:
+
+`She was testing the new feature when the system crashed.` - Here, the crashing of the system happened in the middle of her action of testing the new feature - the test was a longer ongoing action.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.42,
+      "finishTimestamp": 8.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.28,
+      "dialogue": {
+        "text": "Sure. I was reviewing our security protocols for the project just yesterday.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
new file mode 100644
index 0000000000..efca669837
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
@@ -0,0 +1,90 @@
+---
+id: 6710c59075616806206fcf44
+title: Task 53
+challengeType: 22
+dashedName: task-53
+---
+
+<!-- (Audio) Jake: Sure. I was reviewing our security protocols for the project just yesterday. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sure. I was reviewing our BLANK BLANK for the project just yesterday.`
+
+## --blanks--
+
+`security`
+
+### --feedback--
+
+This word refers to measures or procedures taken to protect systems or data.
+
+---
+
+`protocols`
+
+### --feedback--
+
+This word refers to rules or procedures that need to be followed in specific situations.
+
+# --explanation--
+
+A `protocol` is a set of rules or procedures designed to guide behavior or processes. A `security protocol` refers to specific procedures designed to protect systems, networks, or data from unauthorized access or threats. For example:
+
+`Our security protocols require two-factor authentication for all logins.` - This means that the use of two-factor authentication for logging in is a part of the procedures related to protecting the system.
+
+In this sentence, Jake is referring to reviewing the rules and procedures (the `protocols`) designed to ensure the project's security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.42,
+      "finishTimestamp": 8.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.28,
+      "dialogue": {
+        "text": "Sure. I was reviewing our security protocols for the project just yesterday.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
new file mode 100644
index 0000000000..d5af040376
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
@@ -0,0 +1,106 @@
+---
+id: 6710c7bd388290075f19552c
+title: Task 54
+challengeType: 19
+dashedName: task-54
+---
+
+<!-- (Audio) Jake: What's on your mind? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake asking Linda?
+
+## --answers--
+
+He is asking what Linda is working on.
+
+### --feedback--
+
+Jake is asking about her thoughts, not her current task.
+
+---
+
+He is asking what Linda is thinking about.
+
+---
+
+He is asking if Linda is busy.
+
+### --feedback--
+
+Jake's question is about her thoughts, not her availability.
+
+---
+
+He is asking if Linda is worried about something.
+
+### --feedback--
+
+While the question could refer to concerns, it is more general, asking about what she is thinking.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`What's on your mind?` is used to ask someone what they are thinking about or if they have any concerns or thoughts they want to share.
+
+It's often used in both personal and professional settings to encourage open communication. It is a conversational way to invite someone to express their thoughts. For example:
+
+`You seem quiet today. What's on your mind?` - You are asking the other person what they are thinking about.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.72,
+      "finishTimestamp": 9.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 1.9,
+      "dialogue": {
+        "text": "What's on your mind?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.4
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
new file mode 100644
index 0000000000..267bc8ff84
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
@@ -0,0 +1,115 @@
+---
+id: 6710e0e2cafeeb09e6cb2d8f
+title: Task 55
+challengeType: 22
+dashedName: task-55
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Well, during the project, I BLANK BLANK closely with the development team, and we BLANK constantly BLANK the user interface based on user feedback.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`working`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`, describing the act of laboring.
+
+---
+
+`were`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the plural first-person form.
+
+---
+
+`updating`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`, describing an ongoing action of improving or modernizing something.
+
+# --explanation--
+
+The `Past Continuous` tense is used to describe actions that were ongoing at a specific time in the past. When two `Past Continuous` sentences are used together, they often describe simultaneous actions or actions happening alongside each other.
+
+In this sentence, Linda is describing how she and her team were both working and updating the user interface continuously throughout the project. This shows two actions happening at the same time in the past, providing context or background for each other. For example:
+
+`While I was preparing the report, they were testing the new features.` - This means the action of my preparing the report and the testing of the new features happened at the same time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
new file mode 100644
index 0000000000..9b7e8768f3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
@@ -0,0 +1,107 @@
+---
+id: 6710e614f70bd10afb6ca7f7
+title: Task 56
+challengeType: 22
+dashedName: task-56
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Well, during the project, I was working BLANK with the development team, and we were BLANK updating the user interface based on user feedback.`
+
+## --blanks--
+
+`closely`
+
+### --feedback--
+
+This word is an adverb describing how someone works in a careful, detailed, or collaborative way.
+
+---
+
+`constantly`
+
+### --feedback--
+
+This word is an adverb describing an action that happens continuously or very frequently.
+
+# --explanation--
+
+`Closely` is an adverb that means working in a careful, detailed, or collaborative way. It is related to the adjective `close`, which refers to a short distance or a strong relationship. For example:
+
+- `The manager worked closely with the design team.` - This sentence uses the adverb, which describes how they worked.
+
+- `They have a close relationship.` - This sentence uses the adjective, which describes the relationship.
+
+`Constantly` is an adverb that describes something that happens continuously or very frequently. It is related to the adjective `constant`, which refers to something that does not change or stops. For example:
+
+- `She constantly checks her emails throughout the day.` - This sentence uses the adverb, which describes the frequency of the action of checking.
+
+- `There was a constant need for updates.` - This sentence uses the adjective, which describes the need as being frequent.
+
+In the sentence, Linda uses `closely` to describe how her collaboration with the team was and `constantly` to show how frequently they updated the user interface.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
new file mode 100644
index 0000000000..187e9c47d5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
@@ -0,0 +1,119 @@
+---
+id: 6710ef64fecf900ca5296978
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did the development team use to constantly update the user interface?
+
+## --answers--
+
+They used user feedback.
+
+---
+
+They used new features.
+
+### --feedback--
+
+Linda says they updated the user interface based on user feedback, not new features.
+
+---
+
+They used system logs.
+
+### --feedback--
+
+Linda specifically mentions user feedback, not system logs, as the source for updates.
+
+---
+
+They used bug reports.
+
+### --feedback--
+
+While bug reports are important, Linda refers to user feedback for updating the user interface.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The `user interface` (UI) refers to the part of a system or software that users interact with directly, such as buttons, menus, and screens. For example:
+
+`The user interface was redesigned to be more intuitive.` - Meaning the part of the software the user interacts with was improved.
+
+`User feedback` refers to opinions, suggestions, or issues reported by users about their experience with a product or service. For example:
+
+`The company improved the app based on user feedback.` - Meaning the comments and suggestions coming from the users were read and used to make the app better.
+
+In this context, Linda explains that the team relied on user feedback to make constant improvements to the user interface, ensuring it met the needs of users.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
new file mode 100644
index 0000000000..685bdc81e8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
@@ -0,0 +1,107 @@
+---
+id: 67121364e79da2047818b743
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+<!-- (Audio) Jake: I noticed that. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake mean when he says `I noticed that`?
+
+## --answers--
+
+
+He means he ignored it.
+
+### --feedback--
+
+`Notice` refers to observing or becoming aware of something, not ignoring it.
+
+---
+
+He means he forgot about it.
+
+### --feedback--
+
+`Notice` refers to paying attention, not forgetting.
+
+---
+
+He means he became aware of it or observed it.
+
+---
+
+He means he created it.
+
+### --feedback--
+
+`Notice` refers to observing something, not creating it.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Notice` means to become aware of something by seeing, hearing, or sensing it. It often implies paying attention to details. For example:
+
+`I noticed the error in the report before the meeting.` - This means you saw there was an error.
+
+It can refer to becoming aware of both physical things and situations. In this sentence, Jake means that he observed or became aware that the team was using user feedback to improve the user interface.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 18.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.12,
+      "dialogue": {
+        "text": "I noticed that.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
new file mode 100644
index 0000000000..d5f941c9ca
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
@@ -0,0 +1,108 @@
+---
+id: 67121be3d5093805dfdbaa71
+title: Task 59
+challengeType: 22
+dashedName: task-59
+---
+
+<!-- (Audio) Jake: I noticed that. But there was a time when we weren't considering security implications during those updates, right? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I noticed that. But there was a time when we BLANK BLANK security implications during those updates, right?`
+
+## --blanks--
+
+`weren't`
+
+### --feedback--
+
+This is the negative form of the auxiliary verb `to be` in the `Past Continuous`, used for **plural** subjects.
+
+---
+
+`considering`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It has to do with thinking carefully about something.
+
+# --explanation--
+
+The `Past Continuous` in its negative form is used to describe actions that were not happening at a specific time in the past. The structure is:  
+**`wasn't` / `weren't` + verb ending in `-ing`**. For example:
+
+- `He wasn't listening during the meeting.` - This sentence uses the singular form `was`
+
+- `They weren't following the instructions carefully.` - This sentence uses the plural form `were`.
+
+In this context, `weren't considering` means that, at a certain point in the past, the team was not taking security implications into account while performing updates.
+
+The verb `consider` means to think carefully about something before making a decision or taking action. For example:
+
+`We need to consider all options before finalizing the project plan.` - Meaning it's necessary to think about the options.
+
+In Jake's sentence, `considering` refers to the team evaluating or thinking about security implications.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 23.46
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "I noticed that. But there was a time",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "when we weren't considering security implications during those updates, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
new file mode 100644
index 0000000000..83de71ed0c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
@@ -0,0 +1,115 @@
+---
+id: 67121d26052fb606bd59705c
+title: Task 60
+challengeType: 19
+dashedName: task-60
+---
+
+<!-- (Audio) Jake: I noticed that. But there was a time when we weren't considering security implications during those updates, right? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake mean with his question?
+
+## --answers--
+
+He is asking if the team always considered security implications.
+
+### --feedback--
+
+Jake's question suggests there might have been a time when security was overlooked.
+
+---
+
+He is asking if security was never important.
+
+### --feedback--
+
+Jake's question focuses on whether there was a specific time when security wasn't considered, not on its overall importance.
+
+---
+
+He is asking if the updates were unnecessary.
+
+### --feedback--
+
+Jake is asking about the consideration of security implications, not the necessity of the updates.
+
+---
+
+He is asking if there was a time when security concerns were not taken into account during the updates.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Implications` refers to the possible results or effects of an action or decision, especially those that are not immediately obvious. In this context, `security implications` are the potential consequences of not considering security during updates. For example:
+
+`Before launching the new feature, the team discussed the implications for user privacy.` - Meaning they discussed the possible consequences to user privacy that this new feature could bring.
+
+In Jake's question, he is referring to the potential negative outcomes of not considering security during past updates.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 23.46
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "I noticed that. But there was a time",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "when we weren't considering security implications during those updates, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
new file mode 100644
index 0000000000..f6a79172da
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
@@ -0,0 +1,110 @@
+---
+id: 67122e8300d8e90843b04967
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (Audio) Linda: Yes, that's true. We used to focus solely on design aspects and user experience. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did the team normally pay attention to exclusively in the past?
+
+## --answers--
+
+They focused solely on design aspects and user experience.
+
+---
+
+They focused on security protocols.
+
+### --feedback--
+
+Linda specifically says they focused on design aspects and user experience, not security.
+
+---
+
+They paid attention to marketing strategies.
+
+### --feedback--
+
+Linda refers to focusing on design and user experience, not marketing.
+
+---
+
+They worked only on backend development.
+
+### --feedback--
+
+Linda says the team concentrated on design aspects and user experience, not backend development.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Used to` refers to actions or situations that were habitual or true in the past but are no longer the case. For example:
+
+`We used to have weekly team meetings, but now we meet monthly.` - This means it was the team's habit to meet more frequently in the past - once a week instead of once a month, as they do now.
+
+`Solely` means exclusively or only. It emphasizes that something was the only focus or priority. For example:
+
+`The company is solely focused on developing new technology.` - Meaning this is the **only** thing the company wants to concentrate its efforts on.
+
+In this sentence, Linda explains that the team previously focused only on design and user experience, with no consideration for other aspects like security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.66,
+      "finishTimestamp": 28.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
new file mode 100644
index 0000000000..ef0eec257a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
@@ -0,0 +1,90 @@
+---
+id: 67176c867303f30476f3d126
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (Audio) Linda: Yes, that's true. We used to focus solely on design aspects and user experience. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, that's true. We used to focus solely on design aspects and BLANK BLANK.`
+
+## --blanks--
+
+`user`
+
+### --feedback--
+
+This word refers to the person who interacts with a product or system.
+
+---
+
+`experience`
+
+### --feedback--
+
+This word refers to how a person feels when using a product or system.
+
+# --explanation--
+
+`User experience` (UX) refers to the overall experience a person has when interacting with a product, system, or service, including ease of use, satisfaction, and efficiency. For example:
+
+`Improving the user experience on our website increased customer satisfaction.` - This means that the look and feel of the site and how the user interacts to it was changed and this generated positive results.
+
+In this sentence, Linda mentions that the team used to focus on how users interacted with and felt about the design of their product.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.66,
+      "finishTimestamp": 28.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
new file mode 100644
index 0000000000..c48c4f5ffa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
@@ -0,0 +1,110 @@
+---
+id: 6717756d3483e6060d2cd800
+title: Task 63
+challengeType: 19
+dashedName: task-63
+---
+
+<!-- (Audio) Linda: Did you use to check the updates for security vulnerabilities? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Linda asking in this question?
+
+## --answers--
+
+She is asking if security updates are currently being checked.
+
+### --feedback--
+
+Linda's question is about a past habit, not about the current practice.
+
+---
+
+She is asking if checking for security vulnerabilities was a regular practice in the past.
+
+---
+
+She is asking if security vulnerabilities are easy to fix.
+
+### --feedback--
+
+Linda's question is about whether they used to check for vulnerabilities, not their ease of fixing.
+
+---
+
+She is asking if vulnerabilities were ignored.
+
+### --feedback--
+
+Linda is asking if they regularly checked for vulnerabilities, not if they were ignored.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In the interrogative form, `used to` asks about past habits or routines that may no longer be true. The structure is: `Did` + subject + `use to` + base verb`?` For example:
+
+`Did you use to attend weekly meetings?` - You are asking if the other person normally attended the meetings.
+
+A `vulnerability` is a weakness or flaw that can be exploited, especially in the context of security. For example:
+
+`The team identified a vulnerability in the system that needed immediate attention.` - There was a weak spot in the system that had to be dealt with.
+
+In this sentence, Linda is asking if checking updates for security weaknesses was a regular part of their past process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.54,
+      "finishTimestamp": 31.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.24,
+      "dialogue": {
+        "text": "Did you use to check the updates for security vulnerabilities?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
new file mode 100644
index 0000000000..206292eda3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
@@ -0,0 +1,90 @@
+---
+id: 671775877ee558061e6eebf8
+title: Task 64
+challengeType: 22
+dashedName: task-64
+---
+
+<!-- (Audio) Jake: I did, but not always in real time. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I did, but not always in BLANK BLANK.`
+
+## --blanks--
+
+`real`
+
+### --feedback--
+
+This word refers to something happening in the actual moment it occurs.
+
+---
+
+`time`
+
+### --feedback--
+
+This word refers to the ongoing or current moment in which events happen.
+
+# --explanation--
+
+The phrase `in real time` refers to something happening immediately as events occur, without delay. It is often used in the context of monitoring, communication, or data processing. For example:
+
+`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates after the updates are applied.
+
+In Jake's sentence, he means that while he checked for security vulnerabilities, it wasn't always done immediately as the updates happened.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.9,
+      "finishTimestamp": 34.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "I did, but not always in real time.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
new file mode 100644
index 0000000000..10f827b127
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
@@ -0,0 +1,106 @@
+---
+id: 671775a360c128062f906b24
+title: Task 65
+challengeType: 19
+dashedName: task-65
+---
+
+<!-- (Audio) Jake: Sometimes I was checking them a day later, which wasn't ideal. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Jake think about checking the updates a day later?
+
+## --answers--
+
+He thought it wasn't ideal.
+
+---
+
+He thought it was the best solution.
+
+### --feedback--
+
+Jake explicitly says it wasn't ideal.
+
+---
+
+He didn't think it was a problem.
+
+### --feedback--
+
+Jake's comment shows that he recognized it wasn't an ideal approach.
+
+---
+
+He thought it was impossible.
+
+### --feedback--
+
+Jake mentions that he did check them a day later, but it wasn't ideal.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Which` is a relative pronoun used to provide additional information about something mentioned earlier in the sentence. In this case, `which` refers to the entire idea of checking the updates a day later and clarifies that it wasn't ideal. For example:
+
+`She missed the deadline, which caused a delay in the project.` - Here, `which` refers to `missing the deadline` and explains the resulting delay.
+
+Similarly, Jake uses `which` to express that checking updates a day later wasn't the best practice.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.78,
+      "finishTimestamp": 38.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.74,
+      "dialogue": {
+        "text": "Sometimes I was checking them a day later, which wasn't ideal.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
new file mode 100644
index 0000000000..6e0e6ecb27
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
@@ -0,0 +1,82 @@
+---
+id: 671775bb104def063ffbdaab
+title: Task 66
+challengeType: 22
+dashedName: task-66
+---
+
+<!-- (Audio) Linda: I remember there was a week when we were all working overtime. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I remember there was a week when we were all working BLANK.`
+
+## --blanks--
+
+`overtime`
+
+### --feedback--
+
+This word refers to working beyond the regular hours.
+
+# --explanation--
+
+`To work overtime` means to work extra hours beyond the standard schedule, often to meet deadlines or complete urgent tasks. For example:
+
+`The team had to work overtime to finish the project before the deadline.` - Meaning you had to work extra hours to complete the project in order to meet the deadline.
+
+In this sentence, Linda is recalling a specific week when everyone had to put in extra hours to meet the demands of their work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 42.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "I remember there was a week when we were all working overtime.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
new file mode 100644
index 0000000000..aa3b704542
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
@@ -0,0 +1,94 @@
+---
+id: 671775db2ecd44064fdb1f04
+title: Task 67
+challengeType: 22
+dashedName: task-67
+---
+
+<!-- (Audio) Linda: You were fixing a security issue, weren't you? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`You were fixing a security issue, BLANK you?`
+
+## --blanks--
+
+`weren't`
+
+### --feedback--
+
+This word is part of a tag question using the auxiliary verb for the `Past Continuous`. It is used to confirm or seek agreement about something.
+
+# --explanation--
+
+`Tag questions` are short questions added to the end of a statement to confirm information or seek agreement. The structure depends on the main sentence:
+
+If the main sentence is positive, the tag is negative. For example:
+
+`You were working late, weren't you?` - You want to confirm if the other person was working late - you believe they were.
+
+If the main sentence is negative, the tag is positive. For Example:
+
+`You weren't at the meeting, were you?` - You want to confirm if the person did not attend the meeting - you believe they didn't.
+
+In this sentence, Linda uses the tag question `weren't you?` to confirm if Jake was fixing a security issue, because she thinks he was.
+
+A `security issue` refers to a problem or vulnerability that could compromise the safety or protection of a system, data, or user. For example:
+
+`The team addressed a security issue that allowed unauthorized access.` - meaning the team had to deal with a problem in security that was giving access to people without the proper authorization.
+
+In this context, Linda is asking about Jake's work on a specific problem related to security because she vividly remembers that was what was happening at the time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.2,
+      "finishTimestamp": 44.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "You were fixing a security issue, weren't you?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
new file mode 100644
index 0000000000..22334a1aa5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
@@ -0,0 +1,94 @@
+---
+id: 671775f2f55c4c066193a1c1
+title: Task 68
+challengeType: 19
+dashedName: task-68
+---
+
+<!-- (Audio) Linda: You were fixing a security issue, weren't you? --> 
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake tell Linda that was precisely what was happening at that time?
+
+## --answers--
+
+`Exactly.`
+
+---
+
+`I think so.`
+
+### --feedback--
+
+This answer means you agree with the other person, you believe they are right, but you are not sure of it.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Exactly` is used to confirm or strongly agree with something someone else has said. It indicates that the statement is fully correct. For example:
+
+Person 1: `Did you mean we should start testing today?`
+
+Person 2: `Exactly.` - meaning you are sure the tests should start today.
+
+In this context, Jake could say `Exactly` to confirm that he was indeed fixing a security issue back then as Linda mentioned.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.2,
+      "finishTimestamp": 44.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "You were fixing a security issue, weren't you?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
new file mode 100644
index 0000000000..357f3e67bc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
@@ -0,0 +1,94 @@
+---
+id: 6717760c06f5e10671ef0268
+title: Task 69
+challengeType: 22
+dashedName: task-69
+---
+
+<!-- (Audio) Jake: Exactly. There was a major vulnerability that needed immediate action. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Exactly. There was a major BLANK that needed BLANK action.`
+
+## --blanks--
+
+`vulnerability`
+
+### --feedback--
+
+This word refers to a weakness or flaw in a system that could be exploited.
+
+---
+
+`immediate`
+
+### --feedback--
+
+This word refers to something happening right away.
+
+# --explanation--
+
+A `major vulnerability` is a significant weakness or flaw in a system that could lead to serious consequences if exploited. It usually requires urgent attention to protect the system or data. For example:
+
+`The team discovered a major vulnerability in the software that could allow unauthorized access.` - This means the weakness was a serious one.
+
+`Immediate action` refers to steps that must be taken right away to address a pressing issue or problem. For example:
+
+`When the server crashed, the team took immediate action to restore functionality.` - This means the team acted as fast as they could to restore the server's functionality.
+
+In this dialogue, Jake explains that the vulnerability was serious enough to require urgent measures to prevent potential risks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.68,
+      "finishTimestamp": 48.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5,
+      "dialogue": {
+        "text": "Exactly. There was a major vulnerability that needed immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
new file mode 100644
index 0000000000..e3aa46bac9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
@@ -0,0 +1,106 @@
+---
+id: 6717b543037e030fc7008aa7
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- (Audio) Jake: While I was addressing that, the team was waiting for my green light to proceed. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`While I BLANK BLANK that, the team BLANK BLANK for my green light to proceed.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`addressing`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It means to deal with or resolve something.
+
+---
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular third-person form.
+
+---
+
+`waiting`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It means to remain ready or expect something.
+
+# --explanation--
+
+The verb `address` in this context means to deal with or resolve an issue or problem. Jake was focusing on resolving the matter while the team waited for his approval. For example:
+
+`The manager addressed the client's concerns during the meeting.` - Here, `addressed` refers to taking action to deal with the client's concerns.
+
+In the sentence, Jake uses the `Past Continuous` (`was addressing`) to describe the ongoing action of resolving the issue while another ongoing action (`the team was waiting`) happened simultaneously.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.78,
+      "finishTimestamp": 52.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
new file mode 100644
index 0000000000..eb1a5ee7c8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
@@ -0,0 +1,106 @@
+---
+id: 6717b55fb3b4160fd757b7af
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- (Audio) Jake: While I was addressing that, the team was waiting for my green light to proceed. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was the team waiting for in order to resume their work?
+
+## --answers--
+
+They were waiting for Jake to fix everything.
+
+### --feedback--
+
+While Jake was resolving an issue, the team was specifically waiting for his green light, or permission, to continue.
+
+---
+
+They were waiting for new instructions.
+
+### --feedback--
+
+Jake's sentence focuses on the team waiting for his approval, not new instructions.
+
+---
+
+They were waiting for the system to restart.
+
+### --feedback--
+
+Jake doesn't mention the system restarting. The team was waiting for his permission.
+
+---
+
+They were waiting for Jake's permission or authorization.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Green light` in this context means approval or permission to start or continue an activity. It is often used figuratively to represent a signal to proceed. For example:
+
+`The manager gave the green light to launch the new product.` - Meaning the manager authorized the launch.
+
+In this sentence, Jake explains that the team was waiting for his permission to resume their work while he was resolving an issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.78,
+      "finishTimestamp": 52.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
new file mode 100644
index 0000000000..e1147fd638
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
@@ -0,0 +1,82 @@
+---
+id: 6717b5754dcaae0fe7bb179b
+title: Task 72
+challengeType: 22
+dashedName: task-72
+---
+
+<!-- (Audio) Linda: It was quite a learning curve for us. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It was BLANK a learning curve for us.`
+
+## --blanks--
+
+`quite`
+
+### --feedback--
+
+This word is used to emphasize the degree or extent of something.
+
+# --explanation--
+
+`Quite` is used in this context to emphasize the significant degree or extent of the learning curve. It adds intensity, suggesting that the learning experience was challenging or noteworthy. For example:
+
+`The project was quite a success, exceeding all expectations.` - Here, `quite` highlights the extent of the project's success.
+
+In Linda's sentence, it emphasizes that the learning curve was substantial for the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 52.72,
+      "finishTimestamp": 54.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.04,
+      "dialogue": {
+        "text": "It was quite a learning curve for us.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
new file mode 100644
index 0000000000..0fd27a8fee
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
@@ -0,0 +1,106 @@
+---
+id: 6717b59830cdb50ff9f67623
+title: Task 73
+challengeType: 19
+dashedName: task-73
+---
+
+<!-- (Audio) Linda: It was quite a learning curve for us. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Linda think about working with the security aspects of the project?
+
+## --answers--
+
+She thought it was easy and required no learning.
+
+### --feedback--
+
+A `learning curve` implies there were challenges and a need to learn new things, not ease.
+
+---
+
+She thought it was unnecessary to work on security aspects.
+
+### --feedback--
+
+Linda's comment suggests that working on security aspects was a valuable learning experience, not unnecessary.
+
+---
+
+She thought it was a challenging but educational experience.
+
+---
+
+She thought it was unrelated to the project.
+
+### --feedback--
+
+Linda's comment directly relates to the team's work on security aspects, describing it as a significant learning experience.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Learning curve` refers to the time, effort, and challenges involved in gaining knowledge or mastering a new skill. For example:
+
+`Switching to the new software was a steep learning curve for the employees.` - This implies the employees had a lot of difficulty learning how to operate the new software.
+
+In this context, Linda is describing how working with security aspects required the team to learn and adapt, and that they possibly faced some difficulties along the way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 52.72,
+      "finishTimestamp": 54.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.04,
+      "dialogue": {
+        "text": "It was quite a learning curve for us.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
new file mode 100644
index 0000000000..9f42eb53c5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
@@ -0,0 +1,94 @@
+---
+id: 6717b5b2b0c1d21009b2b0fd
+title: Task 74
+challengeType: 22
+dashedName: task-74
+---
+
+<!-- (Audio) Linda: We didn't use to integrate security and design as much as we should. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We BLANK BLANK to integrate security and design as much as we should.`
+
+## --blanks--
+
+`didn't`
+
+### --feedback--
+
+This is the auxiliary verb of the simple tenses in the negative form. It shows that the action this was not a habit in the past.
+
+---
+
+`use`
+
+### --feedback--
+
+This is the base form of the verb used for past habits, not conjugated in its past form here, because the auxiliary verb `didn't` carries the past tense.
+
+# --explanation--
+
+In negative sentences with `used to`, the auxiliary verb `didn't` is used to indicate the past, and the main verb `use` remains in its base form (not conjugated).
+
+This structure emphasizes that an action was not habitual or common in the past.
+
+**Important:** The auxiliary verb `didn't` makes the sentence negative. The verb `use` stays in its base form because the past tense is already conveyed by `didn't`. For example:
+
+`We didn't use to have weekly meetings, but now we do.` - This means weekly meetings were not common back then.
+
+In Linda's sentence, she is saying that integrating security and design was not a regular practice in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 55.04,
+      "finishTimestamp": 58.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "We didn't use to integrate security and design as much as we should.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
new file mode 100644
index 0000000000..54d37c3598
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
@@ -0,0 +1,96 @@
+---
+id: 6717b5c73e81e8101bed0ea2
+title: Task 75
+challengeType: 19
+dashedName: task-75
+---
+
+<!-- (Audio) Linda: We didn't use to integrate security and design as much as we should. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake tell Linda he agrees with what she is saying?
+
+## --answers--
+
+`Nonsense.`
+
+### --feedback--
+
+When you use `nonsense` to reply to a comment, it is because you do not believe it is true or deserves credit.
+
+---
+
+`Agreed.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Agreed` is a concise way to express strong agreement with someone's statement. It is the opposite of the expression `Nonsense.`
+
+`Agreed` is often used in professional or conversational contexts to show alignment with what has been said. For Example:
+
+Person 1: `We should prioritize user feedback in our next update.`
+
+Person 2: `Agreed.` - This answer implies you strongly agree with prioritizing used feedback on the next update.
+
+In this context, Jake could use `Agreed` to acknowledge that he fully supports Linda's statement about the lack of integration between security and design in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 55.04,
+      "finishTimestamp": 58.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "We didn't use to integrate security and design as much as we should.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
new file mode 100644
index 0000000000..499bfc59aa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
@@ -0,0 +1,103 @@
+---
+id: 6717b5dc5fd2c0102b2aacec
+title: Task 76
+challengeType: 22
+dashedName: task-76
+---
+
+<!-- (Audio) Jake: Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Agreed. Moving BLANK, we should BLANK that security checks are happening while the design updates are being made.`
+
+## --blanks--
+
+`forward`
+
+### --feedback--
+
+This phrase refers to looking or planning ahead into the future.
+
+---
+
+`ensure`
+
+### --feedback--
+
+This word means to make certain or guarantee that something happens.
+
+# --explanation--
+
+`Moving forward` means looking ahead or planning for the future. It emphasizes taking steps or making changes from this point onward. For example:
+
+`Moving forward, the team will prioritize communication to avoid delays.` - This means that prioritizing communication is something that will start being done from now on.
+
+`Ensure` means to make certain or guarantee that something happens as intended. It is often used when setting priorities or responsibilities. For example:
+
+`We need to ensure that all employees are aware of the new guidelines.` - This means we should pay attention to the fact the employees know what the new guidelines are.
+
+In this context, Jake is emphasizing the importance of planning for the future by guaranteeing that security checks align with design updates.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 58.6,
+      "finishTimestamp": 65.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.5,
+      "dialogue": {
+        "text": "Agreed. Moving forward, we should ensure that security checks are happening",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.4,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "while the design updates are being made.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
new file mode 100644
index 0000000000..6fe4927f8b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
@@ -0,0 +1,115 @@
+---
+id: 6717b5f5be4456103b8ff767
+title: Task 77
+challengeType: 19
+dashedName: task-77
+---
+
+<!-- (Audio) Jake: Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does Jake think security checks should happen?
+
+## --answers--
+
+They should happen before the design updates are made.
+
+### --feedback--
+
+Jake specifically mentions that security checks should occur simultaneously with the design updates.
+
+---
+
+They should happen after the design updates are complete.
+
+### --feedback--
+
+Jake's statement indicates the checks should happen during, not after, the updates.
+
+---
+
+They don't need to happen at all.
+
+### --feedback--
+
+Jake is stressing the importance of security checks during the design updates.
+
+---
+
+They should happen while the design updates are being made.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The `Present Continuous` tense is used here to describe two ongoing actions happening at the same time: `security checks are happening` and `design updates are being made`. This emphasizes simultaneous activities. For example:
+
+`The team is testing the new feature while the developers are fixing bugs.` - This means the tests and the process of bug fixing are happening at the same time.
+
+This tense is often used to indicate that two events are occurring at the same time, creating a sense of coordination or overlap in actions. In Jake's statement, he stresses the importance of ensuring that both actions occur simultaneously.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 58.6,
+      "finishTimestamp": 65.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.5,
+      "dialogue": {
+        "text": "Agreed. Moving forward, we should ensure that security checks are happening",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.4,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "while the design updates are being made.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
new file mode 100644
index 0000000000..202142b8fe
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
@@ -0,0 +1,90 @@
+---
+id: 6717b611f1230c104cbf5d38
+title: Task 78
+challengeType: 22
+dashedName: task-78
+---
+
+<!-- (Audio) Jake: We can't afford to overlook this aspect again. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We BLANK BLANK to overlook this aspect again.`
+
+## --blanks--
+
+`can't`
+
+### --feedback--
+
+This word indicates inability or prohibition.
+
+---
+
+`afford`
+
+### --feedback--
+
+This word means to have the resources, time, or capacity to do something.
+
+# --explanation--
+
+`Can't afford` means that something is not feasible or permissible, often due to resource, time, or risk constraints. It emphasizes the necessity of avoiding a specific action or making a particular choice. For example:
+
+`We can't afford to miss the deadline for this project.` - This means that missing the deadline is not something we can do.
+
+In this context, Jake is emphasizing the critical importance of not ignoring this aspect in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 65.16,
+      "finishTimestamp": 67.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.78,
+      "dialogue": {
+        "text": "We can't afford to overlook this aspect again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
new file mode 100644
index 0000000000..9158491d15
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
@@ -0,0 +1,106 @@
+---
+id: 6717b6a5308335105c51cfe6
+title: Task 79
+challengeType: 19
+dashedName: task-79
+---
+
+<!-- (Audio) Jake: We can't afford to overlook this aspect again. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What, in Jake's opinion, can't they afford to do anymore?
+
+## --answers--
+
+They can't afford to prioritize this aspect.
+
+### --feedback--
+
+Jake's concern is about not ignoring the aspect, not about prioritizing it.
+
+---
+
+They can't afford to overlook this aspect again.
+
+---
+
+They can't afford to discuss this aspect.
+
+### --feedback--
+
+Jake is emphasizing the need to address this aspect, not avoid discussing it.
+
+---
+
+They can't afford to remember this aspect.
+
+### --feedback--
+
+Jake is referring to the danger of overlooking or ignoring this aspect, not about remembering it.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The verb `overlook` means to fail to notice or consider something important, often unintentionally. For example:
+
+`The team overlooked a critical error in the report, causing delays.` - Here, `overlooked` refers to failing to notice an error that had significant consequences.
+
+In this context, Jake is stressing that ignoring or neglecting this aspect would be a mistake.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 65.16,
+      "finishTimestamp": 67.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.78,
+      "dialogue": {
+        "text": "We can't afford to overlook this aspect again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
new file mode 100644
index 0000000000..a42f03be45
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
@@ -0,0 +1,68 @@
+---
+id: 671d19c62da85c0982472a57
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+# --instructions--
+
+This is a review of the entire dialogue you just studied.
+
+Place the following phrases in the correct spot: `major vulnerability`, `security vulnerabilities`, `real time`, `learning curve`, `working overtime`,  and `quick post-mortem`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Linda and Jake discuss their design project experience. First, Linda suggests they do a BLANK to review what went well and what didn't. Jake admits to reviewing BLANK, though not always in BLANK.`
+
+`Linda recalls a time when the whole team was BLANK, and Jake was addressing a BLANK that required immediate attention. Both agree that the project was a BLANK, teaching them the importance of integrating security into the design process.`
+
+## --blanks--
+
+`quick post-mortem`
+
+### --feedback--
+
+It's a review done after a project to reflect on successes and challenges.
+
+---
+
+`security vulnerabilities`
+
+### --feedback--
+
+Those are weaknesses that could expose the system to threats.
+
+---
+
+`real time`
+
+### --feedback--
+
+It means checking things as they happen, without delay.
+
+---
+
+`working overtime`
+
+### --feedback--
+
+It refers to putting in extra hours to meet project needs.
+
+---
+
+`major vulnerability`
+
+### --feedback--
+
+It's a critical issue that requires immediate attention to avoid risks.
+
+---
+
+`learning curve`
+
+### --feedback--
+
+It represents the time and effort needed to master something new.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
new file mode 100644
index 0000000000..4cddc1fac3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f358f62320b707af87f
+title: Task 81
+challengeType: 19
+dashedName: task-81
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What is the main point of the blog post?
+
+## --answers--
+
+The team learned the importance of addressing security issues during design updates.
+
+---
+
+The team completed their project ahead of time.
+
+### --feedback--
+
+The text mentions that the team faced delays and challenges, not early completion.
+
+---
+
+The team avoided overtime by planning well.
+
+### --feedback--
+
+The text clearly states that the team had to work overtime to address a security problem.
+
+---
+
+The team decided to postpone security checks until after the project.
+
+### --feedback--
+
+The lesson learned was to check for security issues during design, not afterward.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the entire text. The main idea of the post is learning from mistakes and improving processes.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
new file mode 100644
index 0000000000..7c0d24843a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f5590e7110b82940771
+title: Task 82
+challengeType: 19
+dashedName: task-82
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+Why did the team work overtime?
+
+## --answers--
+
+They wanted to impress the client by finishing early.
+
+### --feedback--
+
+The overtime was due to a security issue, not to finish early.
+
+---
+
+They needed more time to improve user feedback.
+
+### --feedback--
+
+The text does not mention overtime related to user feedback.
+
+---
+
+They found a serious security problem that needed to be fixed immediately.
+
+---
+
+They worked late to complete documentation.
+
+### --feedback--
+
+The text focuses on fixing security issues, not documentation.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Focus on the paragraph that starts with `Last week, our team had to…`. This explains why the team worked late.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
new file mode 100644
index 0000000000..773c16a6b0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f7ca5f2aa0bb63b9e22
+title: Task 83
+challengeType: 19
+dashedName: task-83
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What did the team learn from working overtime?
+
+## --answers--
+
+They learned to ignore minor bugs until the end of the project.
+
+### --feedback--
+
+The lesson was about addressing security issues promptly, not ignoring problems.
+
+---
+
+They learned to address security issues during design updates.
+
+---
+
+They found that working late is the best way to solve issues.
+
+### --feedback--
+
+The text emphasizes learning better practices, not relying on overtime work.
+
+---
+
+They realized that delays in security checks are acceptable.
+
+### --feedback--
+
+The text teaches the opposite: to stay on top of things and not fall behind.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `We now know that we need to…`. This teaches the main lesson: integrating security checks during design updates.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
new file mode 100644
index 0000000000..823679eb59
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f94461c820bc68e3694
+title: Task 84
+challengeType: 19
+dashedName: task-84
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+Who was responsible for security?
+
+## --answers--
+
+Linda
+
+### --feedback--
+
+Linda is mentioned in the dialogue but isn't responsible for security.
+
+---
+
+Jake
+
+---
+
+The entire team
+
+### --feedback--
+
+The text specifically mentions that someone handles security.
+
+---
+
+A third-party consultant
+
+### --feedback--
+
+There is no mention of a consultant handling security in the text.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `Jake, who handles…`. This identifies him as the person responsible for security.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
new file mode 100644
index 0000000000..a3c58c5cc3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
@@ -0,0 +1,62 @@
+---
+id: 671d1fab38a4710bd7a6b9c0
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What lesson did the team take from the experience?
+
+## --answers--
+
+They decided to delay updates to reduce workload.
+
+### --feedback--
+
+The text emphasizes staying on top of things, not postponing updates.
+
+---
+
+They found that security issues aren't very important.
+
+### --feedback--
+
+The text highlights the importance of security, not downplaying it.
+
+---
+
+They decided to avoid security checks in future projects.
+
+### --feedback--
+
+The lesson was to integrate security checks into the design process, not avoid them.
+
+---
+
+They learned to stay on top of things and not fall behind.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Focus on the sentence that starts with `This experience taught us…`. This highlights the overall takeaway about staying on top of tasks.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
new file mode 100644
index 0000000000..9c0c877d80
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
@@ -0,0 +1,196 @@
+---
+id: 671d292ef6180210164c33e8
+title: "Dialogue 3: Tech Conference Experience"
+challengeType: 21
+dashedName: dialogue-3-tech-conference-experience
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video
+
+# --scene--
+
+```json
+{
+"setup": {
+ "background": "cafe.png",
+ "characters": [
+   {
+     "character": "Maria",
+     "position": { "x": -25, "y": 0, "z": 1 }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 }
+   }
+ ],
+ "audio": {
+   "filename": "B1_2-3.mp3",
+   "startTime": 1
+ },
+ "alwaysShowDialogue": true
+},
+"commands": [
+ {
+   "character": "Maria",
+   "position": { "x": 25, "y": 0, "z": 1 },
+   "startTime": 0
+ },
+ {
+   "character": "Brian",
+   "position": { "x": 70, "y": 0, "z": 1 },
+   "startTime": 0.5
+ },
+ {
+   "character": "Maria",
+   "startTime": 1,
+   "finishTime": 4.38,
+   "dialogue": {
+     "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 4.64,
+   "finishTime": 7.68,
+   "dialogue": {
+     "text": "Wow, Maria. So nice to see you. Let's catch up.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 7.74,
+   "finishTime": 10.86,
+   "dialogue": {
+     "text": "I attended some really interesting sessions these last few days.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 11.28,
+   "finishTime": 14.56,
+   "dialogue": {
+     "text": "Yeah, me too. I checked out the latest in Python development.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 14.9,
+   "finishTime": 18.1,
+   "dialogue": {
+     "text": "Do you remember how we used to get excited about new tech back at work?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 18.74,
+   "finishTime": 23.24,
+   "dialogue": {
+     "text": "Absolutely. We used to spend our lunch breaks chatting about the newest trends in programming.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 23.84,
+   "finishTime": 25.74,
+   "dialogue": {
+     "text": "Did you go to the AI workshop yesterday?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 25.74,
+   "finishTime": 31.16,
+   "dialogue": {
+     "text": "Yes, I did. While the speaker was going through neural networks, I thought about our project last year.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 31.62,
+   "finishTime": 35.4,
+   "dialogue": {
+     "text": "I remember you would often stay late, fine-tuning the code until it was just right.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 36.72,
+   "finishTime": 40.24,
+   "dialogue": {
+     "text": "Now I take care of the training so that others can do the same.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 40.74,
+   "finishTime": 44.66,
+   "dialogue": {
+     "text": "Speaking of which, did you manage to catch the cyber security talk this morning?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 45.16,
+   "finishTime": 47.6,
+   "dialogue": {
+     "text": "I missed it. I was in a design sprint workshop.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 48.04,
+   "finishTime": 50.66,
+   "dialogue": {
+     "text": "We brainstormed for two hours straight. How was it?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 50.66,
+   "finishTime": 54.2,
+   "dialogue": {
+     "text": "It was eye-opening, especially the parts about protecting data.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 54.54,
+   "finishTime": 58.28,
+   "dialogue": {
+     "text": "It made me think of how we handled security in our earlier projects.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "position": { "x": 125, "y": 0, "z": 1 },
+   "startTime": 58.78
+ },
+ {
+   "character": "Maria",
+   "position": { "x": -25, "y": 0, "z": 1 },
+   "startTime": 59.28
+ }
+]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
new file mode 100644
index 0000000000..b449610707
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
@@ -0,0 +1,94 @@
+---
+id: 671f7579f5e0000560fcce55
+title: Task 86
+challengeType: 22
+dashedName: task-86
+---
+
+<!-- (Audio) Maria: Brian, is that you? What a surprise to see you here at PyCon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Brian, is that you? BLANK BLANK surprise to see you here at PyCon.`
+
+## --blanks--
+
+`What`
+
+### --feedback--
+
+This word is used as an intensifier to express strong emotion or emphasis.
+
+---
+
+`a`
+
+### --feedback--
+
+This is the indefinite article used with singular, countable nouns following `what` to enhance the expression.
+
+# --explanation--
+
+The structure `what` + an indefinite article is used to emphasize strong feelings or reactions about something. It often expresses surprise, admiration, or emotion. For example:
+
+`What a beautiful day it is!` - Here, the structure highlights the speaker's admiration for the day.
+
+Similarly, in Maria's sentence, `What a surprise` emphasizes her astonishment at seeing Brian at PyCon.
+
+`PyCon` is a well-known conference for Python programming enthusiasts, developers, and professionals. It provides a platform for learning, networking, and sharing Python-related knowledge.  For example:
+
+`I attended PyCon last year and learned about the latest Python frameworks.` - This means the person was at PyCon last year and learned a lot.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.56,
+      "finishTimestamp": 3.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
new file mode 100644
index 0000000000..3b03739af2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
@@ -0,0 +1,90 @@
+---
+id: 671f7592e571ad05716b2c67
+title: Task 87
+challengeType: 19
+dashedName: task-87
+---
+
+<!-- (Audio) Maria: Brian, is that you? What a surprise to see you here at PyCon! -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Brian wants to keep the conversation flowing. What should he say next?
+
+## --answers--
+
+`Sorry Maria, I'm running late for my talk. Let's meet later.`
+
+### --feedback--
+
+While it suggests politeness, it doesn't match the friendly and enthusiastic tone of the original answer.
+
+---
+
+`Wow Maria! So nice to see you. Let's catch up.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In the dialogue, Brian responds with excitement and friendliness.
+
+The correct answer reflects his positive attitude with phrases like `So nice to see you` and `Let's catch up`, which align with the original conversation's tone.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.56,
+      "finishTimestamp": 3.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
new file mode 100644
index 0000000000..c3ebc93249
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
@@ -0,0 +1,84 @@
+---
+id: 671f75ab41a1520581f5923a
+title: Task 88
+challengeType: 22
+dashedName: task-88
+---
+
+<!-- (Audio) Brian: Wow Maria! So nice to see you. Let's catch up. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Wow Maria! So nice to see you. Let's BLANK up.`
+
+## --blanks--
+
+`catch`
+
+### --feedback--
+
+Combined with the following word, it's a phrase that Brian uses to suggest talking with Maria about what they've both been up to recently.
+
+# --explanation--
+
+`Catch up` means to meet and update each other on recent events or activities after some time apart. For examples:
+
+- `She stayed late to catch up on her tasks.` - Meaning she worked longer to finish tasks she was behind on.
+
+- `Let's catch up during the meeting tomorrow.` - Meaning you and the other person can talk and update each other at the meeting.
+
+In this context, Brian is telling Maria that they should talk to each other to know what they've been doing.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.2,
+      "finishTimestamp": 7.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Wow, Maria. So nice to see you. Let's catch up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
new file mode 100644
index 0000000000..66fec57d96
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
@@ -0,0 +1,104 @@
+---
+id: 671f75ca1748e8059234fa3d
+title: Task 89
+challengeType: 19
+dashedName: task-89
+---
+
+<!-- (Audio) Brian: I attended some really interesting sessions these last few days. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has Brian been doing at PyCon?
+
+## --answers--
+
+He has been organizing the sessions.
+
+### --feedback--
+
+Brian says he attended the sessions, not that he organized them.
+
+---
+
+He has been attending some interesting sessions.
+
+---
+
+He has been presenting at the sessions.
+
+### --feedback--
+
+Brian talks about attending sessions, not presenting them.
+
+---
+
+He has been networking with other attendees.
+
+### --feedback--
+
+While Brian might have been networking, his statement is specifically about attending sessions.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To `attend sessions` means to participate in organized events, such as talks, discussions, or meetings, often as an audience member. It typically refers to events at conferences, workshops, or professional gatherings. For example:
+
+`She attended several training sessions as part of her trainee program.` - Here, she took in a training because this is part of the trainee program.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.3,
+      "finishTimestamp": 10.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "I attended some really interesting sessions these last few days.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
new file mode 100644
index 0000000000..f9e82f1d83
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
@@ -0,0 +1,94 @@
+---
+id: 671f75e368cbd505a301ca7d
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: I attended some really interesting sessions these last few days. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Maria succinctly tell Brian she attended some sessions at PyCon as well?
+
+## --answers--
+
+`Yeah, me too.`
+
+---
+
+`Why not?`
+
+### --feedback--
+
+`Why not?` doesn't indicate agreement or a shared experience.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Me too` is used to express agreement or show that the same statement applies to the speaker. It is a concise and informal way to respond to shared experiences or feelings.  For example:
+
+Person 1: `I love Python programming.`
+
+Person 2: `Me too.`  - Meaning they love programming in Python as well.
+
+In this context, Maria could say `Yeah, me too` to quickly let Brian know that she also attended really interesting sessions at PyCon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.3,
+      "finishTimestamp": 10.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "I attended some really interesting sessions these last few days.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
new file mode 100644
index 0000000000..f20217b44d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
@@ -0,0 +1,94 @@
+---
+id: 671f75fea017ea05b31a80c6
+title: Task 91
+challengeType: 22
+dashedName: task-91
+---
+
+<!-- (Audio) Maria: Yeah, me too. I checked out the latest in Python development. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yeah, me too. I BLANK out the BLANK in Python development.`
+
+## --blanks--
+
+`checked`
+
+### --feedback--
+
+This is the past tense of the verb `check`, meaning to examine or explore something.
+
+---
+
+`latest`
+
+### --feedback--
+
+This word refers to the most recent or up-to-date version of something.
+
+# --explanation--
+
+`Check out` means to examine, explore, or take a look at something. It is often used informally when discussing things of interest. For example:
+
+`I checked out the new library in town.` - This means you went to the new library to see if you liked it.
+
+`Latest` refers to the most recent or up-to-date version of something. For example:
+
+`They announced the latest features in the software update.` - This means the most recent features of the software were announced by the team or company.
+
+In her sentence, Maria says she attended events where the most recent developments in Python were discussed during her time at PyCon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.74,
+      "finishTimestamp": 14.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "Yeah, me too. I checked out the latest in Python development.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
new file mode 100644
index 0000000000..204772e6e1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
@@ -0,0 +1,108 @@
+---
+id: 671f761703824805c35c2eda
+title: Task 92
+challengeType: 19
+dashedName: task-92
+---
+
+<!-- (Audio) Maria: Do you remember how we used to get excited about new tech back at work? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Maria asking Brian about?
+
+## --answers--
+
+She is asking if he still gets excited about technology.
+
+### --feedback--
+
+Maria is referring to how they used to feel in the past, not the present.
+
+---
+
+She is asking if they used to dislike new technology.
+
+### --feedback--
+
+Maria mentions getting excited about new technology, not disliking it.
+
+---
+
+She is asking if he remembers how they used to feel excited about new technology at work.
+
+---
+
+She is asking if he remembers the latest tech updates.
+
+### --feedback--
+
+Maria's focus is on their shared feelings about new technology in the past, not current updates.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The phrase created by using `get` followed by an adjective describes a change of state or becoming a certain way. For example:
+
+- `They always get excited when a new Python update is released.` - `Get excited` means to become enthusiastic or thrilled. This means they are always filled with enthusiasm when a new Python update comes up.
+
+- `He got tired after working on the project all night.` - This means he wasn't tired before, but he is tired now, after a whole night of working on the project.
+
+In Maria's sentence, she is asking if Brian remembers the enthusiasm they used to feel about new technologies while working together.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.46,
+      "finishTimestamp": 17.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.2,
+      "dialogue": {
+        "text": "Do you remember how we used to get excited about new tech back at work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
new file mode 100644
index 0000000000..08bdc903c8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
@@ -0,0 +1,94 @@
+---
+id: 671f765a22e32e05d4f5074e
+title: Task 93
+challengeType: 19
+dashedName: task-93
+---
+
+<!-- (Audio) Maria: Do you remember how we used to get excited about new tech back at work? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Brian tell Maria he definitely remembers the excitement about new tech Maria mentioned?
+
+## --answers--
+
+`Absolutely.`
+
+---
+
+`I vaguely remember.`
+
+### --feedback--
+
+`I vaguely remember` means that something is not very vivid in the speaker's memory.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The word `Absolutely` is used to express strong agreement or affirmation. It is often used in response to a statement or question to emphasize certainty or enthusiasm. For example:
+
+Person 1: `Do you think this approach will work?`
+
+Person 2: `Absolutely!` - This means you are sure the approach will be successful.
+
+In this context, Brian could say `Absolutely` to enthusiastically confirm that he remembers getting excited about new technology at work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.46,
+      "finishTimestamp": 17.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.2,
+      "dialogue": {
+        "text": "Do you remember how we used to get excited about new tech back at work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
new file mode 100644
index 0000000000..6096e864af
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
@@ -0,0 +1,103 @@
+---
+id: 671f76959b3ca3060eddbe70
+title: Task 94
+challengeType: 22
+dashedName: task-94
+---
+
+<!-- (Audio) Brian: Absolutely. We used to spend our lunch breaks chatting about the newest trends in programming. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. We used to spend our lunch breaks BLANK about the newest BLANK in programming.`
+
+## --blanks--
+
+`chatting`
+
+### --feedback--
+
+This word means talking informally with others, often in a relaxed or casual way.
+
+---
+
+`trends`
+
+### --feedback--
+
+This word refers to general directions or popular developments in a particular field.
+
+# --explanation--
+
+`Chat` means to talk informally, usually in a relaxed or casual setting. It often refers to light or friendly conversations. For example:
+
+`We chatted about our plans for the weekend during the coffee break.` - Meaning they talked about the plans.
+
+A `trend` refers to a general direction in which something is developing or becoming popular. In the context of programming, it refers to popular technologies or approaches. For example:
+
+`The trend of using AI in everyday applications is growing rapidly.` - This means the general idea is to start using AI in the creation of commonly used applications.
+
+In this sentence, Brian talks about how they used to have informal conversations (`chatting`) about new and popular developments (`trends`) in programming during lunch breaks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.1,
+      "finishTimestamp": 22.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.46,
+      "dialogue": {
+        "text": "Absolutely. We used to spend our lunch breaks",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.46,
+      "finishTime": 5.7,
+      "dialogue": {
+        "text": "chatting about the newest trends in programming.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
new file mode 100644
index 0000000000..846743c10c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
@@ -0,0 +1,138 @@
+---
+id: 671f76b915c1cf062570fdfc
+title: Task 95
+challengeType: 19
+dashedName: task-95
+---
+
+<!-- (Audio) Brian: Did you go to the AI workshop yesterday? Maria: Yes, I did. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which workshop can we be sure Maria attended yesterday?
+
+## --answers--
+
+The Python workshop.
+
+### --feedback--
+
+Maria specifically confirms attending the AI workshop, not the Python workshop.
+
+---
+
+The AI workshop.
+
+---
+
+The cybersecurity workshop.
+
+### --feedback--
+
+Maria attended the AI workshop, as confirmed in her response.
+
+---
+
+The design workshop.
+
+### --feedback--
+
+Maria explicitly says she attended the AI workshop, not the design workshop.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+AI stands for `Artificial Intelligence`, a field of computer science that focuses on creating systems capable of performing tasks that typically require human intelligence, such as learning, reasoning, and decision-making. For example:
+
+`AI is being used to improve natural language processing in chatbots.` - This means that Artificial Intelligence is used to help chatbots communicate in a more efficient way with humans.
+
+An `AI workshop` is a session or event where participants learn about AI concepts, tools, or applications. These workshops often include hands-on activities to help attendees understand and implement AI technologies. For example:
+
+`The AI workshop covered topics like machine learning and neural networks.` - This means the AI workshop taught machine learning and neural networks.
+
+In this dialog, Maria confirms that she attended an AI workshop yesterday.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.3,
+      "finishTimestamp": 26.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3,
+      "dialogue": {
+        "text": "Did you go to the AI workshop yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3
+    },
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 3
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "Yes, I did.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
new file mode 100644
index 0000000000..c741f69cbb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
@@ -0,0 +1,103 @@
+---
+id: 671f76d4b7384c063c097048
+title: Task 96
+challengeType: 22
+dashedName: task-96
+---
+
+<!-- (Audio) Maria: While the speaker was going through neural networks, I thought about our project last year. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`While the speaker was BLANK BLANK neural networks, I thought about our project last year.`
+
+## --blanks--
+
+`going`
+
+### --feedback--
+
+This verb is used as part of the phrasal verb `go through`, meaning to review or explain something in detail. Use it in the `-ing` form.
+
+---
+
+`through`
+
+### --feedback--
+
+This preposition is part of the phrasal verb `go through`, referring to a detailed explanation or review.
+
+# --explanation--
+
+To `go through` means to review, explain, or examine something in detail. It is often used when covering material in a structured or methodical way. For example:
+
+`The instructor went through the project requirements step by step.` - This means the instructor checked the requirements in a detailed manner.
+
+`Neural networks` are a type of artificial intelligence inspired by the structure and function of the human brain. For example:
+
+`The AI model uses neural networks to classify images with high accuracy.` - This means the AI model uses this structure based on the human brain to process data.
+
+In this sentence, Maria describes how the speaker was explaining neural networks during the workshop, prompting her to think about a past project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.66,
+      "finishTimestamp": 30.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "While the speaker was going through neural networks,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3.48,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "I thought about our project last year.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
new file mode 100644
index 0000000000..e8e9fd0725
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
@@ -0,0 +1,91 @@
+---
+id: 671f76eede9f200652954940
+title: Task 97
+challengeType: 22
+dashedName: task-97
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I remember you would often stay late, BLANK the code until it was just right.`
+
+## --blanks--
+
+`fine-tuning`
+
+### --feedback--
+
+This is a compound word that refers to making small adjustments to improve something or make it perfect. remember to use `-`
+
+# --explanation--
+
+`Fine-tuning` means making small, precise adjustments to improve something or optimize it to achieve the desired result. It is often used in technical or creative contexts. For example:
+
+`She spent hours fine-tuning the presentation to ensure it was perfect for the audience.` - This means she adjusted even the smallest details of the presentation to make it perfect.
+
+In this sentence, Maria describes how Brian would carefully adjust the code, making it as efficient or correct as possible.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 34.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "fine-tuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
new file mode 100644
index 0000000000..581e026f56
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
@@ -0,0 +1,119 @@
+---
+id: 671f7708379ef00668b843d4
+title: Task 98
+challengeType: 19
+dashedName: task-98
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Did Brian use to work regular hours to adjust the code?
+
+## --answers--
+
+No, he would often stay late fine-tuning the code.
+
+---
+
+Yes, he only worked regular hours to adjust the code.
+
+### --feedback--
+
+Maria explicitly mentions that Brian would often stay late, which suggests he worked beyond regular hours.
+
+---
+
+No, he only adjusted the code during meetings.
+
+### --feedback--
+
+Maria describes Brian staying late to fine-tune the code, not working on it exclusively during meetings.
+
+---
+
+Yes, but only when there was an urgent task.
+
+### --feedback--
+
+Maria indicates that staying late was a regular habit for Brian, not something limited to urgent tasks.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Would` in this context expresses a habitual action or repeated behavior in the past. It is often used to describe actions that someone regularly performed, similar to `used to`.
+
+However, `would` focuses more on the action itself, while `used to` can describe states or habits. For example:
+
+- `She would always read a book before going to bed.` - Reading a book before going to bed was a common action for her.
+
+`She used to live in New York before moving here.` - here `used to` is used because living in a place expresses a state of things not an action or something you would habitually do.
+
+In this sentence, Maria uses `would` to describe Brian's repeated habit of staying late to fine-tune the code, which emphasizes his dedication.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 34.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "fine-tuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
new file mode 100644
index 0000000000..54d64453b8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
@@ -0,0 +1,143 @@
+---
+id: 671f7727d2e4240680c126bc
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. Brian: Now I take care of the training so that others can do the same. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Brian do now, and why does he do that?
+
+## --answers--
+
+He still fine-tunes the code himself, but not as often.
+
+### --feedback--
+
+Brian says he focuses on training others now, not doing the fine-tuning himself.
+
+---
+
+He takes care of hiring new team members for coding tasks.
+
+### --feedback--
+
+Brian mentions handling training, not hiring.
+
+---
+
+He reviews others' work without providing training.
+
+### --feedback--
+
+Brian emphasizes that he takes care of the training to help others learn.
+
+---
+
+He takes care of the training so that others can stay late to fine-tune the code.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The phrase `so that` is used to express purpose or reason, showing why an action is done. For example:
+
+`She explained the process clearly so that everyone could understand it.` - This means her intent with explaining the process clearly was to make everyone understand it.
+
+In the dialog, Brian uses it to show that his goal in providing training is to empower others to perform at the same level as he did when he fine-tuned the code himself.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 39.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "finetuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.64
+    },
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 5.64
+    },
+    {
+      "character": "Brian",
+      "startTime": 6.3,
+      "finishTime": 9.82,
+      "dialogue": {
+        "text": "Now I take care of the training so that others can do the same.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 10.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
new file mode 100644
index 0000000000..bc15b04b00
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
@@ -0,0 +1,98 @@
+---
+id: 671f774373f2ce0696fe9621
+title: Task 100
+challengeType: 22
+dashedName: task-100
+---
+
+<!-- (Audio) Brian: Speaking of which, did you manage to catch the cybersecurity talk this morning? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Speaking of which, did you BLANK to catch the BLANK talk this morning?`
+
+## --blanks--
+
+`manage`
+
+### --feedback--
+
+This word means to succeed in doing something, often with some difficulty.
+
+---
+
+`cybersecurity`
+
+### --feedback--
+
+This word refers to the practice of protecting systems, networks, and data from digital threats.
+
+# --explanation--
+
+`Speaking of which` is used to link a new topic to something that was just mentioned, often as a natural transition in conversation. For example:
+
+`The keynote speaker mentioned Python. Speaking of which, have you tried the new Python library?` - here, `speaking of which` is used to make the transition between the mention the keynote speaker made and the new library.
+
+In this context, `manage` means to succeed in doing something, especially something that might have been difficult. For example:
+
+`Despite the time crunch, I managed to submit the report on time.` - This means you were successful in sending the report before your deadline.
+
+`Cybersecurity` refers to the practice of protecting computer systems, networks, and data from digital attacks or unauthorized access. For example:
+
+`The company invested in cybersecurity measures to prevent data breaches.` - This means the company is concerned with protecting their systems.
+
+In this sentence, Brian asks if Maria attended the talk about protecting systems and data from threats in the morning.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.1,
+      "finishTimestamp": 44.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.12,
+      "dialogue": {
+        "text": "Speaking of which, did you manage to catch the cybersecurity talk this morning?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
new file mode 100644
index 0000000000..5a12c90413
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
@@ -0,0 +1,110 @@
+---
+id: 671f7767854d6806ac4fb5f4
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- (Audio) Maria: I missed it. I was in a design sprint workshop. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why could Maria not attend the cybersecurity workshop in the morning?
+
+## --answers--
+
+Because she wasn't interested in the topic.
+
+### --feedback--
+
+Maria doesn't mention a lack of interest; she was in another workshop.
+
+---
+
+Because she forgot about it.
+
+### --feedback--
+
+Maria says she missed it because she was attending the design sprint workshop, not because she forgot.
+
+---
+
+Because she was in a design sprint workshop.
+
+---
+
+Because it was canceled.
+
+### --feedback--
+
+Maria explains that she missed the workshop because she was in another one, not because it was canceled.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Miss` means to fail to attend or participate in something. For example:
+
+`I missed the meeting because I was stuck in traffic.` - This means that you spent too long in traffic and this caused a delay to get to work.
+
+A `design sprint` is a time-boxed, collaborative process where a team works on solving a design problem or developing a prototype within a short period, usually a few days. For example:
+
+`The team completed a design sprint to test the new user interface concept.` This means the team participated in this collaborative process to test the concept.
+
+In this context, Maria couldn't attend the cybersecurity workshop because she was actively participating in a design sprint workshop.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.72,
+      "finishTimestamp": 47.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.44,
+      "dialogue": {
+        "text": "I missed it. I was in a design sprint workshop.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
new file mode 100644
index 0000000000..6836a92549
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
@@ -0,0 +1,114 @@
+---
+id: 671f77bfcd2bc306c2f6f338
+title: Task 102
+challengeType: 19
+dashedName: task-102
+---
+
+<!-- (Audio) Maria: We brainstormed for two hours straight. How was it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria say they did at the design sprint workshop?
+
+## --answers--
+
+They brainstormed for two hours straight.
+
+### --feedback--
+
+Maria explains that they spent two hours brainstorming during the design sprint workshop.
+
+---
+
+They worked individually for two hours straight.
+
+### --feedback--
+
+Maria mentions brainstorming, which is a collaborative activity, not individual work.
+
+---
+
+They completed the entire design in two hours straight.
+
+### --feedback--
+
+Maria says they brainstormed, not that they finished the entire design.
+
+---
+
+They took frequent breaks during their brainstorming.
+
+### --feedback--
+
+Maria emphasizes that they brainstormed for two hours without stopping.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To `brainstorm` means to generate ideas or solutions through an open, collaborative discussion, often in a group. It focuses on creativity and problem-solving. For example:
+
+`The team brainstormed ideas for the new marketing campaign.` - This means that the team collaboratively discussed new ideas together for the new marketing campaign.
+
+`Straight` in this context means continuously or without stopping. It emphasizes uninterrupted activity. For example:
+
+`He studied for five hours straight to prepare for the exam.` - This means he did not stop studying for five hours to prepare for the exam.
+
+In this sentence, Maria explains that they brainstormed for two continuous hours during the design sprint workshop.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 47.4,
+      "finishTimestamp": 50.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.82,
+      "dialogue": {
+        "text": "We brainstormed for two hours straight. How was it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
new file mode 100644
index 0000000000..32728be1ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
@@ -0,0 +1,92 @@
+---
+id: 671f77dedcc3b006dcfa9c73
+title: Task 103
+challengeType: 22
+dashedName: task-103
+---
+
+<!-- (Audio) Brian: It was eye-opening, especially the parts about protecting data. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It was BLANK, especially the parts about BLANK data.`
+
+## --blanks--
+
+`eye-opening`
+
+### --feedback--
+
+This word means enlightening or revealing, often leading to a new understanding or perspective. It's a composite word, so don't forget the hyphen between the words.
+
+---
+
+`protecting`
+
+### --feedback--
+
+This word is the `-ing` form of a verb used after the preposition `about`, referring to the act of safeguarding something.
+
+# --explanation--
+
+The term `eye-opening` describes something that is enlightening or surprising, often revealing new or unexpected information. For example:
+
+`The workshop on cybersecurity was eye-opening for the team.` - this means the workshop brought many new ideas and it helped the team understand a lot of things about cybersecurity.
+
+When a verb, like `to protect` follows a preposition, like `about`, it must be in the `-ing` form (gerund). This structure is common in English to describe actions connected to the preposition.  In the sentence, `about protecting` highlights the topic being discussed. For example:
+
+`She is interested in learning more about artificial intelligence.` - here, `in` is the preposition and `to learn` is the verb in the `-ing` form.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.22,
+      "finishTimestamp": 53.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It was eye-opening, especially the parts about protecting data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
new file mode 100644
index 0000000000..9b561ad71f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
@@ -0,0 +1,70 @@
+---
+id: 671f7800b5174406f2d0df76
+title: Task 106
+challengeType: 22
+dashedName: task-106
+---
+
+# --instructions--
+
+This is a review of the entire dialogue you just studied.
+
+Place the following phrases in the correct spot:
+
+`design sprint workshop`, `neural networks`, `AI workshop`, `cybersecurity talk`, `fine-tuning the code`, and `newest trends in programming`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Maria and Brian meet at PyCon and talk about their experiences at the conference. Maria mentions attending an BLANK, where she explored the BLANK. Brian recalls how they used to chat during lunch breaks about the BLANK.`
+
+`Maria also remembers a project from last year and how Brian spent time BLANK. Brian, who now focuses on training, asks if Maria attended the BLANK, but she missed it because she was busy in a BLANK.`
+
+## --blanks--
+
+`AI workshop`
+
+### --feedback--
+
+Maria participated in this workshop yesterday.
+
+---
+
+`neural networks`
+
+### --feedback--
+
+This topic is part of a workshop that Maria references. It deals with systems modeled after the human brain to process data.
+
+---
+
+`newest trends in programming`
+
+### --feedback--
+
+They used to enjoy conversations about the latest technologies and developments in the programming world.
+
+---
+
+`fine-tuning the code`
+
+### --feedback--
+
+This phrase refers to making small adjustments to ensure the code works perfectly, which Maria recalls Brian often doing.
+
+---
+
+`cybersecurity talk`
+
+### --feedback--
+
+This talk focused on data protection, a topic that Brian found insightful.
+
+---
+
+`design sprint workshop`
+
+### --feedback--
+
+This type of session involves rapid brainstorming and problem-solving activities, which Maria mentions participating in for two hours.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
new file mode 100644
index 0000000000..3ce7f61d20
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
@@ -0,0 +1,62 @@
+---
+id: 671f78193bb0510709b169b8
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What was Maria and Brian's dream years ago?
+
+## --answers--
+
+To work on AI projects together.
+
+### --feedback--
+
+Their dream involved attending an event, not a specific project focus.
+
+---
+
+To attend one of the biggest tech conferences, PyCon.
+
+---
+
+To become senior developers in their office.
+
+### --feedback--
+
+The text describes them as junior developers with a different goal in mind.
+
+---
+
+To start their own tech company.
+
+### --feedback--
+
+The dream mentioned is related to attending a tech conference, not starting a business.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `Years ago, Maria and Brian…`. This sentence explains Maria and Brian's goal when they were junior developers, sitting in their office and dreaming about the future.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
new file mode 100644
index 0000000000..41e895640e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
@@ -0,0 +1,62 @@
+---
+id: 671f7834b9a323071f7a325e
+title: Task 108
+challengeType: 19
+dashedName: task-108
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+How did Maria and Brian feel about programming trends when they were junior developers?
+
+## --answers--
+
+They were uninterested in programming trends.
+
+### --feedback--
+
+The text suggests they felt quite the opposite about programming trends.
+
+---
+
+They preferred only to work on established technologies.
+
+### --feedback--
+
+The text indicates that they were enthusiastic about new trends, not sticking solely to established tech.
+
+---
+
+They ignored new trends to focus on their work.
+
+### --feedback--
+
+Ignoring trends doesn't align with the text's description of their excitement.
+
+---
+
+They were excited about every new programming trend.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Focus on the sentence that starts with `Back then, they were junior developers…`. This sentence provides insight into how Maria and Brian felt about new programming trends early in their careers.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
new file mode 100644
index 0000000000..ae445d6343
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
@@ -0,0 +1,62 @@
+---
+id: 671f7852f3a7e80737cc21d0
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What sessions are Maria and Brian attending at PyCon?
+
+## --answers--
+
+Sessions on programming languages and web design.
+
+### --feedback--
+
+The text gives different examples of the session topics they attended.
+
+---
+
+Sessions on Python basics and data entry.
+
+### --feedback--
+
+The topics mentioned in the text are not related to basic or introductory subjects.
+
+---
+
+Sessions on AI and cybersecurity.
+
+---
+
+Sessions on project management and networking.
+
+### --feedback--
+
+The focus of the sessions mentioned in the text is more technical and specific.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Focus on the sentence that starts with `Fast forward to today…`. This sentence lists the sessions that Maria and Brian are attending at PyCon, reflecting their current interests.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
new file mode 100644
index 0000000000..a0728b6376
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
@@ -0,0 +1,62 @@
+---
+id: 671f786a18c275074d55d298
+title: Task 110
+challengeType: 19
+dashedName: task-110
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What does the text mean when it says, `Their dream is no longer just a dream—it's real`?
+
+## --answers--
+
+They are dreaming of attending PyCon in the future.
+
+### --feedback--
+
+The text indicates that they have already realized their dream, not just planned it.
+
+---
+
+Maria and Brian are finally attending PyCon, making their dream come true.
+
+---
+
+They forgot about PyCon over the years.
+
+### --feedback--
+
+The text shows that they kept their goal of attending PyCon, without forgetting it.
+
+---
+
+They are planning to attend PyCon next year.
+
+### --feedback--
+
+The text indicates they are already attending, not planning for a future event.
+
+## --video-solution--
+
+2
+
+# --explanation
+
+Focus on the sentence that starts with `Their dream is no longer just a dream…`. This sentence tells us that Maria and Brian are now living the dream they once envisioned.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
new file mode 100644
index 0000000000..5602c903a3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
@@ -0,0 +1,62 @@
+---
+id: 671f788c2665b807636b31a8
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+Why is attending PyCon significant for Maria and Brian?
+
+## --answers--
+
+It fulfills a long-held goal they had since they were junior developers.
+
+---
+
+It's their first time working on a new tech project together.
+
+### --feedback--
+
+The text doesn't mention a new project at PyCon, but rather that attending the conference fulfills a past goal.
+
+---
+
+It allowed them to meet their favorite tech influencers.
+
+### --feedback--
+
+The text emphasizes achieving a personal dream, not meeting influencers.
+
+---
+
+It gave them a chance to launch their own product.
+
+### --feedback--
+
+There is no mention of a product launch; the significance lies in achieving their goal of attending PyCon.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the sentence that starts with `They promised they would…`. This sentence shows that attending PyCon was their goal, making it significant as it fulfills a long-held promise.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
new file mode 100644
index 0000000000..74eebec915
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
@@ -0,0 +1,108 @@
+---
+id: 6746005e0cf96b701d861793
+title: Task 29
+challengeType: 19
+dashedName: task-29
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --description--
+
+Listen to the audio and answer the question.
+
+# --questions--
+
+## --text--
+
+What is Lisa asking James about?
+
+## --answers--
+
+She's asking if it took too long to find the bug.
+
+### --feedback--
+
+Lisa is not asking about how long it took. She just wants to know if it was stressful.
+
+---
+
+She's trying to confirm if finding the bug was a stressful task.
+
+---
+
+She's asking if James was the one who didn't update the credentials.
+
+### --feedback--
+
+Lisa is not trying to know who's responsible for it.
+
+---
+
+She's asking if there is anything she can do to help.
+
+### --feedback--
+
+Help is no longer necessary, since James has already fixed the problem.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The word `stressful` describes situations or events that cause stress, tension, or anxiety. It is often used to talk about experiences that are challenging or demanding. For example:
+
+- `The deadline was stressful because we had so much work to do.` - Meaning they felt a lot of stress due to the deadline.
+
+- `Presenting to a large audience can be stressful.` - Meaning you can be feel really anxious when you present in front of an audience.
+
+In this question, Lisa is asking James if fixing the issue with the app and the credentials was a stressful experience for him.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
new file mode 100644
index 0000000000..a4abb17b7f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
@@ -0,0 +1,80 @@
+---
+id: 674604ef287b978febd50bc9
+title: Task 30
+challengeType: 22
+dashedName: task-30
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Wasn't it stressful BLANK?`
+
+## --blanks--
+
+`though`
+
+### --feedback--
+
+This word is used to add emphasis or to show a contrast or unexpected outcome.
+
+# --explanation--
+
+`Though` is often used at the end of a sentence to add emphasis or to show a contrast with what was previously said or implied. In this context, Lisa is emphasizing her surprise or curiosity about whether James found the situation stressful despite his success. For example:
+
+`The presentation went well, though it was stressful at first.` - Here, `though` highlights the contrast between the overall success and the initial stress.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
new file mode 100644
index 0000000000..447b174c6e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
@@ -0,0 +1,86 @@
+---
+id: 674605049656269110601a79
+title: Task 31
+challengeType: 22
+dashedName: task-31
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --description--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK it stressful though?`
+
+## --blanks--
+
+`Wasn't`
+
+### --feedback--
+
+This is singular form of the verb `to be` in the Simple Past, but in the negative form. Do not forget to capitalize it.
+
+# --explanation--
+
+In negative questions with the verb `to be` in the Simple Past, use the structure **Wasn't/Weren't + subject + complement?**
+
+This structure is often used to confirm something or to express surprise or doubt. For example:
+
+- `Wasn't she at the meeting yesterday?` - You are not only asking about her being at the meeting, you are trying to confirm it because you think she was.
+
+- `Weren't they informed about the changes?` - You are trying to confirm if they were informed or not.
+
+In Lisa's question, `Wasn't it stressful though?`, she is asking James to confirm if the situation was stressful, possibly expecting that it might have been.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
new file mode 100644
index 0000000000..46c87a9f37
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
@@ -0,0 +1,110 @@
+---
+id: 674609a92ccf079d86cd81db
+title: Task 32
+challengeType: 22
+dashedName: task-32
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? James: A bit, but solving problems like these is what makes our job interesting, right? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`A BLANK, but solving problems like these is what makes our job interesting, right?`
+
+## --blanks--
+
+`bit`
+
+### --feedback--
+
+This phrase is used to indicate a small amount or degree.
+
+# --explanation--
+
+`A bit` is used to indicate a small amount or degree of something. For Example:
+
+`I was a bit tired after the long day.` - Here, `a bit` emphasizes that the speaker was slightly tired, but it wasn't extreme.
+
+This phrase is commonly used in informal contexts to soften statements or describe minor degrees of feelings or situations. In this dialog, James is admitting that the situation was slightly stressful but not overwhelming.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 41.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.56
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.56
+    },
+    {
+      "character": "James",
+      "startTime": 2.78,
+      "finishTime": 7.06,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
new file mode 100644
index 0000000000..830a85712b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
@@ -0,0 +1,95 @@
+---
+id: 67460b84234b70a4772d2094
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- (Audio) James: A bit, but solving problems like these is what makes our job interesting, right? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Lisa confirm in a single word and enthusiastically that she agrees with what James just said?
+
+## --answers--
+
+`Absolutely!`
+
+---
+
+`Objection!`
+
+### --feedback--
+
+`Objection` is normally used in court when an attorney says they disagree with what has been said or proposed by another attorney. It expresses disagreement, not agreement.
+
+## --video-solution--
+
+1
+
+
+# --explanation--
+
+`Absolutely` is used to express complete agreement or certainty. It is often used in informal or conversational contexts to emphasize strong agreement.  For example:
+
+Person 1: `Do you think we should move forward with this plan?`
+
+Person 2: `Absolutely!` -  Here, `Absolutely` shows that the speaker is fully in favor of the plan and has no doubts.
+
+In this dialog, Lisa is strongly agreeing with James's point about their job being interesting because of the challenges they solve.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.18,
+      "finishTimestamp": 41.66
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
new file mode 100644
index 0000000000..8b47e1f3a6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
@@ -0,0 +1,136 @@
+---
+id: 67461094ba7296b13c1bb045
+title: Task 34
+challengeType: 19
+dashedName: task-34
+---
+
+<!-- (Audio) James: A bit, but solving problems like these is what makes our job interesting, right? Lisa: Absolutely. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa mean?
+
+## --answers--
+
+She completely agrees with James.
+
+---
+
+She partially agrees with James.
+
+### --feedback--
+
+`Absolutely` indicates full agreement, not partial agreement.
+
+---
+
+She is not sure she understands what James is trying to say.
+
+### --feedback--
+
+`Absolutely` shows Lisa is confident and fully agrees with James.
+
+---
+
+She disagrees with James.
+
+### --feedback--
+
+`Absolutely` is a clear expression of agreement, not disagreement.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Absolutely` is used to express complete agreement or certainty. For example:
+
+Person 1: `Do you think this solution will work?`
+
+Person 2: `Absolutely!` - Meaning that you are entirely confident and supportive of the solution.
+
+In this dialog, Lisa, thus, is showing James she fully agrees with what he said.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.18,
+      "finishTimestamp": 42.82
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.75
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 5.75
+    },
+    {
+      "character": "Lisa",
+      "startTime": 6.02,
+      "finishTime": 6.62,
+      "dialogue": {
+        "text": "Absolutely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 7.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
new file mode 100644
index 0000000000..21f30fadda
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
@@ -0,0 +1,86 @@
+---
+id: 674612ab7e6b0ab83408262a
+title: Task 35
+challengeType: 22
+dashedName: task-35
+---
+
+<!-- (Audio) Lisa: Thanks for handling it, James. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks for BLANK it, James.`
+
+## --blanks--
+
+`handling`
+
+### --feedback--
+
+This word means taking care of or managing something. Use it in the `-ing` form.
+
+# --explanation--
+
+`Handle` in this context means to take care of or manage a task, issue, or responsibility. For example:
+
+ `He handled the situation professionally.` - Meaning he took care of the problem as a professional.
+
+When a verb follows a preposition, like `for`, it is used in the `-ing` form. For example:
+
+`She apologized for being late.` - The preposition `for` is followed by `being` in the -ing form.
+
+In the sentence, Lisa is thanking James for managing or solving the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 43.04,
+      "finishTimestamp": 44.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.54,
+      "dialogue": {
+        "text": "Thanks for handling it, James.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
new file mode 100644
index 0000000000..5ecbaf5e72
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
@@ -0,0 +1,110 @@
+---
+id: 674616565854f7c788740cee
+title: Task 36
+challengeType: 19
+dashedName: task-36
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+She wants to know why James was debugging.
+
+### --feedback--
+
+Lisa's question isn't about the reason for debugging; it's about whether other issues came up during that time.
+
+---
+
+She wants to know when James started debugging.
+
+### --feedback--
+
+Lisa's question focuses on what else happened during debugging, not the timing.
+
+---
+
+She wants to know if any other issues appeared while James was debugging.
+
+---
+
+She wants to know if debugging is finished.
+
+### --feedback--
+
+Lisa's question is about what happened during debugging, not whether it is finished.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In this question, Lisa uses the `Simple Past` and the `Past Continuous` to ask about two actions that occurred in the past.
+
+`Did anything else come up` describes a completed action or event that may have occurred at some point during the debugging process. (`Simple Past`)
+
+`While you were debugging`  describes an ongoing activity in the past during which the event in the Simple Past could have happened. (`Past Continuous`) For example:
+
+`Did anyone call while you were working on the report?` - here, the `Simple Past` tense  asks about a specific event, while the `Past Continuous` provides the background activity during which the event could have happened.
+
+This combination is used to show the occurrence of an event in the middle of another, longer one, or simultaneous longer actions happening in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
new file mode 100644
index 0000000000..4eedb646ec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
@@ -0,0 +1,94 @@
+---
+id: 674619b6699a06d064c9717f
+title: Task 37
+challengeType: 22
+dashedName: task-37
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Did anything else BLANK up while you were BLANK?`
+
+## --blanks--
+
+`come`
+
+### --feedback--
+
+Followed by `up` in this phrase, it means to arise or appear unexpectedly.
+
+---
+
+`debugging`
+
+### --feedback--
+
+This word refers to identifying and fixing errors or issues in code. Use the `-ing` form.
+
+# --explanation--
+
+`Come up` means to arise, appear, or occur unexpectedly. For example:
+
+`Something important came up during the meeting, and we had to address it immediately.` - Meaning something occurred during the meeting that needed immediate attention.
+
+`Debugging` refers to the process of identifying and resolving errors or issues in code. For example:
+
+`The team spent hours debugging the software before the release.` - Meaning they spent a long time identifying and solving these errors.
+
+Lisa's question asks if any other unexpected issues could be seen during the process of fixing code errors.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
new file mode 100644
index 0000000000..ded0a6c923
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
@@ -0,0 +1,89 @@
+---
+id: 67461c06865e13d715967f1d
+title: Task 38
+challengeType: 22
+dashedName: task-38
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Did BLANK else come up while you were debugging?`
+
+## --blanks--
+
+`anything`
+
+### --feedback--
+
+This word is used in questions to ask if something occurred or existed.
+
+# --explanation--
+
+`Anything` is used in questions to ask if something happened, existed, or was present. It is neutral and does not assume the existence of anything specific. For example:
+
+`Did anything unusual happen during the test?` - Meaning you are asking about unusual events that could be found during the test.
+
+In affirmative sentences, use `something` to indicate the existence of a thing. For example:
+
+`Something interesting happened during the meeting.` - Meaning a different thing than the usual happened.
+
+In negative sentences, use `anything` to indicate that no thing occurred or existed. For example:
+
+`I didn't see anything unusual in the report.` - meaning there were no surprises in the report.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
new file mode 100644
index 0000000000..a2526df227
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
@@ -0,0 +1,142 @@
+---
+id: 675060b39af6ab3f14f394e2
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? James: Not really. Everything else was running smoothly once the database issue was fixed. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does James mean by his answer?
+
+## --answers--
+
+He means several major issues appeared after fixing the database.
+
+### --feedback--
+
+James says, `Not really`, meaning there were no significant issues after the database was fixed.
+
+---
+
+He means the database issue is still unresolved.
+
+### --feedback--
+
+James mentions that the database issue was fixed and everything else was running smoothly afterwards.
+
+---
+
+He means debugging was stressful the whole time.
+
+### --feedback--
+
+James mentions that things ran smoothly once the database issue was resolved, implying the stress decreased.
+
+---
+
+He means there were no significant issues after fixing the database.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+James means that the situation improved right after the database issue was resolved. He uses `Not really` to indicate that no major issues occurred, though there may have been minor or insignificant ones. This phrase is often used to soften a negative response. For example:
+
+Person 1: `Did you enjoy the movie?`
+
+Person 2: `Not really. It was too slow.` - This means you did not like the movie much.
+
+`Smoothly` is an adverb meaning without problems or interruptions. While `smoothly` (adverb) describes how an action is performed, `smooth` (adjective) describes a state or quality. For example:
+
+`The meeting went smoothly after everyone arrived on time.` - This means everything was ok at the meeting.
+
+`The surface of the table is smooth.` - Meaning there were no inconsistencies in the surface.
+
+`Once` means the same as `as soon as` or `after`, indicating that everything ran smoothly after the database was fixed. For example: - `Once the updates were installed, the system worked perfectly.` (this means that the system worked after the updates were installed)
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.12,
+      "finishTimestamp": 51.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.7,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.94
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.94
+    },
+    {
+      "character": "James",
+      "startTime": 3.18,
+      "finishTime": 7.48,
+      "dialogue": {
+        "text": "Not really. Everything else was running smoothly once the database issue was fixed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
new file mode 100644
index 0000000000..410a3459d8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
@@ -0,0 +1,88 @@
+---
+id: 6750651aafcea04c6958a4e5
+title: Task 40
+challengeType: 22
+dashedName: task-40
+---
+
+<!-- (Audio) James: Everything else was running smoothly once the database issue was fixed. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Everything else BLANK running smoothly once the database issue was fixed.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This word is the singular form of the verb `to be` in the Simple Past, used with subjects like `everything`, `something`, `anything`, and `nothing`.
+
+# --explanation--
+
+Words like `everything`, `something`, `anything`, and `nothing` are indefinite pronouns that take singular verbs, even though they may refer to multiple items or concepts. For example:
+
+- `Everything was ready for the presentation.` - `Everything` refers to all things and requires a singular verb.
+
+- `Something is wrong with the code.` - `Something` refers to an unspecified thing and takes a singular verb.
+
+- `Is anything missing from the report?` - `Anything` refers to any one thing in a general sense and uses a singular verb.
+
+- `Nothing was found in the logs.`  - `Nothing` refers to the absence of things and requires a singular verb)
+
+In the sentence `Everything else was running smoothly`, you use `was` because `everything` is treated as singular, even though it refers to multiple elements.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.3,
+      "finishTimestamp": 51.6
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "Everything else was running smoothly once the database issue was fixed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
new file mode 100644
index 0000000000..1919acb2f2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
@@ -0,0 +1,88 @@
+---
+id: 6750697ee8b87f5e665c0712
+title: Task 41
+challengeType: 22
+dashedName: task-41
+---
+
+<!-- (Audio) Lisa: Perfect. Let's make sure we double check credentials after security updates in the future. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Perfect. Let's make sure we BLANK BLANK credentials after security updates in the future.`
+
+## --blanks--
+
+`double`
+
+### --feedback--
+
+This word means to do something twice or with extra care.
+
+---
+
+`check`
+
+### --feedback--
+
+This word refers to verifying or confirming something.
+
+# --explanation--
+
+`Double check` means to verify something a second time to ensure it is correct or accurate. It is often used when dealing with important tasks to avoid errors.  For example:
+
+`We need to double check the calculations before submitting the report.` - Meaning you'd like to verify if the calculations are right once more before sending the report to those who will analyze it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.92,
+      "finishTimestamp": 56
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Perfect. Let's make sure we double check credentials after security updates in the future.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
new file mode 100644
index 0000000000..12e2fbef9c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
@@ -0,0 +1,92 @@
+---
+id: 675846ef3e2e50e95e99aded
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (Audio) Brian: It made me think of how we handled security in our earlier projects. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It made me think of how we BLANK security in our BLANK projects.`
+
+## --blanks--
+
+`handled`
+
+### --feedback--
+
+This word means to manage or deal with something. It's in its Simple Past form.
+
+---
+
+`earlier`
+
+### --feedback--
+
+This word means happening or existing before a certain point in time.
+
+# --explanation--
+
+`Handle` means to manage or deal with something, especially a task, problem, or responsibility. For example:
+
+`She handled the customer complaints with great professionalism.` - This means she was very professional when dealing with customers and their negative comments.
+
+`Earlier` means happening before a certain point in time. For example:
+
+`He referred to an earlier email to clarify the misunderstanding.` - This means he mentioned an email that was sent before to help everyone understand the case.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.1,
+      "finishTimestamp": 57.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.74,
+      "dialogue": {
+        "text": "It made me think of how we handled security in our earlier projects.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
new file mode 100644
index 0000000000..06f85c5338
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
@@ -0,0 +1,115 @@
+---
+id: 6758486d05a8fcf01a20c8b4
+title: Task 105
+challengeType: 19
+dashedName: task-105
+---
+
+<!-- (Audio) Brian: It was eye-opening, especially the parts about protecting data. It made me think of how we handled security in our earlier projects. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Brian think about the cybersecurity workshop?
+
+## --answers--
+
+He thought it didn't provide useful information.
+
+### --feedback--
+
+Brian mentions that the workshop made him think about past projects, indicating it had an impact.
+
+---
+
+He thought it made him reflect on how they handled security in earlier projects.
+
+---
+
+He thought it was unrelated to their previous work.
+
+### --feedback--
+
+Brian explicitly connects the workshop to how they handled security in earlier projects.
+
+---
+
+He thought it wasn't worth attending.
+
+### --feedback--
+
+Brian found the workshop impactful as it made him think about their past security practices.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Make` someone `think` means to prompt reflection or consideration about a particular topic or situation. It often refers to something that causes a person to evaluate or analyze an issue more deeply. For example:
+
+`The documentary made me think about how I can reduce my carbon footprint.` - This means that watching the documentary helped you think about how to pollute less.
+
+In this context, the cybersecurity workshop prompted Brian to reflect on how they managed security in their projects in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.22,
+      "finishTimestamp": 57.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It was eye-opening, especially the parts about protecting data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 4.88,
+      "finishTime": 8.62,
+      "dialogue": {
+        "text": "It made me think of how we handled security in our earlier projects.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 9.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
index 15c1ba625a..e00d5c279b 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
@@ -23,7 +23,7 @@ If the screen reader updates are completely finished.
 
 ### --feedback--
 
-Tom’s question is about an ongoing process, not whether the updates are fully completed.
+Tom's question is about an ongoing process, not whether the updates are fully completed.
 
 ---
 
@@ -31,7 +31,7 @@ If the screen reader updates have not started yet.
 
 ### --feedback--
 
-Tom’s question suggests that the updates have already started, not that they haven’t begun.
+Tom's question suggests that the updates have already started, not that they haven't begun.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
index 3569fd6722..18d3578908 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-6
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
index 5945848ef3..23fb1d4747 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-7
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I started a few months ago. BLANK been BLANK the BLANK from our last user BLANK. How’s the design side coming along?`
+`Yes, I started a few months ago. BLANK been BLANK the BLANK from our last user BLANK. How's the design side coming along?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
index e2089ae1fd..6d32c229cd 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-8
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
index 1ce1230835..265905054b 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-9
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the BLANK side BLANK?`
+`Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the BLANK side BLANK?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
index fadad1430c..1810c7563c 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-10
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 <!-- SPEAKING --> 
 
@@ -17,7 +17,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What’s the best answer to Sophie's question about the design side?
+What's the best answer to Sophie's question about the design side?
 
 ## --answers--
 
@@ -37,7 +37,7 @@ This response is unrelated to the design side and does not answer Sophie's quest
 
 # --explanation--
 
-Sophie's question `How’s the design side coming along?` asks about the progress of the design work. The best answer should provide a relevant update.
+Sophie's question `How's the design side coming along?` asks about the progress of the design work. The best answer should provide a relevant update.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
index c0067aa9a8..0c2d06bfe5 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
@@ -45,7 +45,7 @@ These are the rules or instructions that provide direction for how something sho
 
 To `tweak` means to make a slight adjustment or modification. For example:
 
-`The developer tweaked the code to improve the app’s performance.` - This means that the developer made small changes to the code to enhance how the app functions.
+`The developer tweaked the code to improve the app's performance.` - This means that the developer made small changes to the code to enhance how the app functions.
 
 `Layouts` are the arrangement or structure of elements on a page or interface. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
index 7044f32296..06f1d20511 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-13
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements? -->
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`That’s good to hear. Do you think the users BLANK BLANK the BLANK?`
+`That's good to hear. Do you think the users BLANK BLANK the BLANK?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
index d2bdf1a766..70d243060e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-15
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements? -->
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements? -->
 
 # --instructions--
 
@@ -23,7 +23,7 @@ If the users are happy with the design updates.
 
 ### --feedback--
 
-Sophie’s focus is on whether users have observed the improvements, not if they are happy with the design.
+Sophie's focus is on whether users have observed the improvements, not if they are happy with the design.
 
 ---
 
@@ -51,7 +51,7 @@ Sophie is interested in whether users have observed the improvements, not about
 
 # --explanation--
 
-Sophie’s question shows her curiosity about whether users are aware of the positive changes made to the product.
+Sophie's question shows her curiosity about whether users are aware of the positive changes made to the product.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
index c0ea97751c..8dd9370f36 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-16
 ---
 
-<!-- (audio) Tom: I think so. We haven’t been receiving as many negative comments. -->
+<!-- (audio) Tom: I think so. We haven't been receiving as many negative comments. -->
 
 # --instructions--
 
@@ -47,7 +47,7 @@ These are opinions or feedback shared by users, in the plural form.
 
 `Negative` refers to something unfavorable or critical. For example:
 
-`The user left a negative review about the app’s performance.` - Here, `negative` describes the unfavorable nature of the review.
+`The user left a negative review about the app's performance.` - Here, `negative` describes the unfavorable nature of the review.
 
 `Comment` is an opinion or piece of feedback provided by someone. Its plural form is `comments`. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
index 79715619a6..82f5580840 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
@@ -5,9 +5,9 @@ challengeType: 19
 dashedName: task-17
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements?
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements?
 
-Tom: I think so. We haven’t been receiving as many negative comments. -->
+Tom: I think so. We haven't been receiving as many negative comments. -->
 
 # --instructions--
 
@@ -17,7 +17,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-How does Tom respond to Sophie’s question about user feedback?
+How does Tom respond to Sophie's question about user feedback?
 
 ## --answers--
 
@@ -25,11 +25,11 @@ He says the users have noticed more negative comments.
 
 ### --feedback--
 
-Tom actually mentions that they haven’t been receiving as many negative comments.
+Tom actually mentions that they haven't been receiving as many negative comments.
 
 ---
 
-He says they haven’t been receiving as many negative comments.
+He says they haven't been receiving as many negative comments.
 
 ---
 
@@ -41,7 +41,7 @@ Tom does not specifically mention positive comments, only that the negative ones
 
 ---
 
-He says he’s waiting for more feedback.
+He says he's waiting for more feedback.
 
 ### --feedback--
 
@@ -53,7 +53,7 @@ Tom is talking about the current trend of fewer negative comments, not waiting f
 
 # --explanation--
 
-Tom's response, `We haven’t been receiving as many negative comments`, uses the `Present Perfect Continuous` in the negative form. This tense is formed by `haven’t/hasn’t + been + verb(-ing)` and is used to describe actions that have not been happening over a period of time. In this case, it shows that fewer negative comments have been received over time, indicating a possible improvement.
+Tom's response, `We haven't been receiving as many negative comments`, uses the `Present Perfect Continuous` in the negative form. This tense is formed by `haven't/hasn't + been + verb(-ing)` and is used to describe actions that have not been happening over a period of time. In this case, it shows that fewer negative comments have been received over time, indicating a possible improvement.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
index 9c830e0fb1..e9f3b3334e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-18
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -41,7 +41,7 @@ This refers to changes made to improve or adapt something. It's plural form.
 
 `Adjustments` means small changes made to improve or adapt something. For example,
 
-`We made adjustments to the app’s layout for better user experience.` - `Adjustments` refers to the changes made to improve how users interact with the app.
+`We made adjustments to the app's layout for better user experience.` - `Adjustments` refers to the changes made to improve how users interact with the app.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
index de3b5acf88..b89232b499 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-19
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Sophie does not express frustration. She mentions feeling relieved instead.
 
 # --explanation--
 
-Sophie’s use of `That’s a relief` indicates that she feels better or more comfortable about the progress being made, rather than feeling worried, confused, or frustrated.
+Sophie's use of `That's a relief` indicates that she feels better or more comfortable about the progress being made, rather than feeling worried, confused, or frustrated.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
index f58008dac2..37fd99a4a2 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-20
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Sophie is not asking about the effectiveness of the adjustments.
 
 # --explanation--
 
-Sophie’s question shows that she is trying to understand the time required to continue making changes, focusing on the duration rather than the reasons or results.
+Sophie's question shows that she is trying to understand the time required to continue making changes, focusing on the duration rather than the reasons or results.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
index 69f47f8b11..dd24f2e8df 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-21
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
index 81b269862a..c97d340ce0 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-22
 ---
 
-<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes. -->
+<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Probably a few more weeks. We've been making steady BLANK, and I believe we’re close to BLANK the major changes.`
+`Probably a few more weeks. We've been making steady BLANK, and I believe we're close to BLANK the major changes.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
index 325b688496..307efe14aa 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-23
 ---
 
-<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes. -->
+<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes. -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Tom estimates that they will need only a few more weeks, not several months.
 
 # --explanation--
 
-Tom’s statement indicates that the team has been working consistently and expects to complete the changes in a few more weeks.
+Tom's statement indicates that the team has been working consistently and expects to complete the changes in a few more weeks.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
index 7e6517f365..dae8e6a5b1 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-24
 ---
 
-<!-- (audio) Sophie: That’s good news! It feels great to make our app more accessible. -->
+<!-- (audio) Sophie: That's good news! It feels great to make our app more accessible. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`That’s good news! It feels great to make our app more BLANK.`
+`That's good news! It feels great to make our app more BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
index ce5bea3758..efbd0d94eb 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-25
 ---
 
-<!-- (audio) Sophie: That’s good news! It feels great to make our app more accessible. -->
+<!-- (audio) Sophie: That's good news! It feels great to make our app more accessible. -->
 
 # --instructions--
 
@@ -23,7 +23,7 @@ She is happy about making the app look more colorful.
 
 ### --feedback--
 
-No, `accessible` doesn’t refer to colors or design aesthetics. It means making the app easier for all users, including those with different needs, to use.
+No, `accessible` doesn't refer to colors or design aesthetics. It means making the app easier for all users, including those with different needs, to use.
 
 ---
 
@@ -31,7 +31,7 @@ She is pleased that the app is becoming easier for everyone to use, including us
 
 ---
 
-She thinks the app’s loading speed has improved significantly.
+She thinks the app's loading speed has improved significantly.
 
 ### --feedback--
 
@@ -51,7 +51,7 @@ Sophie is focused on making the app easier to use for all, which is what `access
 
 # --explanation--
 
-When Sophie says `It feels great to make our app more accessible`, she’s emphasizing the importance of making the app easier to use for all users, regardless of their abilities. Being `accessible` or `accessibility` aims to ensure that everyone, including people with disabilities, can interact with the app effectively.
+When Sophie says `It feels great to make our app more accessible`, she's emphasizing the importance of making the app easier to use for all users, regardless of their abilities. Being `accessible` or `accessibility` aims to ensure that everyone, including people with disabilities, can interact with the app effectively.
 
 
 # --scene--
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
index 26be04f9f2..efdc7a460f 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
@@ -33,7 +33,7 @@ An app introduces a new payment gateway to make transactions faster.
 
 ### --feedback--
 
-While this improves functionality, it doesn’t relate to making the app accessible to users with different needs.
+While this improves functionality, it doesn't relate to making the app accessible to users with different needs.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
index d8fb122995..fe84c41c8a 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
@@ -13,7 +13,7 @@ This is a review of the entire dialogue you just studied.
 
 # --instructions--
 
-Place the following phrases in the correct spot: `negative comments`, `been addressing`, `That’s a relief`, `more accessible`, and `keep making adjustments`.
+Place the following phrases in the correct spot: `negative comments`, `been addressing`, `That's a relief`, `more accessible`, and `keep making adjustments`.
 
 # --fillInTheBlank--
 
@@ -21,19 +21,19 @@ Place the following phrases in the correct spot: `negative comments`, `been addr
 
 `Tom: Hey Sophie, have you been working on the screen reader updates recently?`
 
-`Sophie: Yes, I started a few months ago. We've BLANK the feedback from our last user survey. How’s the design side coming along?`
+`Sophie: Yes, I started a few months ago. We've BLANK the feedback from our last user survey. How's the design side coming along?`
 
 `Tom: Pretty well, actually. I've been tweaking the layouts based on the guidelines you shared.`
 
-`Sophie: That’s good to hear. Do you think the users have noticed the improvements?`
+`Sophie: That's good to hear. Do you think the users have noticed the improvements?`
 
-`Tom: I think so. We haven’t been receiving as many BLANK.`
+`Tom: I think so. We haven't been receiving as many BLANK.`
 
-`Sophie: BLANK. How long do you think we’ll need to BLANK?`
+`Sophie: BLANK. How long do you think we'll need to BLANK?`
 
-`Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes.`
+`Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes.`
 
-`Sophie: That’s good news! It feels great to make our app BLANK.`
+`Sophie: That's good news! It feels great to make our app BLANK.`
 
 ## --blanks--
 
@@ -53,7 +53,7 @@ This phrase refers to unfavorable feedback from users.
 
 ---
 
-`That’s a relief`
+`That's a relief`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
index 6eef5b864b..3bbf0ae579 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
@@ -19,9 +19,9 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
 What changes have Tom and Sophie made to help screen readers?
 
@@ -47,7 +47,7 @@ The focus is on making the app easier to use with screen readers, not on speed.
 
 ---
 
-They changed the app’s language settings.
+They changed the app's language settings.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
index fb59495032..57aa5bd1c9 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What was Tom’s main role in improving screen reader compatibility?
+What was Tom's main role in improving screen reader compatibility?
 
 ## --answers--
 
@@ -31,11 +31,11 @@ He tested the new features to make sure they worked well.
 
 ---
 
-He designed the app’s new color scheme.
+He designed the app's new color scheme.
 
 ### --feedback--
 
-Tom’s focus was on testing the screen reader features, not designing the color scheme.
+Tom's focus was on testing the screen reader features, not designing the color scheme.
 
 ---
 
@@ -43,7 +43,7 @@ He translated the app into different languages.
 
 ### --feedback--
 
-Translating the app was not part of Tom’s role in this context.
+Translating the app was not part of Tom's role in this context.
 
 ---
 
@@ -51,7 +51,7 @@ He added more images to the app.
 
 ### --feedback--
 
-Tom’s main task was to test screen reader compatibility, not to add images.
+Tom's main task was to test screen reader compatibility, not to add images.
 
 ## --video-solution--
 
@@ -59,7 +59,7 @@ Tom’s main task was to test screen reader compatibility, not to add images.
 
 # --explanation--
 
-To find the correct answer, pay attention to the section that explains Tom’s main role in improving the app.
+To find the correct answer, pay attention to the section that explains Tom's main role in improving the app.
 
 The paragraph states that Tom `has been testing these improvements` to ensure they were effective for screen reader users, which shows his focus on checking the compatibility of these updates.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
index e599f1a1ee..4f68fe5a22 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
@@ -19,9 +19,9 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
 What specific improvement did Sophie make to help users understand spoken content better?
 
@@ -35,11 +35,11 @@ Adding colorful icons is not related to spoken content or screen reader compatib
 
 ---
 
-She worked on making the app’s speech output clearer.
+She worked on making the app's speech output clearer.
 
 ---
 
-She changed the app’s loading speed.
+She changed the app's loading speed.
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ Changing the loading speed is not related to improving spoken content.
 
 ---
 
-She redesigned the app’s interface layout.
+She redesigned the app's interface layout.
 
 ### --feedback--
 
@@ -59,8 +59,8 @@ Sophie's work specifically aimed to improve how users hear and understand the sp
 
 # --explanation--
 
-Focus on the part that describes Sophie’s efforts to enhance screen reader compatibility.
+Focus on the part that describes Sophie's efforts to enhance screen reader compatibility.
 
-The paragraph mentions that her focus is `tweaking the app’s text-to-speech function` to help users better understand spoken content from the app.
+The paragraph mentions that her focus is `tweaking the app's text-to-speech function` to help users better understand spoken content from the app.
 
-Look for an option that aligns with Sophie’s specific task of enhancing the app’s text-to-speech functionality.
+Look for an option that aligns with Sophie's specific task of enhancing the app's text-to-speech functionality.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
index 8b66d6f92b..948092b43a 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What is Sophie concerned about regarding the app’s accessibility?
+What is Sophie concerned about regarding the app's accessibility?
 
 ## --answers--
 
@@ -31,15 +31,15 @@ Whether users like the new color scheme.
 
 ### --feedback--
 
-Sophie’s concern is about making the app accessible overall, not about color preferences.
+Sophie's concern is about making the app accessible overall, not about color preferences.
 
 ---
 
-Whether the app’s speed has improved enough.
+Whether the app's speed has improved enough.
 
 ### --feedback--
 
-Sophie’s focus is on making the app more accessible, not its speed.
+Sophie's focus is on making the app more accessible, not its speed.
 
 ---
 
@@ -47,7 +47,7 @@ Whether they have enough user surveys completed.
 
 ### --feedback--
 
-Sophie’s concern is not about the number of surveys but about the app's overall accessibility.
+Sophie's concern is not about the number of surveys but about the app's overall accessibility.
 
 ---
 
@@ -59,8 +59,8 @@ Whether they have done enough to make the app accessible.
 
 # --explanation--
 
-To find the correct answer, focus on Sophie’s concern mentioned in the paragraph.
+To find the correct answer, focus on Sophie's concern mentioned in the paragraph.
 
 The paragraph states that Sophie wonders, `Have we done enough to make our app accessible?` This indicates her focus on overall accessibility improvements.
 
-Look for an option that reflects Sophie’s concern about making the app accessible for users.
+Look for an option that reflects Sophie's concern about making the app accessible for users.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
index 5cf4154e4b..06f5d01a2d 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What might be Tom and Sophie’s next step to improve accessibility?
+What might be Tom and Sophie's next step to improve accessibility?
 
 ## --answers--
 
@@ -39,7 +39,7 @@ Introducing features like adjustable colors and keyboard shortcuts.
 
 ---
 
-Increasing the app’s speed for faster navigation.
+Increasing the app's speed for faster navigation.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
index e3a7496386..9de6d7ee88 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
@@ -49,4 +49,4 @@ This sentence is in the `Present Simple` tense, not the `Present Perfect continu
 
 # --explanation--
 
-The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn’t occurred as expected. 
+The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
index 744384c525..5559001fed 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
@@ -49,7 +49,7 @@ This is the `Present Simple` tense.
 
 # --explanation--
 
-The `Present Perfect Continuous` tense negative form is formed with `hasn't/haven't + been + present participle`, indicating an ongoing action that hasn’t occurred as expected over time. For example:
+The `Present Perfect Continuous` tense negative form is formed with `hasn't/haven't + been + present participle`, indicating an ongoing action that hasn't occurred as expected over time. For example:
 
 `He hasn't been exercising regularly.` - This means his exercise routine has been irregular.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
index 26ecc04b17..344de0e648 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
@@ -49,7 +49,7 @@ This is in the `Present Simple` tense, not related to ongoing or completed actio
 
 # --explanation--
 
-`Present Perfect Continuous` tense negative form emphasizes an ongoing action that has lacked consistency over time, while the `Present Perfect` tense negative form indicates that an action hasn’t occurred at all up to now.
+`Present Perfect Continuous` tense negative form emphasizes an ongoing action that has lacked consistency over time, while the `Present Perfect` tense negative form indicates that an action hasn't occurred at all up to now.
 
 `Past Continuous` tense negative form deals with an action that was not happening at a specific past moment, focusing solely on the past.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
index ea0ac038d5..ffdb548723 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
@@ -45,7 +45,7 @@ This word refers to the ease of use for all users, including those with disabili
 
 `Misaligned` means not lined up or positioned correctly. For example:
 
-`The images were misaligned in the presentation, making it look messy.` - This indicates that the images were not positioned properly, affecting the presentation’s clarity.
+`The images were misaligned in the presentation, making it look messy.` - This indicates that the images were not positioned properly, affecting the presentation's clarity.
 
 `Out of sync` describes when two or more elements are not coordinated in time or movement. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
index 7f3b30304c..48b8e52080 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-43
 ---
 
-<!-- (Audio) Alice: Exactly. Do you know if it’s been affecting all the videos or just a few? -->
+<!-- (Audio) Alice: Exactly. Do you know if it's been affecting all the videos or just a few? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`BLANK. Do you know if it’s been BLANK all the videos or just a few?`
+`BLANK. Do you know if it's been BLANK all the videos or just a few?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
index da052b1c23..6b070052ad 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-44
 ---
 
-<!-- (Audio) Alice: Exactly. Do you know if it’s been affecting all the videos or just a few? -->
+<!-- (Audio) Alice: Exactly. Do you know if it's been affecting all the videos or just a few? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
index 0f0f0b39f0..10d176ce9f 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-45
 ---
 
-<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly. -->
+<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`It seems to be affecting several videos. Our BLANK team has been BLANK the platform, and noticed that the captions aren’t BLANK properly.`
+`It seems to be affecting several videos. Our BLANK team has been BLANK the platform, and noticed that the captions aren't BLANK properly.`
 
 ## --blanks--
 
@@ -45,7 +45,7 @@ This word in `-ing` form refers to the process of making things happen at the sa
 
 `Quality assurance` is the process of ensuring that a product meets set quality standards. For example:
 
-`The quality assurance team checks the software for bugs before release.` - Here, `quality assurance` emphasizes the team’s role in maintaining the product's standard.
+`The quality assurance team checks the software for bugs before release.` - Here, `quality assurance` emphasizes the team's role in maintaining the product's standard.
 
 `Testing` means evaluating or examining a product to verify its performance. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
index 40a6056e18..6e7c1348c7 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-46
 ---
 
-<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly. -->
+<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Why is it a problem that `the captions aren’t syncing properly`?
+Why is it a problem that `the captions aren't syncing properly`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
index 8ad927f930..acd962ab8b 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-53
 ---
 
-<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they’re narrowing down the possibilities. -->
+<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they're narrowing down the possibilities. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`We're working on it. The BLANK hasn't found a definitive BLANK yet, but they’re BLANK the possibilities.`
+`We're working on it. The BLANK hasn't found a definitive BLANK yet, but they're BLANK the possibilities.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
index 9d1642b436..ceccdcd2ee 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-54
 ---
 
-<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they’re narrowing down the possibilities. -->
+<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they're narrowing down the possibilities. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
index d152f48037..360190fc74 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
@@ -23,9 +23,9 @@ Place the following phrases in the correct spot: `rendering consistently`, `clos
 
 `James: Yes. For some reason, It hasn't been BLANK for some users. The captions are misaligned and BLANK, which isn't good for accessibility.`
 
-`Alice: Exactly. Do you know if it’s been affecting all the videos or just a few?`
+`Alice: Exactly. Do you know if it's been affecting all the videos or just a few?`
 
-`James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly.`
+`James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly.`
 
 `Alice: BLANK. Have they found out why it's happening?`
 
@@ -33,7 +33,7 @@ Place the following phrases in the correct spot: `rendering consistently`, `clos
 
 `Alice: Is there a plan to fix it?`
 
-`James: We're working on it. The development team hasn't found a BLANK yet, but they’re narrowing down the possibilities.`
+`James: We're working on it. The development team hasn't found a BLANK yet, but they're narrowing down the possibilities.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
index c5fc0f7f27..73c70a7178 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
index e7c917a8cf..cf24dbc12f 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
index b249884427..3f3236c4fb 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
@@ -39,7 +39,7 @@ The problem is fully solved now.
 
 ### --feedback--
 
-James clearly states that they haven’t found a final solution yet, so this is incorrect.
+James clearly states that they haven't found a final solution yet, so this is incorrect.
 
 ---
 
@@ -67,6 +67,6 @@ James does not provide a specific timeline for when the solution will be ready.
 
 # --explanation--
 
-To identify the correct answer, focus on where James says `We haven’t found a final solution yet`. This indicates that the issue is still unresolved.
+To identify the correct answer, focus on where James says `We haven't found a final solution yet`. This indicates that the issue is still unresolved.
 
 Look for the option that emphasizes this ongoing problem, which matches James's update.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
index a3b01718a3..de3ecb890e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
index 087f369951..497188534b 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
index cea19f6c62..509a4604d4 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
@@ -63,7 +63,7 @@ These are the characteristics or functions of something.
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -81,12 +81,12 @@ These are the characteristics or functions of something.
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -95,7 +95,7 @@ These are the characteristics or functions of something.
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
index 0cee3fb8e2..85df51bc7a 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
@@ -61,7 +61,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -79,12 +79,12 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -93,7 +93,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
index df3ee2d444..0a7baa4949 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-63
 ---
 
-<!-- (audio) Linda: Yes, I’ve been testing them since the latest software update. -->
+<!-- (audio) Linda: Yes, I've been testing them since the latest software update. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I’ve been testing them BLANK the latest BLANK.`
+`Yes, I've been testing them BLANK the latest BLANK.`
 
 ## --blanks--
 
@@ -37,7 +37,7 @@ These two words together refer to a version of software that has been improved o
 
 In the `Present Perfect Continuous` tense, `since` is used to indicate when an action began and continues up to the present. For example:
 
-`I’ve been learning JavaScript since 2020.` - It shows that the action of learning JavaScript started in 2020 and is still ongoing.
+`I've been learning JavaScript since 2020.` - It shows that the action of learning JavaScript started in 2020 and is still ongoing.
 
 The term `software update` refers to changes or improvements made to a computer program. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
index 5f0d668502..54b5208ecd 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-65
 ---
 
-<!-- (audio) Linda: Yes, I’ve been testing them since the latest software update. -->
+<!-- (audio) Linda: Yes, I've been testing them since the latest software update. -->
 
 # --instructions--
 
@@ -88,7 +88,7 @@ Linda's statement indicates that the action of testing started at the time of th
       "startTime": 1,
       "finishTime": 3.62,
       "dialogue": {
-        "text": "Yes, I've been testing them since the latest software update",
+        "text": "Yes, I've been testing them since the latest software update.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
index a74766adea..bd675d3239 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-66
 ---
 
-<!-- (audio) Linda: We’ve had some positive feedback, but there are still a few bugs to fix. -->
+<!-- (audio) Linda: We've had some positive feedback, but there are still a few bugs to fix. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`We’ve had some positive BLANK, but there are still a few BLANK to fix.`
+`We've had some positive BLANK, but there are still a few BLANK to fix.`
 
 ## --blanks--
 
@@ -78,7 +78,7 @@ This term refers to errors in software that need to be resolved. It's plural for
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
index f1596b7905..4b90d7d733 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-67
 ---
 
-<!-- (audio) Linda: We’ve had some positive feedback, but there are still a few bugs to fix. -->
+<!-- (audio) Linda: We've had some positive feedback, but there are still a few bugs to fix. -->
 
 # --instructions--
 
@@ -88,7 +88,7 @@ Linda's statement highlights that although they have received good responses fro
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
index 2b2a78fb9d..fbf68a2a1b 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-73
 ---
 
-<!-- (audio) Linda: I’ve been trying to cover all scenarios to ensure that the commands work consistently. -->
+<!-- (audio) Linda: I've been trying to cover all scenarios to ensure that the commands work consistently. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`I’ve been trying to cover all BLANK to ensure that the commands work BLANK.`
+`I've been trying to cover all BLANK to ensure that the commands work BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
index 2569cfd6c4..06fb50f651 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-74
 ---
 
-<!-- (audio) Linda: For the past couple of weeks. I’ve been trying to cover all scenarios to ensure that the commands work consistently. -->
+<!-- (audio) Linda: For the past couple of weeks. I've been trying to cover all scenarios to ensure that the commands work consistently. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
index dffe5ee639..f4f868b4c5 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
@@ -35,7 +35,7 @@ If the device has been working properly.
 
 ### --feedback--
 
-Bob is asking about potential issues related to voice recognition, not the device’s general performance.
+Bob is asking about potential issues related to voice recognition, not the device's general performance.
 
 ---
 
@@ -43,7 +43,7 @@ If there is a new update for the voice recognition system.
 
 ### --feedback--
 
-Bob’s question is about problems with voice recognition, not about updates.
+Bob's question is about problems with voice recognition, not about updates.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
index b44474d7a4..296031dfbc 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
@@ -49,7 +49,7 @@ It refers to how correct or precise something is. In this case, it means how wel
 
 `Background noise` refers to unwanted sounds that can interfere with hearing something clearly. For example:
 
-- `The microphone couldn’t pick up my voice because of the background noise.` - In this sentence, `background noise` refers to sounds like music or traffic that made it difficult for the microphone to hear your voice clearly.
+- `The microphone couldn't pick up my voice because of the background noise.` - In this sentence, `background noise` refers to sounds like music or traffic that made it difficult for the microphone to hear your voice clearly.
 
 `Accuracy` refers to how precise or correct something is. In the case of `voice recognition`, it means how well the system can understand and process speech without errors. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
index f11795aa42..56256fc40d 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
@@ -15,11 +15,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What might Linda be suggesting about the system’s current performance?
+What might Linda be suggesting about the system's current performance?
 
 ## --answers--
 
-It’s working perfectly fine with all accents and environments.
+It's working perfectly fine with all accents and environments.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
index 185680dce4..bb942c50b3 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-85
 ---
 
-<!-- (audio) Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been brainstorming solutions. -->
+<!-- (audio) Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been brainstorming solutions. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
index 735a533bbd..9037da2d74 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-86
 ---
 
-<!-- (audio) Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been brainstorming solutions. -->
+<!-- (audio) Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been brainstorming solutions. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
index 1aa169cd61..022ed5a333 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
@@ -31,7 +31,7 @@ He thinks the project is fully complete and ready for launch.
 
 ### --feedback--
 
-Bob’s question about testing with real users suggests he sees the project as ongoing, not fully complete.
+Bob's question about testing with real users suggests he sees the project as ongoing, not fully complete.
 
 ---
 
@@ -39,7 +39,7 @@ He believes the team needs to stop working and start a new project.
 
 ### --feedback--
 
-Bob’s comment suggests he thinks the project is progressing well, not that it should be stopped.
+Bob's comment suggests he thinks the project is progressing well, not that it should be stopped.
 
 ---
 
@@ -51,7 +51,7 @@ He thinks the project has made good initial progress but needs further testing.
 
 # --explanation--
 
-Bob’s comment `That's a good start` shows that he is pleased with the progress so far. However, his follow-up question about testing with real users suggests he thinks more steps are needed before the project is complete. This indicates that he feels positive about the current status but sees the need for further validation and testing.
+Bob's comment `That's a good start` shows that he is pleased with the progress so far. However, his follow-up question about testing with real users suggests he thinks more steps are needed before the project is complete. This indicates that he feels positive about the current status but sees the need for further validation and testing.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
index 3a80dbb2aa..b9563c5a31 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
@@ -19,7 +19,7 @@ What does Linda mean when she says `it would be helpful`?
 
 ## --answers--
 
-She thinks they don’t need any more feedback.
+She thinks they don't need any more feedback.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
index c9dc79ade1..76d437ea80 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
@@ -21,11 +21,11 @@ Place the following phrases in the correct spot: `software update`, `real-world
 
 `Bob: Hi Linda, have you been working on the new BLANK features?`
 
-`Linda: Yes, I’ve been testing them since the latest BLANK. We’ve had some positive feedback, but there are still a few bugs to fix.`
+`Linda: Yes, I've been testing them since the latest BLANK. We've had some positive feedback, but there are still a few bugs to fix.`
 
 `Bob: How long have you been focusing on this evaluation?`
 
-`Linda: For the past couple of weeks. I’ve been trying to cover BLANK to ensure that the commands work consistently.`
+`Linda: For the past couple of weeks. I've been trying to cover BLANK to ensure that the commands work consistently.`
 
 `Bob: Have you had any problems with voice recognition?`
 
@@ -33,7 +33,7 @@ Place the following phrases in the correct spot: `software update`, `real-world
 
 `Bob: What about the integration with other systems? Has it been seamless?`
 
-`Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been BLANK.`
+`Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been BLANK.`
 
 `Bob: That's a good start. By the way, have we tested it with real users yet?`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
index 80a8345a7e..4d3d70ef1f 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
index e2b6f3806d..ed9f6b6d5f 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -51,7 +51,7 @@ Reducing the size of the devices.
 
 ### --feedback--
 
-The paragraph doesn’t mention device size as a challenge.
+The paragraph doesn't mention device size as a challenge.
 
 ## --video-solution--
 
@@ -63,4 +63,4 @@ To find the correct answer, focus on the part where Linda explains the challenge
 
 The paragraph highlights that the team is facing difficulties with background noise and accents, which makes it challenging for the system to accurately recognize commands in noisy environments.
 
-Look for an option that addresses the issue of the system’s ability to handle accents and background noise.
+Look for an option that addresses the issue of the system's ability to handle accents and background noise.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
index 460e6901fe..1fc9ab4b7d 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -35,7 +35,7 @@ Real-world feedback is meant to test the system in real home settings, not just
 
 ---
 
-To improve the system’s visual design.
+To improve the system's visual design.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
index a76e226cc2..d508281756 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -63,4 +63,4 @@ To find the correct answer, look at the part where Linda talks about what the te
 
 The paragraph mentions that the development team `has been brainstorming solutions` to fix the issues with voice recognition, which shows they are actively working on improving the system.
 
-Look for an option that describes the team’s approach to solving the problems they’ve encountered.
+Look for an option that describes the team's approach to solving the problems they've encountered.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
index 29990a49c3..a4434c1f20 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -31,7 +31,7 @@ They will immediately launch the system to all users.
 
 ### --feedback--
 
-The team is still testing and improving the system before it’s ready for a wider launch.
+The team is still testing and improving the system before it's ready for a wider launch.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
index a9bed39e2e..0a3f411bb2 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
@@ -51,7 +51,7 @@ Anna's question does not ask if James needs help; it focuses on whether he has r
 
 # --explanation--
 
-Anna’s question is specifically about whether James has reviewed the feedback from a training program related to accessibility.
+Anna's question is specifically about whether James has reviewed the feedback from a training program related to accessibility.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
index 543215b20a..898a7ef018 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-100
 ---
 
-<!-- (Audio) James: Yes, I’ve been working on it since the last training session. -->
+<!-- (Audio) James: Yes, I've been working on it since the last training session. -->
 
 # --instructions--
 
@@ -35,7 +35,7 @@ By saying he finished working soon after the last session.
 
 ### --feedback--
 
-James’s statement indicates ongoing work, not that he finished shortly after starting.
+James's statement indicates ongoing work, not that he finished shortly after starting.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
index 03a703b361..697028dae5 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
@@ -51,7 +51,7 @@ A `gradual process` refers to something that develops slowly, over time, rather
 
 `The team has made steady progress in completing the project.` - This shows that the team is moving forward regularly and effectively, without major delays.
 
-`Understanding` refers to a person’s knowledge or awareness about a subject. For example:
+`Understanding` refers to a person's knowledge or awareness about a subject. For example:
 
 `Her understanding of coding improved with practice.` - It highlights how her knowledge of coding grew as she spent more time practicing.
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
index da035c1e18..3a6974aa37 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
@@ -23,7 +23,7 @@ He is frustrated that progress has been slow.
 
 ### --feedback--
 
-James doesn’t express frustration; he acknowledges the gradual nature of the process positively.
+James doesn't express frustration; he acknowledges the gradual nature of the process positively.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
index 23aad93fe0..aa98f21456 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
@@ -31,7 +31,7 @@ If there are too many tasks for the team to finish.
 
 ### --feedback--
 
-Anna’s question is about performance in some areas, not the number of tasks.
+Anna's question is about performance in some areas, not the number of tasks.
 
 ---
 
@@ -43,7 +43,7 @@ If people need more tools to do their work better.
 
 ### --feedback--
 
-Anna’s question is about finding areas of lower performance, not about needing more tools.
+Anna's question is about finding areas of lower performance, not about needing more tools.
 
 ## --video-solution--
 
@@ -51,7 +51,7 @@ Anna’s question is about finding areas of lower performance, not about needing
 
 # --explanation--
 
-Anna’s question is asking if there are any parts of the work where the team isn’t doing as well as they were expected to.
+Anna's question is asking if there are any parts of the work where the team isn't doing as well as they were expected to.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
index c4d0440860..37c72c9652 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
@@ -37,7 +37,7 @@ This answer points out areas needing improvement, which is not a positive respon
 
 # --explanation--
 
-A positive answer to Anna’s question would mean that everyone is performing as well as expected, and there is nothing that needs to be improved.
+A positive answer to Anna's question would mean that everyone is performing as well as expected, and there is nothing that needs to be improved.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
index 193270d3b9..b17c08fc07 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
@@ -35,7 +35,7 @@ He believes the activities were well-received by all participants.
 
 ### --feedback--
 
-James points out that the activities were not fully relevant, meaning they weren’t well-received by everyone.
+James points out that the activities were not fully relevant, meaning they weren't well-received by everyone.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
index 8efae5669b..967a25b5a3 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
@@ -23,7 +23,7 @@ Listen to the audio and complete the sentence below.
 
 ### --feedback--
 
-This word describes something that catches people’s interest and keeps them involved.
+This word describes something that catches people's interest and keeps them involved.
 
 # --explanation--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
index cb2c465ff4..869168958e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
@@ -43,7 +43,7 @@ If the activities already meet all the learning goals.
 
 ### --feedback--
 
-Anna’s question suggests she thinks the activities could be improved to be `more engaging`, so she isn’t assuming they already meet all goals.
+Anna's question suggests she thinks the activities could be improved to be `more engaging`, so she isn't assuming they already meet all goals.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
index 92eaa09863..c2e6eb6334 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
@@ -31,7 +31,7 @@ The team has been brainstorming ideas to make the sessions better.
 
 ---
 
-The team hasn’t yet considered any changes to the sessions.
+The team hasn't yet considered any changes to the sessions.
 
 ### --feedback--
 
@@ -43,7 +43,7 @@ The team feels the sessions are as interactive as they need to be.
 
 ### --feedback--
 
-James says they are working on making the sessions more interactive, so they don’t feel the sessions are finished.
+James says they are working on making the sessions more interactive, so they don't feel the sessions are finished.
 
 ## --video-solution--
 
@@ -51,7 +51,7 @@ James says they are working on making the sessions more interactive, so they don
 
 # --explanation--
 
-James uses the `Present Perfect Continuous` tense (`has been brainstorming`) to show that the team’s work on improving the sessions is ongoing. This tense expresses that they started brainstorming in the past and are still actively doing it now, indicating continuous effort in finding new ideas.
+James uses the `Present Perfect Continuous` tense (`has been brainstorming`) to show that the team's work on improving the sessions is ongoing. This tense expresses that they started brainstorming in the past and are still actively doing it now, indicating continuous effort in finding new ideas.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
index 7ea12c2170..dd3bc37842 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
@@ -23,7 +23,7 @@ Add activities that focus on memorizing definitions.
 
 ### --feedback--
 
-Memorizing definitions doesn’t involve real-life application or hands-on practice, which James implies they are aiming for.
+Memorizing definitions doesn't involve real-life application or hands-on practice, which James implies they are aiming for.
 
 ---
 
@@ -31,7 +31,7 @@ Use theoretical case studies with no practical application.
 
 ### --feedback--
 
-Theoretical case studies alone don’t fully connect to real-life tasks, which James wants to include.
+Theoretical case studies alone don't fully connect to real-life tasks, which James wants to include.
 
 ---
 
@@ -39,7 +39,7 @@ Have participants discuss unrelated topics to build general communication skills
 
 ### --feedback--
 
-Unrelated discussions don’t meet the goal of incorporating relevant, real-life situations.
+Unrelated discussions don't meet the goal of incorporating relevant, real-life situations.
 
 ---
 
@@ -51,7 +51,7 @@ Create exercises that use realistic situations participants might encounter on t
 
 # --explanation--
 
-Since James mentions `incorporating more real-life scenarios`, they’re likely planning to add exercises that reflect situations participants could actually encounter in their roles. This makes the training more engaging and relevant, unlike focusing on definitions, unrelated discussions, or purely theoretical case studies.
+Since James mentions `incorporating more real-life scenarios`, they're likely planning to add exercises that reflect situations participants could actually encounter in their roles. This makes the training more engaging and relevant, unlike focusing on definitions, unrelated discussions, or purely theoretical case studies.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
index 4bfc37f41a..c4b501f916 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
@@ -37,7 +37,7 @@ This word in the plural form refers to specific targets or objectives the team i
 
 `Keep in touch` means to stay in regular communication with someone. For example:
 
-`Let’s keep in touch about the project updates.` - This means staying connected and sharing information to make sure everyone is updated on the project's progress.
+`Let's keep in touch about the project updates.` - This means staying connected and sharing information to make sure everyone is updated on the project's progress.
 
 `Goals` are the specific targets or objectives a person or team wants to achieve. It the plural form of `goal`. For example:
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
index e70fc4691f..e9011fe5a5 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
@@ -31,7 +31,7 @@ She thinks James' ideas are confusing and suggests focusing only on accessibilit
 
 ### --feedback--
 
-Anna doesn’t find James’ ideas confusing; she agrees and wants to monitor progress on their shared goals.
+Anna doesn't find James' ideas confusing; she agrees and wants to monitor progress on their shared goals.
 
 ---
 
@@ -43,7 +43,7 @@ She thinks James' ideas are unnecessary and suggests stopping the project.
 
 ### --feedback--
 
-Anna doesn’t suggest stopping; she supports James’ ideas and wants to stay updated.
+Anna doesn't suggest stopping; she supports James' ideas and wants to stay updated.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
index 2108b8fc77..73665c2d1e 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
@@ -21,7 +21,7 @@ Place the following phrases in the correct spot: `gradual process` , `more engag
 
 `Anna: Hi James, have you been reviewing the BLANK for our accessibility program?`
 
-`James: Yes, I’ve been working on it since the last training session. We've received a lot of positive comments, but there are some areas we still need to improve.`
+`James: Yes, I've been working on it since the last training session. We've received a lot of positive comments, but there are some areas we still need to improve.`
 
 `Anna: That's great to hear. How long have we been running these sessions?`
 
@@ -43,7 +43,7 @@ Place the following phrases in the correct spot: `gradual process` , `more engag
 
 ### --feedback--
 
-This phrase refers to the feedback received from participants about the training sessions to see what worked well and what didn’t.
+This phrase refers to the feedback received from participants about the training sessions to see what worked well and what didn't.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
index 4cf8d46470..18cf9abf59 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What is the main goal of the accessibility training?
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
index ee74b5a8bd..6c2adca538 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What does the training overview include?
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
index 3062ed0bf5..3950a4b2fa 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 How does the training plan make the sessions engaging?
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
index f2680e76b8..253577b975 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 Why are real-life scenarios included in the training?
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
index 2225eacac2..b7158fa6f1 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What is the purpose of gathering training feedback?
 
@@ -29,11 +29,11 @@ To decide if the training should be canceled.
 
 ### --feedback--
 
-The feedback is collected to understand what’s effective and find areas to improve, not to cancel the training.
+The feedback is collected to understand what's effective and find areas to improve, not to cancel the training.
 
 ---
 
-To identify areas to improve and understand what’s effective.
+To identify areas to improve and understand what's effective.
 
 ---
 
@@ -49,7 +49,7 @@ To see how quickly participants finish the activities.
 
 ### --feedback--
 
-The purpose of feedback is to assess the training’s effectiveness, not activity speed.
+The purpose of feedback is to assess the training's effectiveness, not activity speed.
 
 ## --video-solution--
 
@@ -59,6 +59,6 @@ The purpose of feedback is to assess the training’s effectiveness, not activit
 
 To find the correct answer, focus on why training feedback is gathered.
 
-The paragraph states that feedback helps identify `what’s effective` and points out `areas to improve`.
+The paragraph states that feedback helps identify `what's effective` and points out `areas to improve`.
 
 Look for the option that describes feedback as a way to assess and enhance the training process.
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
index 2a1c2f9402..094d7451d8 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
@@ -29,7 +29,7 @@ This word means completely or fully.
 
 The word `entirely` means completely or fully. The phrase `not entirely` indicates that something is not complete or perfect. For example:
 
-`I don’t entirely agree with his opinion.` - It means you don’t fully agree with the opinion, suggesting some level of disagreement.
+`I don't entirely agree with his opinion.` - It means you don't fully agree with the opinion, suggesting some level of disagreement.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
index cb5d3ffedb..a453e1737c 100644
--- a/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
+++ b/curriculum/challenges/chinese-traditional/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
@@ -15,7 +15,7 @@ This task doesn't have audio. Read the question below and select the correct ans
 
 ## --text--
 
-A colleague asks if your team has implemented the new feature yet. What is the best way to respond if you haven’t started but plan to?
+A colleague asks if your team has implemented the new feature yet. What is the best way to respond if you haven't started but plan to?
 
 ## --answers--
 
@@ -23,11 +23,11 @@ A colleague asks if your team has implemented the new feature yet. What is the b
 
 ---
 
-`Yes, it’s been running perfectly for years.`
+`Yes, it's been running perfectly for years.`
 
 ### --feedback--
 
-It implies that the feature has been implemented and in use for years, which contradicts the fact that the feature is new and hasn’t been started yet.
+It implies that the feature has been implemented and in use for years, which contradicts the fact that the feature is new and hasn't been started yet.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
index 352a6def05..0ca1b3d0ab 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
@@ -1,7 +1,7 @@
 ---
 id: 66b36358ed4f261d64840c24
 title: Build an Availability Table
-challengeType: 14
+challengeType: 25
 dashedName: build-an-availability-table
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
index f6d5ba4f32..3d3d9b956d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
@@ -1,7 +1,7 @@
 ---
 id: 6718d2d59337c822ecb697ff
 title: Build a Bank Account Management Program
-challengeType: 14
+challengeType: 25
 dashedName: build-a-bank-account-management-program
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
index 37ab60c03e..050e99030b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
@@ -1,7 +1,7 @@
 ---
 id: 66eaddd04a9e533fba689001
 title: Design a Blog Post Card
-challengeType: 14
+challengeType: 25
 dashedName: lab-blog-post-card
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
index d68f89727a..0ce4340301 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
@@ -1,7 +1,7 @@
 ---
 id: 66ec4c8e9878d8441956516f
 title: Build a Book Catalog Table
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-catalog-table
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
index 677ad8fd42..6abd16109d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
@@ -1,7 +1,7 @@
 ---
 id: 66a207974c806a19d6607073
 title: Build a Book Inventory App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-inventory-app
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
index 8d760e3d55..12c07199ca 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
@@ -1,7 +1,7 @@
 ---
 id: 67172b43f84bcd2dec238a3d
 title: Build a Book Organizer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-organizer
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
index 7684311191..db9366bd10 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
@@ -1,7 +1,7 @@
 ---
 id: 66def5467aee701733aaf8cc
 title: Build a Bookmark Manager App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-bookmark-manager-app
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
index d2b049bd2d..86dec9b379 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
@@ -1,7 +1,7 @@
 ---
 id: 6690e10ebe2181212abc9652
 title: Design a Business Card
-challengeType: 14
+challengeType: 25
 dashedName: design-a-business-card
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index 4fa00a0092..8d22843695 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -1,7 +1,7 @@
 ---
 id: 66da326c02141df538f29ba5
 title: Build a Checkout Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-checkout-page
 demoType: onClick
 ---
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tab-index` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
new file mode 100644
index 0000000000..86adcee2dc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
@@ -0,0 +1,210 @@
+---
+id: 66f3f6eb66ea9dc41cdc30df
+title: Design a Set of Colored Boxes
+challengeType: 25
+dashedName: set-of-colored-boxes
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you'll practice using CSS colors by designing boxes.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should set the background color for `body` to `#f4f4f4`.
+2. You should have a `div` with a class of `color-grid` to hold all your color elements.
+3. You should have five `div` elements within the `.color-grid` element.
+4. The five `div` elements should each have a class of `color-box` and `color#`, where `#` is the number of the order of that `div`. For example: `color1` for the first `div`, `color2` for the second, and so on.
+5. The `.color-box` class should have a set `width` and `height` so your `div` elements are visible on the page.
+6. The `.color1` element should have a `background-color` that uses hexadecimal color value.
+7. The `.color2` element should have a `background-color` that uses an RGB color value.
+8. The `.color3` element should have a `background-color` that uses a predefined (word) color value.
+9. The `.color4` element should have a `background-color` that uses a HSL color value.
+10. The `.color5` element should have a `background-color` set.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+`body` should have a background color of `#f4f4f4`.
+
+```js
+const body = document.body;
+const bodyBgColor = getComputedStyle(body).backgroundColor;
+assert.strictEqual(bodyBgColor, 'rgb(244, 244, 244)');
+```
+
+You should have a `div` element with a class of `color-grid`.
+
+```js
+const colorGrid = document.querySelector('div.color-grid');
+assert.exists(colorGrid);
+```
+
+You should have five `div` elements within the `.color-grid` element.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+```
+
+Each of the five `div` elements should each have a class of `color-box` and `color#`—substitute the order of the `div` for the `#` symbol.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+
+colorGridChildren.forEach((child, index) => {
+  const colorClass = `color${index + 1}`;
+  assert.isTrue(child.classList.contains('color-box'));
+  assert.isTrue(child.classList.contains(colorClass));
+});
+```
+
+The `.color-box` element should have a set `width` and `height`.
+
+```js
+const colorBox = document.querySelector('.color-box');
+assert.exists(colorBox);
+
+const colorBoxStyles = getComputedStyle(colorBox);
+const width = colorBoxStyles.width;
+const height = colorBoxStyles.height;
+
+assert.notStrictEqual(width, '0px');
+assert.notStrictEqual(height, '0px');
+```
+
+The `.color1` element should have a hexadecimal background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color1\s*{[^}]*\bbackground-color\s*:\s*#[0-9a-fA-F]{3,6}\s*;[^}]*}/);
+```
+
+The `.color2` element should have an RGB background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color2\s*{[^}]*\bbackground-color\s*:\s*rgb\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)\s*;[^}]*}/);
+```
+
+The `.color3` element should have a predefined (word) background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color3\s*{[^}]*\bbackground-color\s*:\s*[a-zA-Z]+\s*;[^}]*}/);
+```
+
+The `.color4` element should have a HSL background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color4\s*{[^}]*\bbackground-color\s*:\s*hsl\s*\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)\s*;[^}]*}/);
+```
+
+The `.color5` element should have a background color set.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.color5').getPropVal('background-color', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Boxes</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Boxes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Colored Boxes</h1>
+    <div class="color-grid"> 
+        <div class="color-box color1"></div>
+        <div class="color-box color2"></div>
+        <div class="color-box color3"></div>
+        <div class="color-box color4"></div>
+        <div class="color-box color5"></div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 20px;
+    background-color: #f4f4f4;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+    width: 100%;
+    max-width: 800px;
+}
+
+.color-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    border-radius: 8px;
+    text-align: center;
+    width: 100px;
+    height: 100px;
+}
+
+.color1 {
+    background-color: #33FF57;
+}
+
+.color2 {
+    background-color: rgb(128,0,128);
+}
+
+.color3 {
+    background-color: orange;
+}
+
+.color4 {
+    background-color: hsl(59, 61%, 26%);
+}
+
+.color5 {
+    background-color: red;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
index d82966c772..91fe0bf72c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
@@ -1,7 +1,7 @@
 ---
 id: 66bba6fff611169359d9d36a
 title: Build a Confidential Email Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-confidential-email-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
index fd7f7bd129..dcff6121db 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
@@ -1,7 +1,7 @@
 ---
 id: 66f26c32ec6f90df01a44f60
 title: Design a Contact Form
-challengeType: 14
+challengeType: 25
 dashedName: design-a-contact-form
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
new file mode 100644
index 0000000000..7efe9ec6bb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
@@ -0,0 +1,857 @@
+---
+id: 67279fe50237291f80eed8b8
+title: Build a Customer Complaint Form
+challengeType: 25
+dashedName: build-a-customer-complaint-form
+demoType: onClick
+---
+
+# --description--
+
+For this lab, you have been provided with all the HTML and CSS. You will use JavaScript to validate the complaint form.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. When the form is submitted, you should ensure that:
+    - `#full-name` is not empty.
+    - `#email` is a valid email address format.
+    - `#order-no` is a sequence of ten numbers starting with `2024`.
+    - `#product-code` follows the pattern `XX##-X###-XX#`, where `X` represents either a lowercase letter or an uppercase letter and `#` represents a number.
+    - `#quantity` is a positive integer.
+    - at least one checkbox from `#complaints-group` is checked.
+    - `#complaint-description` contains at least twenty characters if the `Other` checkbox is checked.
+    - a radio button from `#solutions-group` is selected.
+    - `#solution-description` contains at least twenty characters if the `Other` radio button is selected.
+1. You should have a function named `validateForm` that returns an object containing the following keys: `full-name`, `email`, `order-no`, `product-code`, `quantity`, `complaints-group`, `complaint-description`, `solutions-group`, and `solution-description`. The value of each key should be `true` if the corresponding form field is correctly filled and `false` otherwise.
+1. You should have a function named `isValid` that takes the object returned by `validateForm` as argument and returns `true` if every form field is correctly filled and `false` otherwise.
+1. If a change event is triggered on a form field and it has a valid value, you should set its border color to `green`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
+1. If a change event is triggered on a form field and it has an invalid value, you should set its border color to `red`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
+1. When you try to submit the form you should call `isValid` to validate the form.
+1. When you try to submit the form, if the form has any invalid field, each invalid field should be highlighted by setting the border color of each invalid input, textarea or fieldset (in case of checkbox and radio button groups) to `red`.
+
+# --hints--
+
+You should have a function named `validateForm`.
+
+```js
+assert.isFunction(validateForm);
+```
+
+`validateForm` should return an object.
+
+```js
+assert.isObject(validateForm());
+```
+
+`validateForm()["full-name"]` should be `false` when `#full-name` is empty, and `true` otherwise.
+
+```js
+const field = document.getElementById("full-name");
+field.value = "";
+assert.isFalse(validateForm()["full-name"]);
+field.value = "testing";
+assert.isTrue(validateForm()["full-name"]);
+```
+
+When a `change` event is triggered on `#full-name`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("full-name");
+field.value = "testing"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = ""
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["email"]` should be `true` when `#email` contains a valid email address, and `false` otherwise.
+
+```js
+const field = document.getElementById("email");
+field.value = "example@domain.com"
+assert.isTrue(validateForm()["email"]);
+field.value = "testing"
+assert.isFalse(validateForm()["email"]);
+```
+
+When a `change` event is triggered on `#email`, you should set its border color to `green` if it contains a valid email address, and `red` otherwise.
+
+```js
+const field = document.getElementById("email");
+field.value = "example@domain.com"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = ""
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["order-no"]` should be `true` when `#order-no` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("order-no");
+field.value = "2024001122"
+assert.isTrue(validateForm()["order-no"]);
+field.value = "testing"
+assert.isFalse(validateForm()["order-no"]);
+```
+
+When a `change` event is triggered on `#order-no`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("order-no");
+field.value = "2024001122"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "20240011"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["product-code"]` should be `true` when `#product-code` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("product-code");
+field.value = "Xa22-X123-Xb4";
+assert.isTrue(validateForm()["product-code"]);
+field.value = "testing"
+assert.isFalse(validateForm()["product-code"]);
+```
+
+When a `change` event is triggered on `#product-code`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("product-code");
+field.value = "Xa22-X123-Xb4"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "Xa22-123-Xb4"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["quantity"]` should be `true` when `#quantity` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("quantity");
+field.value = "5";
+assert.isTrue(validateForm()["quantity"]);
+field.value = "0";
+assert.isFalse(validateForm()["quantity"]);
+```
+
+When a `change` event is triggered on `#quantity`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("quantity");
+field.value = "2"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "0"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+When at least one checkbox from `#complaints-group` is checked, `validateForm()["complaints-group"]` should be `true`.
+
+```js
+document.getElementById("damaged-product").checked = true
+assert.isTrue(validateForm()["complaints-group"]);
+```
+
+When none of the checkboxes from `#complaints-group` is checked, `validateForm()["complaints-group"]` should be `false`.
+
+```js
+document.getElementById("damaged-product").checked = false;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+assert.isFalse(validateForm()["complaints-group"]);
+```
+
+Once one checkbox from `#complaints-group` is checked, you should set `#complaints-group`'s border color to `green`.
+
+```js
+document.getElementById("damaged-product").checked = true;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+const fieldset = document.getElementById("complaints-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "green");
+```
+
+When all of the checkboxes from `#complaints-group` are changed to the unchecked state, you should set `#complaints-group`'s border color to `red`.
+
+```js
+document.getElementById("damaged-product").checked = false;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+const fieldset = document.getElementById("complaints-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "red");
+```
+
+When `#other-complaint` is checked and `#complaint-description` contains at least twenty characters, `validateForm()["complaint-description"]` should be `true`.
+
+```js
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "A sentence with at least twenty characters";
+assert.isTrue(validateForm()["complaint-description"]);
+```
+
+When `#other-complaint` is checked and `#complaint-description` contains less than twenty characters, `validateForm()["complaint-description"]` should be `false`.
+
+```js
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "Less than 20 chars";
+assert.isFalse(validateForm()["complaint-description"]);
+```
+
+Once the value of `#complaint-description` is changed to a valid value, you should set its border color to `green`.
+
+```js
+const field = document.getElementById("complaint-description");
+field.value = "A sentence with at least twenty characters"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+```
+
+Once the value of `#complaint-description` is changed to an invalid value, you should set its border color to `red`.
+
+```js
+const field = document.getElementById("complaint-description");
+field.value = "Not enough chars"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+When a radio button from `#solutions-group` is checked, `validateForm()["solutions-group"]` should be `true`.
+
+```js
+document.getElementById("refund").checked = true
+assert.isTrue(validateForm()["solutions-group"]);
+```
+
+When none of the radio buttons from `#solutions-group` is checked, `validateForm()["solutions-group"]` should be `false`.
+
+```js
+document.getElementById("refund").checked = false;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+assert.isFalse(validateForm()["solutions-group"]);
+```
+
+Once a radio button from `#solutions-group` is checked, you should set `#solutions-group`'s border color to `green`.
+
+```js
+document.getElementById("refund").checked = true;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+const fieldset = document.getElementById("solutions-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "green");
+```
+
+When all of the checkboxes from `#complaints-group` are changed to the unchecked state, you should set `#complaints-group`'s border color to `red`.
+
+```js
+document.getElementById("refund").checked = false;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+const fieldset = document.getElementById("solutions-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "red");
+```
+
+When `#other-solution` is checked and `#solution-description` contains at least twenty characters, `validateForm()["solution-description"]` should be `true`.
+
+```js
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "A sentence with at least twenty characters";
+assert.isTrue(validateForm()["solution-description"]);
+```
+
+When `#other-solution` is checked and `#solution-description` contains less than twenty characters, `validateForm()["solution-description"]` should be `false`.
+
+```js
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "Less than 20 chars";
+assert.isFalse(validateForm()["solution-description"]);
+```
+
+Once the value of `#solution-description` is changed to a valid value, you should set its border color to `green`.
+
+```js
+const field = document.getElementById("solution-description");
+field.value = "A sentence with at least twenty characters"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+```
+
+Once the value of `#solution-description` is changed to an invalid value, you should set its border color to `red`.
+
+```js
+const field = document.getElementById("solution-description");
+field.value = "Not enough chars"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+You should have a function named `isValid`.
+
+```js
+assert.isFunction(isValid);
+```
+
+Your `isValid` function should take the `validateForm()` as its argument and return `true` when all the form fields have been filled correctly.
+
+```js
+document.getElementById("full-name").value = "testing"
+document.getElementById("email").value = "example@domain.com"
+document.getElementById("order-no").value = "2024001122"
+document.getElementById("product-code").value = "Xa22-X123-Xb4"
+document.getElementById("quantity").value = "5"
+document.getElementById("damaged-product").checked = true
+document.getElementById("other-complaint").checked = false
+document.getElementById("refund").checked = true
+document.getElementById("other-solution").checked = false
+assert.isTrue(isValid(validateForm()));
+
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "A sentence with at least twenty characters";
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "A sentence with at least twenty characters";
+assert.isTrue(isValid(validateForm()));
+```
+
+Your `isValid` function should take the `validateForm()` as its argument and return `false` when not all the form fields have been filled correctly.
+
+```js
+const name = document.getElementById("full-name");
+const email = document.getElementById("email");
+const orderNo = document.getElementById("order-no");
+const prCode = document.getElementById("product-code");
+const quantity = document.getElementById("quantity");
+const damaged = document.getElementById("damaged-product");
+const nonConforming = document.getElementById("nonconforming-product");
+const delayed = document.getElementById("delayed-dispatch");
+const otherC = document.getElementById("other-complaint");
+const complaintDescr = document.getElementById("complaint-description");
+const refund = document.getElementById("refund");
+const exchange = document.getElementById("exchange");
+const otherS = document.getElementById("other-solution");
+const solutionDescr = document.getElementById("solution-description");
+
+// invalid full-name
+name.value = "";
+email.value = "example@domain.com";
+orderNo.value = "2024001122";
+prCode.value = "Xa22-X123-Xb4";
+quantity.value = "5";
+damaged.checked = true;
+refund.checked = true;
+assert.isFalse(isValid(validateForm()));
+
+// invalid email
+name.value = "testing";
+email.value = "";
+assert.isFalse(isValid(validateForm()));
+
+// invalid order-no
+email.value = "example@domain.com";
+orderNo.value = "202400";
+assert.isFalse(isValid(validateForm()));
+
+// invalid product-code
+orderNo.value = "2024001122";
+prCode.value = "1a22-Xa23-Xb4";
+assert.isFalse(isValid(validateForm()));
+
+// invalid quantity
+prCode.value = "Xa22-X123-Xb4";
+quantity.value = 0;
+assert.isFalse(isValid(validateForm()));
+
+// invalid complaints-group
+quantity.value = 5;
+damaged.checked = false;
+nonConforming.checked = false;
+delayed.checked = false;
+otherC.checked = false;
+assert.isFalse(isValid(validateForm()));
+
+// invalid complaint-description
+otherC.checked = true;
+complaintDescr.value = "not enough chars";
+assert.isFalse(isValid(validateForm()));
+
+
+// invalid solutions-group
+complaintDescr.value = "A sentence with at least twenty characters";
+refund.checked = false;
+exchange.checked = false;
+otherS.checked = false;
+assert.isFalse(isValid(validateForm()));
+
+// invalid solutions-description
+otherS.checked = true;
+solutionDescr.value = "not enough chars";
+assert.isFalse(isValid(validateForm()));
+```
+
+You should call `isValid` when you try to submit the form.
+
+```js
+let flag = false;
+const temp = isValid;
+try {
+    isValid = (obj) => {flag = true};
+    document.getElementById("form").dispatchEvent(new Event("submit"));
+    assert.isTrue(flag);
+} finally {
+    isValid = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Customer Complaint Form</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <h1>Complaint Form</h1>
+    <form id="form">
+        <fieldset id="personal-info">
+            <div>
+                <label for="full-name">Full Name:</label>
+                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
+            </div>
+
+            <div>
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" placeholder="example@domain.com">
+            </div>
+        </fieldset>
+        <hr>
+        <fieldset id="product-info">
+            <div>
+                <label for="order-no">Order No:</label>
+                <input type="text" id="order-no" name="order-no" placeholder="2024######">
+            </div>
+            <div>
+                <label for="product-code">Product Code:</label>
+                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
+            </div>
+            <div>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" name="quantity" min="1">
+            </div>
+        </fieldset>
+
+        <fieldset id="complaints-group">
+            <legend>Complaint Reason:</legend>
+            <div>
+                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
+                <label for="damaged-product">Damaged Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
+                <label for="nonconforming-product">Nonconforming Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
+                <label for="delayed-dispatch">Delayed Dispatch</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="other-complaint" name="complaint" value="other">
+                <label for="other-complaint">Other</label>
+            </div>
+        </fieldset>
+
+        <div id="complaint-description-container">
+            <legend>Description of Complaint Reason</legend>
+            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
+                name="complaint-textarea" id="complaint-description"></textarea>
+        </div>
+
+        <fieldset id="solutions-group">
+            <legend>Desired Solution</legend>
+            <input type="radio" name="solutions" id="refund" value="refund">
+            <label for="refund">Refund</label>
+
+            <input type="radio" name="solutions" id="exchange" value="exchange">
+            <label for="exchange">Exchange</label>
+
+            <input type="radio" name="solutions" id="other-solution" value="other">
+            <label for="other-solution">Other</label>
+        </fieldset>
+
+        <div id="solution-description-container">
+            <legend>Description of Desired Solution</legend>
+            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
+                name="solution-textarea" id="solution-description"></textarea>
+        </div>
+        <div id="btn-container">
+            <button type="submit" id="submit-btn">Submit</button>
+            <span id="message-box"></span>
+        </div>
+
+    </form>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    text-align: center;
+}
+
+#form {
+    max-width: 70%;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 10px;
+}
+
+input {
+    border-color: rgb(118, 118, 118);
+}
+
+#personal-info input, #product-info input {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+fieldset {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border-color: rgb(118, 118, 118);
+}
+
+textarea {
+    width: 100%;
+    border-color: rgb(118, 118, 118);
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#submit-btn, #clear-btn {
+    margin: 10px 15px 0;
+}
+```
+
+```js
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Customer Complaint Form</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <h1>Complaint Form</h1>
+    <form id="form">
+        <fieldset id="personal-info">
+            <div>
+                <label for="full-name">Full Name:</label>
+                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
+            </div>
+
+            <div>
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" placeholder="example@domain.com">
+            </div>
+        </fieldset>
+        <hr>
+        <fieldset id="product-info">
+            <div>
+                <label for="order-no">Order No:</label>
+                <input type="text" id="order-no" name="order-no" placeholder="2024######">
+            </div>
+            <div>
+                <label for="product-code">Product Code:</label>
+                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
+            </div>
+            <div>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" name="quantity" min="1">
+            </div>
+        </fieldset>
+
+        <fieldset id="complaints-group">
+            <legend>Complaint Reason:</legend>
+            <div>
+                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
+                <label for="damaged-product">Damaged Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
+                <label for="nonconforming-product">Nonconforming Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
+                <label for="delayed-dispatch">Delayed Dispatch</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="other-complaint" name="complaint" value="other">
+                <label for="other-complaint">Other</label>
+            </div>
+        </fieldset>
+
+        <div id="complaint-description-container">
+            <legend>Description of Complaint Reason</legend>
+            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
+                name="complaint-textarea" id="complaint-description"></textarea>
+        </div>
+
+        <fieldset id="solutions-group">
+            <legend>Desired Solution</legend>
+            <input type="radio" name="solutions" id="refund" value="refund">
+            <label for="refund">Refund</label>
+
+            <input type="radio" name="solutions" id="exchange" value="exchange">
+            <label for="exchange">Exchange</label>
+
+            <input type="radio" name="solutions" id="other-solution" value="other">
+            <label for="other-solution">Other</label>
+        </fieldset>
+
+        <div id="solution-description-container">
+            <legend>Description of Desired Solution</legend>
+            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
+                name="solution-textarea" id="solution-description"></textarea>
+        </div>
+        <div id="btn-container">
+            <button type="submit" id="submit-btn">Submit</button>
+            <span id="message-box"></span>
+            <button type="button" id="clear-btn">Clear</button>
+        </div>
+
+    </form>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    text-align: center;
+}
+
+#form {
+    max-width: 70%;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 10px;
+}
+
+input {
+    border-color: rgb(118, 118, 118);
+}
+
+#personal-info input, #product-info input {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+fieldset {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border-color: rgb(118, 118, 118);
+}
+
+textarea {
+    width: 100%;
+    border-color: rgb(118, 118, 118);
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#submit-btn, #clear-btn {
+    margin: 10px 15px 0;
+}
+```
+
+```js
+const form = document.getElementById("form");
+const fullName = document.getElementById("full-name");
+const emailAddress = document.getElementById("email");
+const orderNo = document.getElementById("order-no");
+const productCode = document.getElementById("product-code");
+const quantity = document.getElementById("quantity");
+const complaints = document.querySelectorAll('input[name="complaint"]');
+const complaintDescription = document.getElementById("complaint-description");
+const complaintTextAreaDiv = document.getElementById("complaint-description-container");
+const solutions = document.querySelectorAll('input[name="solutions"]');
+const solutionDescription = document.getElementById("solution-description");
+const solutionTextAreaDiv = document.getElementById("solution-description-container");
+const submitBtn = document.getElementById("submit-btn");
+const messageBox = document.getElementById("message-box");
+const clearBtn = document.getElementById("clear-btn");
+
+const hideTextareas = () => {
+    complaintTextAreaDiv.style.display = "none";
+    solutionTextAreaDiv.style.display = "none";
+}
+
+hideTextareas();
+
+const formFields = {
+    "full-name": fullName,
+    "email": emailAddress,
+    "order-no": orderNo,
+    "product-code": productCode,
+    "quantity": quantity,
+    "complaints-group": Array.from(complaints),
+    "complaint-description": complaintDescription,
+    "solutions-group": Array.from(solutions),
+    "solution-description": solutionDescription
+}
+
+const clearForm = () => {
+    Object.entries(formFields).forEach(entry => {
+        const [key, val] = entry;
+        if (Array.isArray(val)) {
+            val.forEach(i => i.checked = false);
+        } else {
+            val.value = "";
+        }
+        hideTextareas();
+        messageBox.innerText = "";
+        document.getElementById(key).style.borderColor = "rgb(118, 118, 118)";
+    })
+}
+
+const validateForm = () => {
+    const complaintsArr = Array.from(complaints).map(i => i.checked);
+    const solutionsArr = Array.from(solutions).map(i => i.checked);
+    const validationObject = {
+        "full-name": Boolean(fullName.value.trim()),
+        "email": /^\S+@\S+\.\S+$/.test(emailAddress.value.trim()),
+        "order-no": /^2024\d{6}$/.test(orderNo.value.trim()),
+        "product-code": /[A-Z]{2}\d{2}-[A-Z]\d{3}-[A-Z]{2}\d/i.test(productCode.value.trim()),
+        "quantity": Number(quantity.value.trim()) > 0,
+        "complaints-group": complaintsArr.some(i => i),
+        "complaint-description": null,
+        "solutions-group": solutionsArr.some(i => i),
+        "solution-description": null
+    }
+
+    if (complaintsArr[3]) {
+        complaintTextAreaDiv.style.display = "block";
+        const complaintsDescriptionVal = complaintDescription.value.trim();
+        if (complaintsDescriptionVal.length < 20) {
+            validationObject["complaint-description"] = false;
+        } else {
+            validationObject["complaint-description"] = true;
+        }
+    } else {
+        complaintTextAreaDiv.style.display = "none";
+    }
+    if (solutionsArr[2]) {
+        solutionTextAreaDiv.style.display = "block";
+        const solutionDescriptionVal = solutionDescription.value.trim();
+        if (solutionDescriptionVal.length < 20) {
+            validationObject["solution-description"] = false;
+        } else {
+            validationObject["solution-description"] = true;
+        }
+    } else {
+        solutionTextAreaDiv.style.display = "none";
+    }
+    if (validationObject["complaint-description"] === null) delete validationObject["complaint-description"];
+    if (validationObject["solution-description"] === null) delete validationObject["solution-description"];
+
+    return validationObject;
+}
+
+clearBtn.addEventListener("click", clearForm);
+
+Object.keys(formFields).forEach(key => {
+    document.getElementById(key).addEventListener("change", (e) => {
+        const validationObject = validateForm();
+        if (Object.values(validationObject).every(val => val)) messageBox.innerText = "";
+        if (!validationObject[key]) {
+            document.getElementById(key).style.borderColor = "red";
+        } else {
+            document.getElementById(key).style.borderColor = "green";
+        }
+    });
+});
+
+const isValid = (validationObj) => Object.values(validationObj).every(i => i);
+
+form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const validationObject = validateForm();
+    if (!isValid(validationObject)) {
+        messageBox.innerText = "Please, fill out the required fields correctly before submitting.";
+        Object.keys(validationObject).forEach(key => {
+            if (!validationObject[key]) {
+                document.getElementById(key).style.borderColor = "red";
+            } else {
+                document.getElementById(key).style.borderColor = "green";
+            }
+        });
+    } else {
+        messageBox.innerText = "";
+        alert("Form successfully submitted.");
+        clearForm();
+    }
+});
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
index 8c0d5ac06d..71f60b646f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
@@ -1,7 +1,7 @@
 ---
 id: 66f686b8ebdb982fa8e14330
 title: Build a Date Conversion Program
-challengeType: 14
+challengeType: 25
 dashedName: lab-date-conversion
 ---
 
@@ -63,7 +63,7 @@ You should have a function `formatDateMMDDYYYY`
 assert.isFunction(formatDateMMDDYYYY);
 ```
 
-The function`formatDateMMDDYYYY` should take a single parameter.
+The function `formatDateMMDDYYYY` should take a single parameter.
 
 ```js
 assert.lengthOf(formatDateMMDDYYYY, 1);
@@ -91,7 +91,7 @@ You should have a function `formatDateLong`
 assert.isFunction(formatDateLong);
 ```
 
-The function`formatDateLong` should take a single a parameter.
+The function `formatDateLong` should take a single a parameter.
 
 ```js
 assert.lengthOf(formatDateLong, 1);
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
new file mode 100644
index 0000000000..a3dfa325d2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
@@ -0,0 +1,543 @@
+---
+id: 6762ec275cef87635acc4fe3
+title: Build a Drum Machine
+challengeType: 25
+dashedName: build-drum-machine
+demoType: onClick
+---
+
+# --description--
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+1. You should have a `div` element with an `id` of `drum-machine` that contains all other elements.
+
+2. Inside the `#drum-machine` element you should have another `div` with an `id` of `pad-bank`.
+
+3. Inside the `#drum-machine` element you should have a `p` element with an `id` of `display`.
+
+4. Inside your `#pad-bank` element you should have nine clickable drum pad elements each with a class of `drum-pad`, a unique `id` that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.
+
+5. Each `.drum-pad` should have an `audio` element which has a class of `clip`, a `src` attribute that points to an audio clip, and an `id` corresponding to the inner text of its parent `.drum-pad` element (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
+
+6. When you click on a `.drum-pad` element, the audio clip contained in its child audio element should be triggered.
+
+7. When you press the trigger key associated with each `.drum-pad`, the audio clip contained in its child audio element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.).
+
+8. When a `.drum-pad` is triggered, you should display a string describing the associated audio clip as the inner text of the `#display` element (each string must be unique).
+
+Some audio samples you can use for your drum machine can be found at `https://cdn.freecodecamp.org/curriculum/drum/<fileName>`, where `<fileName>` is as follows:
+
+| drum name   | `fileName`       |
+| ----------- | ---------------- |
+| Heater 1    | `Heater-1.mp3`   |
+| Heater 2    | `Heater-2.mp3`   |
+| Heater 3    | `Heater-3.mp3`   |
+| Heater 4    | `Heater-4_1.mp3` |
+| Clap        | `Heater-6.mp3`   |
+| Open-HH     | `Dsc_Oh.mp3`     |
+| Kick-n'-Hat | `Kick_n_Hat.mp3` |
+| Kick        | `RP4_KICK_1.mp3` |
+| Closed-HH   | `Cev_H2.mp3`     |
+
+# --hints--
+
+You should have a `div` element with an `id` of `drum-machine` that contains all other elements.
+
+```js
+assert.isNotNull(document.querySelector('div#drum-machine'));
+```
+
+Inside the `#drum-machine` element you should have another `div` with an `id` of `pad-bank`.
+
+```js
+assert.isNotNull(document.querySelector('#drum-machine div#pad-bank'));
+```
+
+Inside the `#drum-machine` element you should have a `p` element with an `id` of `display`.
+
+```js
+assert.isNotNull(document.querySelector('#drum-machine p#display'));
+```
+
+Inside your `#pad-bank` element you should have nine clickable drum pad elements each with a class of `drum-pad`.
+
+```js
+assert.lengthOf(document.querySelectorAll('#pad-bank .drum-pad'), 9);
+```
+
+Each `.drum-pad` should have one of the following letters as `innerText`, in order: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`.
+
+```js
+const pads = document.querySelectorAll('.drum-pad');
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+for (let i = 0; i < 9; i++) {
+  assert.equal(pads[i].innerText.trim(), letters[i]);
+}
+```
+
+Each `.drum-pad` should have an `audio` element which has a class of `clip`, a `src` attribute that points to an audio clip, and an `id` corresponding to the inner text of its parent `.drum-pad` element (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
+
+```js
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+const audios = document.querySelectorAll('#drum-machine .drum-pad audio');
+
+for (let i = 0; i < 9; i++) {
+  assert.equal(audios[i].id, letters[i]);
+  assert.isTrue(audios[i].classList.contains('clip'));
+  assert.isTrue(audios[i].hasAttribute('src'));
+}
+```
+
+When you click on a `.drum-pad` element, the audio clip contained in its child audio element should be triggered.
+
+```js
+const pads = document.querySelectorAll('.drum-pad');
+assert.isNotEmpty(pads);
+pads.forEach(el => {
+  const audio = el.querySelector('audio');
+  el.click();
+  assert.isFalse(audio.paused);
+  audio.pause();
+});
+```
+
+When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding `audio` element should play the corresponding sound.
+
+```js
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+const audios = document.querySelectorAll('#drum-machine .drum-pad audio');
+
+for (let i = 0; i < 9; i++) {
+  const audio = audios[i];
+  document.dispatchEvent(
+    new KeyboardEvent('keydown', { key: letters[i].toLowerCase() })
+  );
+  assert.isFalse(audio.paused);
+  audio.pause();
+}
+```
+
+When a `.drum-pad` is triggered, you should display a string describing the associated audio clip as the inner text of the `#display` element (each string must be unique).
+
+```js
+const collection = new Set();
+const disp = document.querySelector('#display');
+const pads = document.querySelectorAll('.drum-pad');
+assert.lengthOf(pads, 9);
+pads.forEach(el => {
+  const audio = el.querySelector('audio');
+  el.click();
+  collection.add(disp.innerText.trim());
+  audio.pause();
+});
+assert.lengthOf(collection, 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Drum Machine</title>
+  </head>
+  <body></body>
+</html>
+```
+
+```css
+
+```
+
+```js
+
+```
+
+# --solutions--
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Drum Machine</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="inner-container" id="drum-machine">
+      <div id="pad-bank"></div>
+
+      <div class="controls-container">
+        <div class="control power-control">
+          <p>Power: <span id="power-status">On</span></p>
+          <div class="select">
+            <div class="inner"></div>
+          </div>
+        </div>
+
+        <!-- Display for Drum Pad Name and Volume -->
+        <p id="display"></p>
+
+        <div class="volume-slider">
+          <input type="range" min="0" max="1" step="0.01" value="0.3" />
+        </div>
+
+        <div class="control bank-control">
+          <p>Bank: <span id="current-bank">Heater Kit</span></p>
+          <div class="select">
+            <div class="inner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+/* General Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #282c34;
+  color: white;
+}
+
+.inner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #3b3b5f;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+}
+
+/* Drum Pad Styles */
+#pad-bank {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.drum-pad {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+  background: #444;
+  border-radius: 5px;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+
+.drum-pad.active {
+  background: #ffaa33;
+}
+
+.controls-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.control {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.select {
+  width: 50px;
+  height: 20px;
+  background: #555;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.select .inner {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background: #ffaa33;
+  border-radius: 50%;
+  top: 1px;
+  left: calc(100% - 18px);
+}
+
+#display {
+  margin: 15px 0;
+  text-align: center;
+  font-size: 1em;
+  padding: 20px;
+  background: #444;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.volume-slider input[type='range'] {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: #ffaa33;
+  border-radius: 2px;
+  margin-bottom: 10px;
+}
+
+.volume-slider input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+```
+
+```js
+const projectName = 'drum-machine';
+
+const bankOne = [
+  {
+    keyCode: 81,
+    keyTrigger: 'Q',
+    id: 'Heater-1',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3'
+  },
+  {
+    keyCode: 87,
+    keyTrigger: 'W',
+    id: 'Heater-2',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3'
+  },
+  {
+    keyCode: 69,
+    keyTrigger: 'E',
+    id: 'Heater-3',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3'
+  },
+  {
+    keyCode: 65,
+    keyTrigger: 'A',
+    id: 'Heater-4',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3'
+  },
+  {
+    keyCode: 83,
+    keyTrigger: 'S',
+    id: 'Clap',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3'
+  },
+  {
+    keyCode: 68,
+    keyTrigger: 'D',
+    id: 'Open-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3'
+  },
+  {
+    keyCode: 90,
+    keyTrigger: 'Z',
+    id: "Kick-n'-Hat",
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3'
+  },
+  {
+    keyCode: 88,
+    keyTrigger: 'X',
+    id: 'Kick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3'
+  },
+  {
+    keyCode: 67,
+    keyTrigger: 'C',
+    id: 'Closed-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3'
+  }
+];
+
+const bankTwo = [
+  {
+    keyCode: 81,
+    keyTrigger: 'Q',
+    id: 'Chord-1',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_1.mp3'
+  },
+  {
+    keyCode: 87,
+    keyTrigger: 'W',
+    id: 'Chord-2',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_2.mp3'
+  },
+  {
+    keyCode: 69,
+    keyTrigger: 'E',
+    id: 'Chord-3',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_3.mp3'
+  },
+  {
+    keyCode: 65,
+    keyTrigger: 'A',
+    id: 'Shaker',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Give_us_a_light.mp3'
+  },
+  {
+    keyCode: 83,
+    keyTrigger: 'S',
+    id: 'Open-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Dry_Ohh.mp3'
+  },
+  {
+    keyCode: 68,
+    keyTrigger: 'D',
+    id: 'Closed-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Bld_H1.mp3'
+  },
+  {
+    keyCode: 90,
+    keyTrigger: 'Z',
+    id: 'Punchy-Kick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/punchy_kick_1.mp3'
+  },
+  {
+    keyCode: 88,
+    keyTrigger: 'X',
+    id: 'Side-Stick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/side_stick_1.mp3'
+  },
+  {
+    keyCode: 67,
+    keyTrigger: 'C',
+    id: 'Snare',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Brk_Snr.mp3'
+  }
+];
+
+const state = {
+  power: true,
+  display: ' ',
+  currentPadBank: bankOne,
+  currentPadBankId: 'Heater Kit',
+  sliderVal: 0.3
+};
+
+const display = document.getElementById('display');
+
+const setDisplay = text => {
+  state.display = text;
+  display.innerText = text;
+};
+
+const adjustVolume = e => {
+  if (state.power) {
+    state.sliderVal = e.target.value;
+    setDisplay(`Volume: ${Math.round(e.target.value * 100)}`);
+    setTimeout(() => setDisplay(' '), 1000);
+    document.querySelectorAll('.clip').forEach(sound => {
+      sound.volume = state.sliderVal;
+    });
+  }
+};
+
+const activatePad = pad => {
+  pad.classList.add('active');
+  setTimeout(() => pad.classList.remove('active'), 100);
+};
+
+const playSound = (id, name) => {
+  if (!state.power) return;
+
+  const sound = document.getElementById(id);
+  sound.currentTime = 0;
+  sound.play();
+  activatePad(sound.parentNode);
+  setDisplay(name);
+};
+
+const renderPadBank = () => {
+  const padBank = document.querySelector('#pad-bank');
+  padBank.innerHTML = '';
+
+  state.currentPadBank.forEach(drum => {
+    const pad = document.createElement('div');
+    pad.classList.add('drum-pad');
+    pad.id = drum.id;
+    pad.innerText = drum.keyTrigger;
+
+    const audio = document.createElement('audio');
+    audio.classList.add('clip');
+    audio.id = drum.keyTrigger;
+    audio.src = drum.url;
+    pad.appendChild(audio);
+
+    pad.addEventListener('click', () =>
+      playSound(drum.keyTrigger, drum.id.replace(/-/g, ' '))
+    );
+    document.addEventListener('keydown', e => {
+      if (e.key === drum.keyTrigger.toLowerCase())
+        playSound(drum.keyTrigger, drum.id.replace(/-/g, ' '));
+    });
+
+    padBank.appendChild(pad);
+  });
+};
+
+const powerControl = () => {
+  state.power = !state.power;
+  document.getElementById('power-status').textContent = state.power
+    ? 'On'
+    : 'Off';
+
+  setDisplay('');
+
+  const powerSlider = document.querySelector('.power-control .select .inner');
+  powerSlider.style.left = state.power ? 'calc(100% - 18px)' : '0';
+};
+
+const selectBank = () => {
+  if (!state.power) return;
+  setDisplay(' ');
+  state.currentPadBank =
+    state.currentPadBankId === 'Heater Kit' ? bankTwo : bankOne;
+  state.currentPadBankId =
+    state.currentPadBankId === 'Heater Kit' ? 'Smooth Piano Kit' : 'Heater Kit';
+
+  renderPadBank();
+  document.getElementById('current-bank').textContent =
+    state.currentPadBankId === 'Heater Kit' ? 'Heater Kit' : 'Smooth Piano Kit';
+  const bankControl = document.querySelector('.bank-control .select .inner');
+  bankControl.style.left =
+    state.currentPadBankId === 'Heater Kit' ? 'calc(100% - 18px)' : '0';
+};
+
+document
+  .querySelector('.power-control')
+  .addEventListener('click', powerControl);
+document.querySelector('.bank-control').addEventListener('click', selectBank);
+document
+  .querySelector('.volume-slider input')
+  .addEventListener('input', adjustVolume);
+
+renderPadBank();
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index 78a253c647..2ca06481bf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -1,7 +1,7 @@
 ---
 id: 66b205e6eacba4c4e54ea434
 title: Build an Email Masker
-challengeType: 14
+challengeType: 25
 dashedName: build-an-email-masker
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
index f17126929d..c1aed10290 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
@@ -1,7 +1,7 @@
 ---
 id: 66e45c8140f9fda5c105ae26
 title: Build an Event Flyer Page
-challengeType: 14
+challengeType: 25
 dashedName: build-an-event-flyer-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
index f95bff2bda..0107f65a06 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
@@ -1,7 +1,7 @@
 ---
 id: 66ebd4ae2812430bb883c787
 title: Build an Event Hub
-challengeType: 14
+challengeType: 25
 dashedName: lab-event-hub
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
index 74b3b6ebf2..d5378ce246 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
@@ -1,7 +1,7 @@
 ---
 id: 66c07238b01053abaf812065
 title: Build a Factorial Calculator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-factorial-calculator
 ---
 
@@ -71,12 +71,6 @@ The factorial of `7` should return `5040`.
 assert.strictEqual(factorialCalculator(7), 5040);
 ```
 
-For `5`, the `resultMsg` should contain `Factorial of 5 is 120`.
-
-```js
-assert.strictEqual(resultMsg, 'Factorial of 5 is 120');
-```
-
 You should call your `factorialCalculator` function with the `num` variable as the argument.
 
 ```js
@@ -98,6 +92,13 @@ assert.strictEqual(factorialCalculator(9), 362880);
 assert.strictEqual(factorialCalculator(11), 39916800);
 ```
 
+Your `resultMsg` should contain a string in a format `Factorial of [num] is [factorial]`.
+
+```js
+assert.strictEqual(resultMsg, `Factorial of ${num} is ${factorialCalculator(num)}`);
+assert.notMatch(__helpers.removeJSComments(code), /Factorial of \d{1,2} is \d+/);
+```
+
 You should output the value of `resultMsg` to the console.
 
 ```js
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
index 524bb53024..5311a0bdd3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
@@ -1,7 +1,7 @@
 ---
 id: 66bf6bacf178eac7b96d4f5e
 title: Build a Favorite Icon Toggler
-challengeType: 14
+challengeType: 25
 dashedName: build-a-favorite-icon-toggler
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
index 5bf3e1cc15..55e29ad88d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
@@ -1,7 +1,7 @@
 ---
 id: 673c91f0b934834bc4a3ecc2
 title: Build an fCC Forum Leaderboard
-challengeType: 14
+challengeType: 25
 dashedName: build-an-fcc-forum-leaderboard
 demoType: onClick
 ---
@@ -16,39 +16,39 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. You should have a function named `timeAgo` that takes a timestamp in the ISO 8601 format as the argument.
 1. The `timeAgo` function should compute the time difference between the time passed as an argument and the current time and return:
-    - `xm ago` (`x` represents minutes) if the amount of minutes that have passed is less than `60`.
-    - `xh ago` (`x` represents hours) if the amount of hours that have passed is less than `24`.
-    - `xd ago` (`x` represents days) otherwise.
+   - `xm ago` (`x` represents minutes) if the amount of minutes that have passed is less than `60`.
+   - `xh ago` (`x` represents hours) if the amount of hours that have passed is less than `24`.
+   - `xd ago` (`x` represents days) otherwise.
 1. You should have a function named `viewCount` that takes the number of views of a post as the argument.
 1. If the value of the views passed as the argument is greater than or equal to `1000`, the `viewCount` function should return a string with the views value divided by `1000`, rounded down to the nearest whole number and the letter `k` appended to it. Otherwise, it should return the views value.
 1. You should have a function named `forumCategory` that takes the id of a selected category as the argument.
 1. The `forumCategory` function should verify that the selected category id is a property of the `allCategories` object and should return a string containing an anchor element with:
-    - the text of the `category` key of the selected category.
-    - a class of `category` followed by the `className` property of the selected category.
-    - an `href` with the value of `<forumCategoryUrl>/<className>/<id>`, where `<className>` is the `className` property of the selected category and `id` is the argument passed to `forumCategory`.
+   - the text of the `category` key of the selected category.
+   - a class of `category` followed by the `className` property of the selected category.
+   - an `href` with the value of `<forumCategoryUrl>/<className>/<id>`, where `<className>` is the `className` property of the selected category and `id` is the argument passed to `forumCategory`.
 1. If the `allCategories` object does not have the selected category id as its property, `className` and `category` should be indicated as `general`.
 1. You should have a function named `avatars` that takes two arrays representing posters and users, respectively.
-1. The `avatars` function should return a string made by joining `img` elements, one for each poster found inside the user array. *Hint:* You can find users by comparing the `user_id` property of the poster with the `id` property` of the user.
+1. The `avatars` function should return a string made by joining `img` elements, one for each poster found inside the user array. _Hint:_ You can find users by comparing the `user_id` property of the poster with the `id` property` of the user.
 1. The `avatars` function should set each avatar's size by accessing the `avatar_template` property and replacing `{size}` with `30`.
 1. Each image element should have an alt text with the value of the `name` property of the poster.
 1. Each image element should have a source with the value of the `avatar_template` property of the poster. In case `avatar_template` contains a relative path, you should set the source to `<avatarUrl>/<avatar_template>`.
 1. You should have a function named `showLatestPosts` that takes a single parameter.
 1. The `showLatestPosts` should extract the `users` and `topic_list` properties from the object passed as argument. Also, it should process the following properties of the objects from the `topics` array, which is contained in `topic_list`:
-    - `id`: the id of the post
-    - `title`: the title of the post
-    - `views`: the number of views of the post
-    - `posts_count`: the number of replies to the topic
-    - `slug`: the slug of the post
-    - `posters`: the posters for that topic
-    - `category_id`: an integer indicating the category id for the post
-    - `bumped_at`: a timestamp in the ISO 8601 format
+   - `id`: the id of the post
+   - `title`: the title of the post
+   - `views`: the number of views of the post
+   - `posts_count`: the number of replies to the topic
+   - `slug`: the slug of the post
+   - `posters`: the posters for that topic
+   - `category_id`: an integer indicating the category id for the post
+   - `bumped_at`: a timestamp in the ISO 8601 format
 1. The `showLatestPosts` should set the inner HTML of `#posts-container` to a string made by joining `tr` elements, one for each item in `topics`.
 1. Each `tr` element should have five `td` elements in it:
-    - a `td` containing two anchor elements, one with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and one obtained by calling `forumCategory` with `category_id`.
-    - a `td` containing a `div` element with class `avatar-container` that contains the images returned by the `avatars` function called with `posters` and `users` as arguments.
-    - a `td` containing the number of replies to the post. *Hint:* use `posts_count - 1`.
-    - a `td` containing the number of views of the post.
-    - a `td` containing the time passed since the last activity.
+   - a `td` containing two anchor elements, one with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and one obtained by calling `forumCategory` with `category_id`.
+   - a `td` containing a `div` element with class `avatar-container` that contains the images returned by the `avatars` function called with `posters` and `users` as arguments.
+   - a `td` containing the number of replies to the post. _Hint:_ use `posts_count - 1`.
+   - a `td` containing the number of views of the post.
+   - a `td` containing the time passed since the last activity.
 1. You should have an async function named `fetchData`.
 1. The `fetchData` function should request data from `forumLatest` and call `showLatestPosts` passing it the response parsed as JSON.
 1. If there's an error when fetching data, the `fetchData` function should log the error to the console.
@@ -66,10 +66,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 50)).toISOString()
-}
-const expected = "50m ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 50).toISOString();
+};
+const expected = '50m ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -78,10 +78,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60)).toISOString()
-}
-const expected = "1h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60).toISOString();
+};
+const expected = '1h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -90,10 +90,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * ( 60 * 115))).toISOString()
-}
-const expected = "1h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * (60 * 115)).toISOString();
+};
+const expected = '1h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -102,10 +102,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 15)).toISOString()
-}
-const expected = "15h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 15).toISOString();
+};
+const expected = '15h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -114,10 +114,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 24)).toISOString()
-}
-const expected = "1d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 24).toISOString();
+};
+const expected = '1d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -126,10 +126,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 46)).toISOString()
-}
-const expected = "1d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 46).toISOString();
+};
+const expected = '1d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -138,10 +138,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 24 * 3)).toISOString()
-}
-const expected = "3d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 24 * 3).toISOString();
+};
+const expected = '3d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -162,13 +162,13 @@ assert.strictEqual(597, viewCount(597));
 `viewCount(1000)` should return `1k`.
 
 ```js
-assert.equal("1k", viewCount(1000));
+assert.equal('1k', viewCount(1000));
 ```
 
 `viewCount(2730)` should return `2k`.
 
 ```js
-assert.equal("2k", viewCount(2730));
+assert.equal('2k', viewCount(2730));
 ```
 
 You should have a function named `forumCategory` that takes a single argument.
@@ -193,11 +193,17 @@ assert.match(actual, /^<\s*a.+?>\s*Project Feedback\s*<\/a>$/);
 
 ```js
 let actual = forumCategory(299);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/career\/299\1/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/career\/299\1/
+);
 
 // prevent hardcoding
 actual = forumCategory(409);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/feedback\/409\1/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/feedback\/409\1/
+);
 ```
 
 `forumCategory(299)` should return a string containing an anchor element with `class="category career"`.
@@ -222,10 +228,16 @@ assert.match(actual, /^<\s*a.+?>\s*General\s*<\/a>$/);
 
 ```js
 let actual = forumCategory(200);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/200/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/200/
+);
 
 actual = forumCategory(220);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/220/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/220/
+);
 ```
 
 `forumCategory(200)` should return a string containing an anchor element with `class="category career"`.
@@ -245,58 +257,64 @@ assert.lengthOf(avatars, 2);
 The `avatars` function should return a string made by joining `img` elements, one for each poster found in the user array.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 const matches = actual.match(/<\s*img\s+.+?>/g);
-assert.lengthOf(matches, 3)
+assert.lengthOf(matches, 3);
 ```
 
 Each `img` element in the string returned by the `avatars` function should have an `alt` text with the value of the `name` property of the poster.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 const matches = actual.match(/<\s*img\s+.+?>/g);
 
@@ -308,28 +326,31 @@ assert.match(matches[2], /alt="Ilenia"/);
 The `avatars` function should set each avatar's size by accessing the `avatar_template` property and replacing `{size}` with `30`.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 assert.notMatch(actual, /\{size\}/);
 assert.lengthOf(actual.match(/\/30\//g), 3);
@@ -338,35 +359,47 @@ assert.lengthOf(actual.match(/\/30\//g), 3);
 Each `img` element in the string returned by the `avatars` function should have the `src` with the value of the `avatar_template` property of the poster. In case `avatar_template` contains a relative path, it should be set to `<avatarUrl>/<avatar_template>`.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 
 const matches = actual.match(/<\s*img\s+.+?>/g);
 
-assert.match(matches[0], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/quincylarson\/30\/212400_2\.png"/);
-assert.match(matches[1], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/jwilkins\.oboe\/30\/179497_2\.png"/);
-assert.match(matches[2], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/ilenia\/30\/270648_2\.png"/);
+assert.match(
+  matches[0],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/quincylarson\/30\/212400_2\.png"/
+);
+assert.match(
+  matches[1],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/jwilkins\.oboe\/30\/179497_2\.png"/
+);
+assert.match(
+  matches[2],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/ilenia\/30\/270648_2\.png"/
+);
 ```
 
 You should have a function named `showLatestPosts` that takes a single parameter.
@@ -391,9 +424,11 @@ try {
   fetch = source => {
     testArr.push(source);
     return temp(source);
-  }
+  };
   fetchData();
-  assert.deepEqual(testArr, ["https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json"])
+  assert.deepEqual(testArr, [
+    'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json'
+  ]);
 } finally {
   fetch = temp;
 }
@@ -409,7 +444,7 @@ async () => {
     showLatestPosts = data => {
       testArr.push(data);
       return temp(data);
-  }
+    };
     await fetchData();
     assert.isNotEmpty(testArr);
   } catch (err) {
@@ -417,7 +452,7 @@ async () => {
   } finally {
     fetch = temp;
   }
-}
+};
 ```
 
 If there is an error, your `fetchData` function should log the error to the console.
@@ -428,15 +463,19 @@ const temp1 = fetch;
 const temp2 = console.log;
 async () => {
   try {
-    console.log = obj => {testArr.push(obj.toString())};
-    fetch = source => {throw new Error("This is a test error");}
+    console.log = obj => {
+      testArr.push(obj.toString());
+    };
+    fetch = source => {
+      throw new Error('This is a test error');
+    };
     await fetchData();
-    assert.deepEqual(testArr, ["Error: This is a test error"]);
+    assert.deepEqual(testArr, ['Error: This is a test error']);
   } finally {
     fetch = temp1;
     console.log = temp2;
   }
-}
+};
 ```
 
 `showLatestPosts` should set the inner HTML of `#posts-container` to a string made by joining `tr` elements, one for each item in `topics`.
@@ -445,53 +484,56 @@ async () => {
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-assert.lengthOf(pContainer.querySelectorAll("tr"), 2);
+assert.lengthOf(pContainer.querySelectorAll('tr'), 2);
 ```
 
 Each `tr` element from the string returned by `showLatestPosts` should contain `5` `td` elements.
@@ -500,54 +542,57 @@ Each `tr` element from the string returned by `showLatestPosts` should contain `
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-assert.lengthOf(pContainer.querySelectorAll("tr:first-child>td"), 5);
-assert.lengthOf(pContainer.querySelectorAll("tr:last-child>td"), 5);
+assert.lengthOf(pContainer.querySelectorAll('tr:first-child>td'), 5);
+assert.lengthOf(pContainer.querySelectorAll('tr:last-child>td'), 5);
 ```
 
 The first `td` element of each table row from the string returned by `showLatestPosts` should contain two anchor elements, the first with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and the second obtained by calling `forumCategory` with `category_id`.
@@ -556,74 +601,91 @@ The first `td` element of each table row from the string returned by `showLatest
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-const anchors1 = pContainer.querySelectorAll("tr:first-child>td>a");
+const anchors1 = pContainer.querySelectorAll('tr:first-child>td>a');
 assert.lengthOf(anchors1, 2);
 
-const anchors2 = pContainer.querySelectorAll("tr:last-child>td>a");
+const anchors2 = pContainer.querySelectorAll('tr:last-child>td>a');
 assert.lengthOf(anchors2, 2);
 
-assert.equal(anchors1[0].classList[0], "post-title");
-assert.equal(anchors1[0].href, "https://forum.freecodecamp.org/t/the-freecodecamp-podcast-is-back-now-with-video/684569");
-assert.equal(anchors1[0].innerText.trim(), "The freeCodeCamp Podcast is back – now with video");
-
-assert.equal(anchors1[1].classList[0], "category");
-assert.equal(anchors1[1].classList[1], "general");
-assert.equal(anchors1[1].href, "https://forum.freecodecamp.org/c/general/1");
-
-
-assert.equal(anchors2[0].classList[0], "post-title");
-assert.equal(anchors2[0].href, "https://forum.freecodecamp.org/t/problem-with-making-changes-to-styles-js/686149");
-assert.equal(anchors2[0].innerText.trim(), "Problem with making changes to styles. (JS)");
-
-assert.equal(anchors2[1].classList[0], "category");
-assert.equal(anchors2[1].classList[1], "javascript");
-assert.equal(anchors2[1].href, "https://forum.freecodecamp.org/c/javascript/421");
+assert.equal(anchors1[0].classList[0], 'post-title');
+assert.equal(
+  anchors1[0].href,
+  'https://forum.freecodecamp.org/t/the-freecodecamp-podcast-is-back-now-with-video/684569'
+);
+assert.equal(
+  anchors1[0].innerText.trim(),
+  'The freeCodeCamp Podcast is back – now with video'
+);
+
+assert.equal(anchors1[1].classList[0], 'category');
+assert.equal(anchors1[1].classList[1], 'general');
+assert.equal(anchors1[1].href, 'https://forum.freecodecamp.org/c/general/1');
+
+assert.equal(anchors2[0].classList[0], 'post-title');
+assert.equal(
+  anchors2[0].href,
+  'https://forum.freecodecamp.org/t/problem-with-making-changes-to-styles-js/686149'
+);
+assert.equal(
+  anchors2[0].innerText.trim(),
+  'Problem with making changes to styles. (JS)'
+);
+
+assert.equal(anchors2[1].classList[0], 'category');
+assert.equal(anchors2[1].classList[1], 'javascript');
+assert.equal(
+  anchors2[1].href,
+  'https://forum.freecodecamp.org/c/javascript/421'
+);
 ```
 
 The second `td` element of each table row from the string returned by `showLatestPosts` should contain the images returned by the `avatars` function called with `posters` and `users` as arguments, nested within a `div` element with the class of `avatar-container`.
@@ -632,130 +694,154 @@ The second `td` element of each table row from the string returned by `showLates
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-const div1 = pContainer.querySelector("tr:first-child>td:nth-child(2)>div");
-assert.equal(div1.classList[0], "avatar-container");
+const div1 = pContainer.querySelector('tr:first-child>td:nth-child(2)>div');
+assert.equal(div1.classList[0], 'avatar-container');
 
-const div2 = pContainer.querySelector("tr:last-child>td:nth-child(2)>div");
-assert.equal(div2.classList[0], "avatar-container");
+const div2 = pContainer.querySelector('tr:last-child>td:nth-child(2)>div');
+assert.equal(div2.classList[0], 'avatar-container');
 
-const imgs1 = div1.querySelectorAll("img");
+const imgs1 = div1.querySelectorAll('img');
 assert.lengthOf(imgs1, 3);
-assert.equal(imgs1[0].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/30/212400_2.png");
-assert.equal(imgs1[0].alt, "Quincy Larson");
-assert.equal(imgs1[1].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png");
-assert.equal(imgs1[1].alt, "Ilenia");
-assert.equal(imgs1[2].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/30/179497_2.png");
-assert.equal(imgs1[2].alt, "Jessica Wilkins");
-
-const imgs2 = div2.querySelectorAll("img");
+assert.equal(
+  imgs1[0].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/30/212400_2.png'
+);
+assert.equal(imgs1[0].alt, 'Quincy Larson');
+assert.equal(
+  imgs1[1].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png'
+);
+assert.equal(imgs1[1].alt, 'Ilenia');
+assert.equal(
+  imgs1[2].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/30/179497_2.png'
+);
+assert.equal(imgs1[2].alt, 'Jessica Wilkins');
+
+const imgs2 = div2.querySelectorAll('img');
 assert.lengthOf(imgs2, 1);
-assert.equal(imgs2[0].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png");
-assert.equal(imgs2[0].alt, "Ilenia");
+assert.equal(
+  imgs2[0].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png'
+);
+assert.equal(imgs2[0].alt, 'Ilenia');
 ```
 
-The third `td` element of each table row from the string returned by `showLatestPosts` should contain the number of replies to the post. *Hint:* use `posts_count - 1`.
+The third `td` element of each table row from the string returned by `showLatestPosts` should contain the number of replies to the post. _Hint:_ use `posts_count - 1`.
 
 ```js
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(3)").innerText, "7");
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(3)').innerText,
+  '7'
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(3)").innerText, "0");
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(3)').innerText,
+  '0'
+);
 ```
 
 The fourth `td` element of each table row from the string returned by `showLatestPosts` should contain the number of views of the post.
@@ -764,56 +850,65 @@ The fourth `td` element of each table row from the string returned by `showLates
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(4)").innerText, "542");
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(4)').innerText,
+  '542'
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(4)").innerText, "9");
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(4)').innerText,
+  '9'
+);
 ```
 
 The fifth `td` element of each table row from the string returned by `showLatestPosts` should contain time passed since the last activity, generated using the `timeAgo` function.
@@ -822,50 +917,53 @@ The fifth `td` element of each table row from the string returned by `showLatest
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const calcTime = (time) => {
+};
+const calcTime = time => {
   const currentTime = new Date();
   const lastPost = new Date(time);
   const timeDifference = currentTime - lastPost;
@@ -875,13 +973,19 @@ const calcTime = (time) => {
   const daysAgo = Math.floor(hoursAgo / 24);
   return `${daysAgo}d ago`;
 };
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(5)").innerText, calcTime("2024-04-15T16:01:26.403Z"));
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(5)').innerText,
+  calcTime('2024-04-15T16:01:26.403Z')
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText, calcTime("2024-04-19T13:52:03.523Z"));
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(5)').innerText,
+  calcTime('2024-04-19T13:52:03.523Z')
+);
 ```
 
 # --seed--
@@ -889,7 +993,7 @@ assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -932,184 +1036,185 @@ assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText
 
 ```css
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  :root {
-    --main-bg-color: #2a2a40;
-    --black: #000;
-    --dark-navy: #0a0a23;
-    --dark-grey: #d0d0d5;
-    --medium-grey: #dfdfe2;
-    --light-grey: #f5f6f7;
-    --peach: #f28373;
-    --salmon-color: #f0aea9;
-    --light-blue: #8bd9f6;
-    --light-orange: #f8b172;
-    --light-green: #93cb5b;
-    --golden-yellow: #f1ba33;
-    --gold: #f9aa23;
-    --green: #6bca6b;
-  }
+:root {
+  --main-bg-color: #2a2a40;
+  --black: #000;
+  --dark-navy: #0a0a23;
+  --dark-grey: #d0d0d5;
+  --medium-grey: #dfdfe2;
+  --light-grey: #f5f6f7;
+  --peach: #f28373;
+  --salmon-color: #f0aea9;
+  --light-blue: #8bd9f6;
+  --light-orange: #f8b172;
+  --light-green: #93cb5b;
+  --golden-yellow: #f1ba33;
+  --gold: #f9aa23;
+  --green: #6bca6b;
+}
 
-  body {
-    background-color: var(--main-bg-color);
-  }
+body {
+  background-color: var(--main-bg-color);
+}
 
-  nav {
-    background-color: var(--dark-navy);
-    padding: 10px 0;
-  }
+nav {
+  background-color: var(--dark-navy);
+  padding: 10px 0;
+}
 
-  .fcc-logo {
-    width: 210px;
-    display: block;
-    margin: auto;
-  }
+.fcc-logo {
+  width: 210px;
+  display: block;
+  margin: auto;
+}
 
-  .title {
-    margin: 25px 0;
-    text-align: center;
-    color: var(--light-grey);
-  }
+.title {
+  margin: 25px 0;
+  text-align: center;
+  color: var(--light-grey);
+}
 
-  .table-wrapper {
-    padding: 0 25px;
-    overflow-x: auto;
-  }
+.table-wrapper {
+  padding: 0 25px;
+  overflow-x: auto;
+}
 
-  table {
-    width: 100%;
-    color: var(--dark-grey);
-    margin: auto;
-    table-layout: fixed;
-    border-collapse: collapse;
-    overflow-x: scroll;
-  }
+table {
+  width: 100%;
+  color: var(--dark-grey);
+  margin: auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  overflow-x: scroll;
+}
 
-  #topics {
-    text-align: start;
-    width: 60%;
-  }
+#topics {
+  text-align: start;
+  width: 60%;
+}
 
-  th {
-    border-bottom: 2px solid var(--dark-grey);
-    padding-bottom: 10px;
-    font-size: 1.3rem;
-  }
+th {
+  border-bottom: 2px solid var(--dark-grey);
+  padding-bottom: 10px;
+  font-size: 1.3rem;
+}
 
-  td:not(:first-child) {
-    text-align: center;
-  }
+td:not(:first-child) {
+  text-align: center;
+}
 
-  td {
-    border-bottom: 1px solid var(--dark-grey);
-    padding: 20px 0;
-  }
+td {
+  border-bottom: 1px solid var(--dark-grey);
+  padding: 20px 0;
+}
 
-  .post-title {
-    font-size: 1.2rem;
-    color: var(--medium-grey);
-    text-decoration: none;
-  }
+.post-title {
+  font-size: 1.2rem;
+  color: var(--medium-grey);
+  text-decoration: none;
+}
 
-  .category {
-    padding: 3px;
-    color: var(--black);
-    text-decoration: none;
-    display: block;
-    width: fit-content;
-    margin: 10px 0 10px;
-  }
+.category {
+  padding: 3px;
+  color: var(--black);
+  text-decoration: none;
+  display: block;
+  width: fit-content;
+  margin: 10px 0 10px;
+}
 
-  .career {
-    background-color: var(--salmon-color);
-  }
+.career {
+  background-color: var(--salmon-color);
+}
 
-  .feedback,
-  .html-css {
-    background-color: var(--light-blue);
-  }
+.feedback,
+.html-css {
+  background-color: var(--light-blue);
+}
 
-  .support {
-    background-color: var(--light-orange);
-  }
+.support {
+  background-color: var(--light-orange);
+}
 
-  .general {
-    background-color: var(--light-green);
-  }
+.general {
+  background-color: var(--light-green);
+}
 
-  .javascript {
-    background-color: var(--golden-yellow);
-  }
+.javascript {
+  background-color: var(--golden-yellow);
+}
 
-  .backend {
-    background-color: var(--gold);
-  }
+.backend {
+  background-color: var(--gold);
+}
 
-  .python {
-    background-color: var(--green);
-  }
+.python {
+  background-color: var(--green);
+}
 
-  .motivation {
-    background-color: var(--peach);
-  }
+.motivation {
+  background-color: var(--peach);
+}
 
-  .avatar-container {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
+.avatar-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-  .avatar-container img {
-    width: 30px;
-    height: 30px;
-  }
+.avatar-container img {
+  width: 30px;
+  height: 30px;
+}
 
-  @media (max-width: 750px) {
-    .table-wrapper {
-      padding: 0 15px;
-    }
+@media (max-width: 750px) {
+  .table-wrapper {
+    padding: 0 15px;
+  }
 
-    table {
-      width: 700px;
-    }
+  table {
+    width: 700px;
+  }
 
-    th {
-      font-size: 1.2rem;
-    }
+  th {
+    font-size: 1.2rem;
+  }
 
-    .post-title {
-      font-size: 1.1rem;
-    }
+  .post-title {
+    font-size: 1.1rem;
   }
+}
 ```
 
 ```js
-const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json";
-const forumTopicUrl = "https://forum.freecodecamp.org/t/";
-const forumCategoryUrl = "https://forum.freecodecamp.org/c/";
-const avatarUrl = "https://sea1.discourse-cdn.com/freecodecamp";
+const forumLatest =
+  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
+const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
+const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
+const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';
 
 const allCategories = {
-  299: { category: "Career Advice", className: "career" },
-  409: { category: "Project Feedback", className: "feedback" },
-  417: { category: "freeCodeCamp Support", className: "support" },
-  421: { category: "JavaScript", className: "javascript" },
-  423: { category: "HTML - CSS", className: "html-css" },
-  424: { category: "Python", className: "python" },
-  432: { category: "You Can Do This!", className: "motivation" },
-  560: { category: "Backend Development", className: "backend" },
+  299: { category: 'Career Advice', className: 'career' },
+  409: { category: 'Project Feedback', className: 'feedback' },
+  417: { category: 'freeCodeCamp Support', className: 'support' },
+  421: { category: 'JavaScript', className: 'javascript' },
+  423: { category: 'HTML - CSS', className: 'html-css' },
+  424: { category: 'Python', className: 'python' },
+  432: { category: 'You Can Do This!', className: 'motivation' },
+  560: { category: 'Backend Development', className: 'backend' }
 };
 ```
 
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1152,182 +1257,183 @@ const allCategories = {
 
 ```css
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  :root {
-    --main-bg-color: #2a2a40;
-    --black: #000;
-    --dark-navy: #0a0a23;
-    --dark-grey: #d0d0d5;
-    --medium-grey: #dfdfe2;
-    --light-grey: #f5f6f7;
-    --peach: #f28373;
-    --salmon-color: #f0aea9;
-    --light-blue: #8bd9f6;
-    --light-orange: #f8b172;
-    --light-green: #93cb5b;
-    --golden-yellow: #f1ba33;
-    --gold: #f9aa23;
-    --green: #6bca6b;
-  }
+:root {
+  --main-bg-color: #2a2a40;
+  --black: #000;
+  --dark-navy: #0a0a23;
+  --dark-grey: #d0d0d5;
+  --medium-grey: #dfdfe2;
+  --light-grey: #f5f6f7;
+  --peach: #f28373;
+  --salmon-color: #f0aea9;
+  --light-blue: #8bd9f6;
+  --light-orange: #f8b172;
+  --light-green: #93cb5b;
+  --golden-yellow: #f1ba33;
+  --gold: #f9aa23;
+  --green: #6bca6b;
+}
 
-  body {
-    background-color: var(--main-bg-color);
-  }
+body {
+  background-color: var(--main-bg-color);
+}
 
-  nav {
-    background-color: var(--dark-navy);
-    padding: 10px 0;
-  }
+nav {
+  background-color: var(--dark-navy);
+  padding: 10px 0;
+}
 
-  .fcc-logo {
-    width: 210px;
-    display: block;
-    margin: auto;
-  }
+.fcc-logo {
+  width: 210px;
+  display: block;
+  margin: auto;
+}
 
-  .title {
-    margin: 25px 0;
-    text-align: center;
-    color: var(--light-grey);
-  }
+.title {
+  margin: 25px 0;
+  text-align: center;
+  color: var(--light-grey);
+}
 
-  .table-wrapper {
-    padding: 0 25px;
-    overflow-x: auto;
-  }
+.table-wrapper {
+  padding: 0 25px;
+  overflow-x: auto;
+}
 
-  table {
-    width: 100%;
-    color: var(--dark-grey);
-    margin: auto;
-    table-layout: fixed;
-    border-collapse: collapse;
-    overflow-x: scroll;
-  }
+table {
+  width: 100%;
+  color: var(--dark-grey);
+  margin: auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  overflow-x: scroll;
+}
 
-  #topics {
-    text-align: start;
-    width: 60%;
-  }
+#topics {
+  text-align: start;
+  width: 60%;
+}
 
-  th {
-    border-bottom: 2px solid var(--dark-grey);
-    padding-bottom: 10px;
-    font-size: 1.3rem;
-  }
+th {
+  border-bottom: 2px solid var(--dark-grey);
+  padding-bottom: 10px;
+  font-size: 1.3rem;
+}
 
-  td:not(:first-child) {
-    text-align: center;
-  }
+td:not(:first-child) {
+  text-align: center;
+}
 
-  td {
-    border-bottom: 1px solid var(--dark-grey);
-    padding: 20px 0;
-  }
+td {
+  border-bottom: 1px solid var(--dark-grey);
+  padding: 20px 0;
+}
 
-  .post-title {
-    font-size: 1.2rem;
-    color: var(--medium-grey);
-    text-decoration: none;
-  }
+.post-title {
+  font-size: 1.2rem;
+  color: var(--medium-grey);
+  text-decoration: none;
+}
 
-  .category {
-    padding: 3px;
-    color: var(--black);
-    text-decoration: none;
-    display: block;
-    width: fit-content;
-    margin: 10px 0 10px;
-  }
+.category {
+  padding: 3px;
+  color: var(--black);
+  text-decoration: none;
+  display: block;
+  width: fit-content;
+  margin: 10px 0 10px;
+}
 
-  .career {
-    background-color: var(--salmon-color);
-  }
+.career {
+  background-color: var(--salmon-color);
+}
 
-  .feedback,
-  .html-css {
-    background-color: var(--light-blue);
-  }
+.feedback,
+.html-css {
+  background-color: var(--light-blue);
+}
 
-  .support {
-    background-color: var(--light-orange);
-  }
+.support {
+  background-color: var(--light-orange);
+}
 
-  .general {
-    background-color: var(--light-green);
-  }
+.general {
+  background-color: var(--light-green);
+}
 
-  .javascript {
-    background-color: var(--golden-yellow);
-  }
+.javascript {
+  background-color: var(--golden-yellow);
+}
 
-  .backend {
-    background-color: var(--gold);
-  }
+.backend {
+  background-color: var(--gold);
+}
 
-  .python {
-    background-color: var(--green);
-  }
+.python {
+  background-color: var(--green);
+}
 
-  .motivation {
-    background-color: var(--peach);
-  }
+.motivation {
+  background-color: var(--peach);
+}
 
-  .avatar-container {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
+.avatar-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-  .avatar-container img {
-    width: 30px;
-    height: 30px;
-  }
+.avatar-container img {
+  width: 30px;
+  height: 30px;
+}
 
-  @media (max-width: 750px) {
-    .table-wrapper {
-      padding: 0 15px;
-    }
+@media (max-width: 750px) {
+  .table-wrapper {
+    padding: 0 15px;
+  }
 
-    table {
-      width: 700px;
-    }
+  table {
+    width: 700px;
+  }
 
-    th {
-      font-size: 1.2rem;
-    }
+  th {
+    font-size: 1.2rem;
+  }
 
-    .post-title {
-      font-size: 1.1rem;
-    }
+  .post-title {
+    font-size: 1.1rem;
   }
+}
 ```
 
 ```js
-const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json";
-const forumTopicUrl = "https://forum.freecodecamp.org/t/";
-const forumCategoryUrl = "https://forum.freecodecamp.org/c/";
-const avatarUrl = "https://sea1.discourse-cdn.com/freecodecamp";
+const forumLatest =
+  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
+const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
+const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
+const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';
 
-const postsContainer = document.getElementById("posts-container");
+const postsContainer = document.getElementById('posts-container');
 
 const allCategories = {
-  299: { category: "Career Advice", className: "career" },
-  409: { category: "Project Feedback", className: "feedback" },
-  417: { category: "freeCodeCamp Support", className: "support" },
-  421: { category: "JavaScript", className: "javascript" },
-  423: { category: "HTML - CSS", className: "html-css" },
-  424: { category: "Python", className: "python" },
-  432: { category: "You Can Do This!", className: "motivation" },
-  560: { category: "Backend Development", className: "backend" },
+  299: { category: 'Career Advice', className: 'career' },
+  409: { category: 'Project Feedback', className: 'feedback' },
+  417: { category: 'freeCodeCamp Support', className: 'support' },
+  421: { category: 'JavaScript', className: 'javascript' },
+  423: { category: 'HTML - CSS', className: 'html-css' },
+  424: { category: 'Python', className: 'python' },
+  432: { category: 'You Can Do This!', className: 'motivation' },
+  560: { category: 'Backend Development', className: 'backend' }
 };
 
-const forumCategory = (id) => {
+const forumCategory = id => {
   let selectedCategory = {};
 
   if (allCategories.hasOwnProperty(id)) {
@@ -1336,8 +1442,8 @@ const forumCategory = (id) => {
     selectedCategory.className = className;
     selectedCategory.category = category;
   } else {
-    selectedCategory.className = "general";
-    selectedCategory.category = "General";
+    selectedCategory.className = 'general';
+    selectedCategory.category = 'General';
     selectedCategory.id = 1;
   }
   const url = `${forumCategoryUrl}${selectedCategory.className}/${id}`;
@@ -1349,7 +1455,7 @@ const forumCategory = (id) => {
   </a>`;
 };
 
-const timeAgo = (time) => {
+const timeAgo = time => {
   const currentTime = new Date();
   const lastPost = new Date(time);
 
@@ -1371,7 +1477,7 @@ const timeAgo = (time) => {
   return `${daysAgo}d ago`;
 };
 
-const viewCount = (views) => {
+const viewCount = views => {
   const thousands = Math.floor(views / 1000);
 
   if (views >= 1000) {
@@ -1383,17 +1489,17 @@ const viewCount = (views) => {
 
 const avatars = (posters, users) => {
   return posters
-    .map((poster) => {
-      const user = users.find((user) => user.id === poster.user_id);
+    .map(poster => {
+      const user = users.find(user => user.id === poster.user_id);
       if (user) {
         const avatar = user.avatar_template.replace(/{size}/, 30);
-        const userAvatarUrl = avatar.startsWith("/user_avatar/")
+        const userAvatarUrl = avatar.startsWith('/user_avatar/')
           ? avatarUrl.concat(avatar)
           : avatar;
         return `<img src="${userAvatarUrl}" alt="${user.name}" />`;
       }
     })
-    .join("");
+    .join('');
 };
 
 const fetchData = async () => {
@@ -1408,23 +1514,24 @@ const fetchData = async () => {
 
 fetchData();
 
-const showLatestPosts = (data) => {
+const showLatestPosts = data => {
   const { topic_list, users } = data;
   const { topics } = topic_list;
 
-  postsContainer.innerHTML = topics.map((item) => {
-    const {
-      id,
-      title,
-      views,
-      posts_count,
-      slug,
-      posters,
-      category_id,
-      bumped_at,
-    } = item;
-
-    return `
+  postsContainer.innerHTML = topics
+    .map(item => {
+      const {
+        id,
+        title,
+        views,
+        posts_count,
+        slug,
+        posters,
+        category_id,
+        bumped_at
+      } = item;
+
+      return `
     <tr>
       <td>
        <a class="post-title" target="_blank" href="${forumTopicUrl}${slug}/${id}">
@@ -1441,6 +1548,7 @@ const showLatestPosts = (data) => {
       <td>${viewCount(views)}</td>
       <td>${timeAgo(bumped_at)}</td>
     </tr>`;
-  }).join("");
+    })
+    .join('');
 };
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
index 17a7468c02..2087ece76c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
@@ -1,7 +1,7 @@
 ---
 id: 66e7ee20b79186306fc12da5
 title: Build a Set of Football Team Cards
-challengeType: 14
+challengeType: 25
 dashedName: lab-football-team-cards
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
index 0ebc155371..6f5d983938 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
@@ -1,7 +1,7 @@
 ---
 id: 66c06d618d075c7f7f1b890a
 title: Build a Fortune Teller
-challengeType: 14
+challengeType: 25
 dashedName: build-a-fortune-teller
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
index 55ca8626c7..7124a13577 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
@@ -1,7 +1,7 @@
 ---
 id: 66bb6a9c2dd58b73cd759034
 title: Build a Gradebook App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-gradebook-app
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
index f2be2434d1..fc1aa3db47 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
@@ -1,7 +1,7 @@
 ---
 id: 66d6a7a3e1aa411e94bf2346
 title: Build a House Painting
-challengeType: 14
+challengeType: 25
 dashedName: build-a-house-painting
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
index e1aef5c20d..55415c03e9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
@@ -1,7 +1,7 @@
 ---
 id: 66d75dd0aa65a71600dc669b
 title: Build an Inventory Management Program
-challengeType: 14
+challengeType: 25
 dashedName: build-an-inventory-management-program
 ---
 
@@ -23,6 +23,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. If the quantity after the subtraction is zero, `removeProduct` should remove the product object from the inventory. If the quantity in the inventory is not enough to perform the subtraction, the `removeProduct` function should log the string `Not enough <product-name> available, remaining pieces: <product-quantity>` to the console.
 1. If the product to remove is not present in the inventory, the `removeProduct` function should log `<product-name> not found` to the console.
 
+**Note:** To prevent conflicts, keep only the logging mentioned in the user stories when running tests.
+
 # --hints--
 
 You should declare an empty array named `inventory`.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
index b3d9311fa5..bb78306d4c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
@@ -1,7 +1,7 @@
 ---
 id: 66ed41f912d0bb1dc62da5dd
 title: Build a JavaScript Trivia Bot
-challengeType: 14
+challengeType: 25
 dashedName: lab-javascript-trivia-bot
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
index fff2926e3c..69f1c54ff8 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
@@ -1,7 +1,7 @@
 ---
 id: 66faac4139dbbd5dd632c860
 title: Build a Job Application Form
-challengeType: 14
+challengeType: 25
 dashedName: lab-job-application-form
 demoType: onClick
 ---
@@ -128,7 +128,8 @@ You should use the `:checked` pseudo-class on radio buttons to change the text c
 const els = document.querySelectorAll('input[type="radio"]');
 assert.isNotEmpty(els);
 els.forEach(input => {
-  const label = document.querySelector(`label[for="${input.id}"]`);
+  const label = document.querySelector(`label[for="${input.id}"]`) || input.parentElement;
+  assert.equal(label.tagName, "LABEL");
   input.checked = false;
   const colorBefore = getComputedStyle(label).color;
   input.checked = true;
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index fcbd6ce1bd..094658ab72 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -1,7 +1,7 @@
 ---
 id: 66c06fad3475cd92421b9ac2
 title: Build a Leap Year Calculator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-leap-year-calculator
 ---
 
@@ -19,8 +19,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
-   - If the year is divisible by `100`, then it is not a leap year.
-   - If the year is divisible by `400`, then it is a leap year.
+   - Unless the year is also divisible by `100`, then it is not a leap year.
+   - Unless the year is also divisible by `400`, then it is a leap year.
 
 5. If the year is a leap year, return `[year] is a leap year.`. Otherwise, return `[year] is not a leap year.`. You will replace `[year]` with the parameter defined in the `isLeapYear` function.
 6. You should call the `isLeapYear` function with `year` as the argument and assign the result to a variable named `result`.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
index 6822d96244..baa7efc298 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
@@ -1,7 +1,7 @@
 ---
 id: 66db57ad34c7089b9b41bfd6
 title: Build a Lightbox Viewer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-lightbox-viewer
 demoType: onClick
 ---
@@ -27,8 +27,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `.lightbox` element should have a fixed position so that the preview opens on top of the current images.
 1. Your `.lightbox` element should cover the entire viewport by setting the height and width to 100% of the container. You should ensure that the lightbox element starts at the top left corner of the container.
 1. `.lightbox` should have a background color. Initially, its `display` property should be set to `none` to hide it.
-1. When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
-1. When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute. The full-size images are located at the following links:
+1. When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
+1. When you click one of your `.gallery-item` elements, the `#lightbox-image` element's `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image's `src` attribute. The full-size images are located at the following links:
 
     - `https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg`
     - `https://cdn.freecodecamp.org/curriculum/labs/storm.jpg`
@@ -151,7 +151,7 @@ Your `.lightbox` element should be hidden initially.
 assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.display, 'none');
 ```
 
-When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
+When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
 
 ```js
 // Get the lightbox element
@@ -178,7 +178,7 @@ galleryItem.dispatchEvent(new Event('click'));
 assert.strictEqual(getComputedDisplay(lightbox), 'flex');
 ```
 
-When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute.
+When you click one of your `.gallery-item` elements, the `#lightbox-image` element's `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image's `src` attribute.
 
 ```js
 // Select gallery items and lightbox image element
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
index 352c0f13dd..53ddba3685 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
@@ -1,7 +1,7 @@
 ---
 id: 66db529d37ad966480ebb633
 title: Build a Lunch Picker Program
-challengeType: 14
+challengeType: 25
 dashedName: build-a-lunch-picker-program
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
new file mode 100644
index 0000000000..76e6b39645
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
@@ -0,0 +1,263 @@
+---
+id: 6735a7370e0ae93a4577c689
+title: Design a Magazine Layout
+challengeType: 25
+dashedName: design-a-magazine-layout
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a `main` element with the class `magazine-cover`.
+
+2. Your `.magazine-cover` should contain a `header` element for the title with the class `title`.
+
+3. You should have four `section` elements in your page. The first three sections for magazine articles and a fourth `section` element for a cover image.
+
+4. The four `section` elements should have a `class` attribute of `feature-article`, `small-article1`, `small-article2`, and `cover-image`, respectively.
+
+5. You should set the `display` property of `.magazine-cover` to `grid.`
+
+6. The `.magazine-cover` should have a `grid-template-areas` property that defines the layout of the grid:
+
+   - The title spanning the top row.
+   - A feature article spanning two columns and a cover image in the second row.
+   - Two small articles and the cover image in the third row.
+
+7. The `.magazine-cover` should have a `grid-template-columns` property that divides the space into three equal parts.
+
+8. The `.magazine-cover` should have a `grid-template-rows` property. It should be set to `auto` for the first row, and divide equally the space occupied by the remaining two rows.
+
+9. You should add a gap between grid items and set the width of the `.magazine-cover` to occupy most of the viewport width.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+You should have a `main` element.
+
+```js
+assert.exists(document.querySelector('main'));
+```
+
+Your `main` element should have a `class` of `magazine-cover`.
+
+```js
+assert.exists(document.querySelector('main.magazine-cover'));
+```
+
+You should have a `header` element within your `main` element.
+
+```js
+assert.exists(document.querySelector("main > header"));
+```
+
+Your `header` element should have a `class` of `title` and should contain some text.
+
+```js
+const header = document.querySelector("header.title");
+assert.exists(header);
+assert.isAbove(header.innerText.length, 0);
+```
+
+You should have a `section` element for each article and the cover image, with classes `feature-article`, `small-article1`, `small-article2`, and `cover-image` respectively.
+
+```js
+const featureArticle = document.querySelector('section.feature-article');
+const smallArticle1 = document.querySelector('section.small-article1');
+const smallArticle2 = document.querySelector('section.small-article2');
+const coverImage = document.querySelector('section.cover-image');
+
+assert.exists(featureArticle);
+assert.exists(smallArticle1);
+assert.exists(smallArticle2);
+assert.exists(coverImage);
+```
+
+The `display` property of the `.magazine-cover` should be set to `grid`.
+
+```js
+assert.equal(getComputedStyle(document.querySelector('.magazine-cover')).display, 'grid');
+```
+
+Your `.magazine-cover` should have a `grid-template-areas` property with `title` spanning all three columns of the first row.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /^("|')title title title\1/);
+```
+
+The second row of the grid template should contain a `feature article` spanning two columns and a `cover image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /.("|')feature-article feature-article cover-image\1./);
+```
+
+The third row of the grid template should contain `small-article1`, `small-article2`, and `cover-image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /("|')small-article1 small-article2 cover-image\1$/);
+```
+
+Your `.magazine-cover` class should have a `grid-template-columns` property set to `1fr 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateColumns, '1fr 1fr 1fr');
+```
+
+Your `.magazine-cover` class should have a `grid-template-rows` property set to `auto 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateRows, 'auto 1fr 1fr');
+```
+
+You should add a gap of `10px` between grid items.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gap, '10px');
+```
+
+The `.title` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.title')?.gridArea, 'title');
+```
+
+The `.feature-article` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.feature-article')?.gridArea, 'feature-article');
+```
+
+The `.cover-image` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.cover-image')?.gridArea, 'cover-image');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<meta charset="utf-8">
+<title>Magazine Layout</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Adventure Magazine</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="magazine-cover">
+      <header class="title">
+          <h1>Adventure Awaits</h1>
+      </header>
+      <section class="feature-article">
+          <h2>Top 10 Exotic Destinations for 2024</h2>
+          <p>Discover the most breathtaking places to visit this year, from hidden beaches to mountain retreats. Our guide takes you through the best spots for your next adventure.</p>
+      </section>
+      <section class="small-article1">
+          <h3>Gear Up: Must-Have Gadgets</h3>
+          <p>Check out the latest tech and gear to make your travels more exciting and comfortable.</p>
+      </section>
+      <section class="small-article2">
+          <h3>Meet the Explorers</h3>
+          <p>Get to know the modern adventurers who are pushing the boundaries of exploration.</p>
+      </section>
+      <section class="cover-image">
+          <img src="https://cdn.freecodecamp.org/curriculum/labs/magazine-cover.png" alt="Adventure Cover Image">
+      </section>
+  </main>
+</body>
+</html>
+```
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.magazine-cover {
+  display: grid;
+  grid-template-areas: 
+      "title title title"
+      "feature-article feature-article cover-image"
+      "small-article1 small-article2 cover-image";
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr;
+  gap: 10px;
+  width: 80%;
+  background-color: #fff;
+}
+
+.title {
+  grid-area: title;
+  background-color: #1B1B32;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+.feature-article {
+  grid-area: feature-article;
+  background-color: #f9f9f9;
+  padding: 10px;
+}
+
+.small-article1, .small-article2 {
+  background-color: #e9e9e9;
+  padding: 10px;
+}
+
+.cover-image {
+  grid-area: cover-image;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ddd;
+  padding: 10px;
+}
+
+.cover-image img {
+  max-width: 100%;
+  height: auto;
+} 
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
index bf975090bd..b877f975f7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
@@ -1,7 +1,7 @@
 ---
 id: 66f55eac933ff64ce654ca74
 title: Build a Markdown to HTML Converter
-challengeType: 14
+challengeType: 25
 dashedName: build-a-markdown-to-html-converter
 demoType: onClick
 ---
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 3a892ab0e3..9db0fcc7f9 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
@@ -1,7 +1,7 @@
 ---
 id: 673b3d6b7ef7318eef926d5a
 title: Build a Mood Board
-challengeType: 14
+challengeType: 25
 dashedName: build-a-mood-board
 demoType: onClick
 ---
@@ -36,20 +36,23 @@ You can use the following images in your Mood Board if you would like:
 - `https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg`
 - `https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg`
 
-
 # --hints--
 
 You should export a `MoodBoardItem` component.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoardItem));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoardItem)
+);
 assert.lengthOf(mockedComponent.find('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));
+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'));
 ```
@@ -57,16 +60,23 @@ assert.isTrue(mockedComponent.childAt(0).hasClass('mood-board-item'));
 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');
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoardItem)
+);
+mockedComponent.setProps({ color: 'colorValue' });
+assert.equal(
+  mockedComponent.find('.mood-board-item').prop('style').backgroundColor,
+  'colorValue'
+);
 ```
 
 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 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');
@@ -75,8 +85,10 @@ assert.equal(img.prop('src'), 'imageValue');
 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 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');
@@ -85,21 +97,27 @@ assert.equal(h3.text(), 'descriptionValue');
 You should export a `MoodBoard` component.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.lengthOf(mockedComponent.find('MoodBoard'), 1);
 ```
 
 Your `MoodBoard` component should return a `div` as its top-level element.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.equal(mockedComponent.childAt(0).type(), '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 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');
@@ -108,9 +126,11 @@ assert.equal(h1.text(), '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 mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 const mbItems = mockedComponent.find(window.index.MoodBoardItem);
-assert.isAtLeast(mbItems.length, 3)
+assert.isAtLeast(mbItems.length, 3);
 const propsList = mbItems.map(item => item.props());
 propsList.forEach(({ color, image, description }) => {
   assert.isAtLeast(color.length, 1);
@@ -122,7 +142,9 @@ propsList.forEach(({ color, image, description }) => {
 Your `MoodBoard` component should be rendered to the page's `#root` element.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ```
 
@@ -131,85 +153,83 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Mood Board</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { MoodBoard } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <MoodBoard />
-        );
+      import { MoodBoard } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <MoodBoard />
+      );
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 body {
-    background-color: #ffffcc;
+  background-color: #ffffcc;
 }
 
 .mood-board-heading {
-    text-align: center;
-    font-size: 2.5em;
-    color: #333;
-    margin-top: 20px;
+  text-align: center;
+  font-size: 2.5em;
+  color: #333;
+  margin-top: 20px;
 }
 
 .mood-board {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    padding: 20px;
-    max-width: 900px;
-    margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .mood-board-item {
-    border-radius: 10px;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    height: 250px;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  height: 250px;
 }
 
 .mood-board-image {
-    border-radius: 5px;
-    width: 180px;
-    height:150px;
-    object-fit: cover;
+  border-radius: 5px;
+  width: 180px;
+  height: 150px;
+  object-fit: cover;
 }
 
 .mood-board-text {
-    margin-top: 20px;
-    font-size: 1.2em;
+  margin-top: 20px;
+  font-size: 1.2em;
 }
 ```
 
@@ -220,94 +240,92 @@ body {
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Mood Board</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { MoodBoard } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <MoodBoard />
-        );
+      import { MoodBoard } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <MoodBoard />
+      );
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 body {
-    background-color: #ffffcc;
+  background-color: #ffffcc;
 }
 
 .mood-board-heading {
-    text-align: center;
-    font-size: 2.5em;
-    color: #333;
-    margin-top: 20px;
+  text-align: center;
+  font-size: 2.5em;
+  color: #333;
+  margin-top: 20px;
 }
 
 .mood-board {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    padding: 20px;
-    max-width: 900px;
-    margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .mood-board-item {
-    border-radius: 10px;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    height: 250px;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  height: 250px;
 }
 
 .mood-board-image {
-    border-radius: 5px;
-    width: 180px;
-    height:150px;
-    object-fit: cover;
+  border-radius: 5px;
+  width: 180px;
+  height: 150px;
+  object-fit: cover;
 }
 
 .mood-board-text {
-    margin-top: 20px;
-    font-size: 1.2em;
+  margin-top: 20px;
+  font-size: 1.2em;
 }
 ```
 
 ```jsx
 export function MoodBoardItem(props) {
   return (
-    <div className="mood-board-item" style={{ backgroundColor: props.color }}>
-      <img src={props.image} alt="Mood" className="mood-board-image" />
-      <h3 className="mood-board-text">{props.description}</h3>
+    <div className='mood-board-item' style={{ backgroundColor: props.color }}>
+      <img src={props.image} alt='Mood' className='mood-board-image' />
+      <h3 className='mood-board-text'>{props.description}</h3>
     </div>
   );
 }
@@ -315,37 +333,37 @@ export function MoodBoardItem(props) {
 export function MoodBoard() {
   return (
     <div>
-      <h1 className="mood-board-heading">Destination Mood Board</h1>
-      <div className="mood-board">
+      <h1 className='mood-board-heading'>Destination Mood Board</h1>
+      <div className='mood-board'>
         <MoodBoardItem
-          color="#2da64f"
-          image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg"
-          description="Carribean"
+          color='#2da64f'
+          image='https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg'
+          description='Carribean'
         />
         <MoodBoardItem
-          color="#8e44ad"
-          image="https://cdn.freecodecamp.org/curriculum/labs/shore.jpg"
-          description="Gawadar Beach"
+          color='#8e44ad'
+          image='https://cdn.freecodecamp.org/curriculum/labs/shore.jpg'
+          description='Gawadar Beach'
         />
         <MoodBoardItem
-          color="#3498db"
-          image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg"
-          description="Cape Town"
+          color='#3498db'
+          image='https://cdn.freecodecamp.org/curriculum/labs/grass.jpg'
+          description='Cape Town'
         />
         <MoodBoardItem
-          color="#bf3d7e"
-          image="https://cdn.freecodecamp.org/curriculum/labs/ship.jpg"
-          description="Suez Canal"
+          color='#bf3d7e'
+          image='https://cdn.freecodecamp.org/curriculum/labs/ship.jpg'
+          description='Suez Canal'
         />
         <MoodBoardItem
-          color="#e74c3c"
-          image="https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg"
-          description="Santorini"
+          color='#e74c3c'
+          image='https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg'
+          description='Santorini'
         />
         <MoodBoardItem
-          color="#95a5a6"
-          image="https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg"
-          description="Istanbul"
+          color='#95a5a6'
+          image='https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg'
+          description='Istanbul'
         />
       </div>
     </div>
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
index d5f64e186b..c37f8f4ba6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
@@ -1,7 +1,7 @@
 ---
 id: 66a37f37ef5823a313de8c26
 title: Build a Moon Orbit
-challengeType: 14
+challengeType: 25
 dashedName: build-a-moon-orbit
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
index 1fe81474e1..c542cb504e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
@@ -1,7 +1,7 @@
 ---
 id: 66ba762af611169359d9d369
 title: Build a Newspaper Article
-challengeType: 14
+challengeType: 25
 dashedName: build-a-newspaper-article
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
index 8ddd5cb53b..6d8ae6b194 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
@@ -1,7 +1,7 @@
 ---
 id: 66be24cb4144f955b6bcc550
 title: Build a Page of Playing Cards
-challengeType: 14
+challengeType: 25
 dashedName: build-a-page-of-playing-cards
 demoType: onClick
 ---
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 967fc513af..969247bda1 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
@@ -1,7 +1,7 @@
 ---
 id: 657bdc55a322aae1eac3838f
 title: 創建一個迴文檢測器
-challengeType: 14
+challengeType: 25
 dashedName: build-a-palindrome-checker
 demoType: onClick
 ---
@@ -25,12 +25,12 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 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. 當 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，並且 `#check-btn` 元素被點擊， `#result` 元素應該包含文本 `"A man, a plan, a canal. Panama is 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. 當 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，並點擊 `#check-btn` 元素時，`#result` 元素應該包含文本 `"1 eye for of 1 eye." is not 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"`.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
new file mode 100644
index 0000000000..99d14778b0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
@@ -0,0 +1,116 @@
+---
+id: 66f53dc2c5bd6a11d6c3282f
+title: Build a Password Generator App
+challengeType: 25
+dashedName: lab-password-generator
+---
+
+# --description--
+
+In this lab, you'll practice using functions by building a random password generator.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should create a function called `generatePassword` that takes a parameter, indicating the length of generated password. You can name the parameter whatever you like.
+2. Your function should return a string which represents a randomly generated password. You should use the following string and different `Math` methods to help you return a new string with random characters in it: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()`.
+3. You should define a variable called `password` and assign it the result of calling the `generatePassword` function with a numeric argument that represents the desired password length.
+4. You should have a `console.log` that logs the message `"Generated password:"` followed by the `password` variable.
+
+# --hints--
+
+You should have a `generatePassword` function with a parameter. You can name the parameter whatever you like.
+
+```js
+assert.isFunction(generatePassword);
+assert.lengthOf(generatePassword, 1);
+```
+
+Your `generatePassword` function should return a string.
+
+```js
+const result = generatePassword(5);
+assert.isString(result);
+```
+
+Your `generatePassword` function should return a new string that is the correct length.
+
+```js
+const length = 8;
+const password = generatePassword(length);
+assert.lengthOf(password, length);
+```
+
+Your function should return a randomly generated password with valid characters.
+
+```js
+const validChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+const password = generatePassword(10);
+for (let char of password) {
+    assert.include(validChars, char);
+}
+```
+
+Your function should return a new random string each time it is called.
+
+```js
+const password1 = generatePassword(10);
+const password2 = generatePassword(10);
+assert.notStrictEqual(password1, password2);
+```
+
+You should have a `password` variable.
+
+```js
+assert.isDefined(password);
+```
+
+Your `password` variable should be a string.
+
+```js
+assert.isString(password);
+```
+
+You should call the `generatePassword` function with a numeric argument and store the returned password in the `password` variable.
+
+```js
+assert.isDefined(password);
+assert.isString(password);
+const testLength = password.length;
+assert.strictEqual(password.length, testLength);
+assert.match(password, /^[A-Za-z0-9!@#$%^&*()]+$/);
+```
+
+You should log the generated password to the console.
+
+```js
+const condition1 = /console\.log\(\s*["']Generated\s+password:\s*["']\s*\+\s*password\s*\);?/gm.test(code);
+const condition2 = /console\.log\(\s*`Generated\s+password:\s*\$\{password\}`\s*\);?/gm.test(code);
+assert.isTrue(condition1 || condition2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+const generatePassword = (length) => {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+    let password = "";
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * chars.length);
+        password += chars[randomIndex];
+    }
+    return password;
+};
+
+const password = generatePassword(12);
+console.log(`Generated password: ${password}`);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
index 6b563b0a9e..c9e1b257c2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
@@ -1,7 +1,7 @@
 ---
 id: 66fe4f33a2cc9b33f4d5cd9b
 title: Build a Permutation Generator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-permutation-generator
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
index e59f4f3dd1..356c851c69 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
@@ -1,7 +1,7 @@
 ---
 id: bd7158d8c242eddfaeb5bd13
 title: Build a Personal Portfolio
-challengeType: 14
+challengeType: 25
 dashedName: build-a-personal-portfolio
 demoType: onClick
 ---
@@ -31,8 +31,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。
 
 ```js
-const el = document.getElementById('welcome-section')
-assert(!!el);
+const el = document.getElementById('welcome-section');
+assert.isNotNull(el);
 ```
 
 你的 `#welcome-section` 元素應該包含一個 `h1` 元素。
@@ -51,16 +51,15 @@ assert.isAbove(
 assert.isAbove(
   document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
   0,
-  'h1 element in welcome section should contain your name or camper ' +
-    'name '
+  'h1 element in welcome section should contain your name or camper ' + 'name '
 );
 ```
 
 You should have a "Projects" section with an `id` of `project-section`.
 
 ```js
-const el = document.getElementById('project-section')
-assert(!!el);
+const el = document.getElementById('project-section');
+assert.isNotNull(el);
 ```
 
 你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。
@@ -82,35 +81,33 @@ assert.isAbove(document.querySelectorAll('#project-section a').length, 0);
 
 ```js
 const el = document.getElementById('navbar');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。
 
 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+  nav => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );
 
-assert.isAbove(
-  links.length,
-  0,
-  'Navbar should contain an anchor link '
-);
+assert.isAbove(links.length, 0, 'Navbar should contain an anchor link ');
 ```
 
 你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.tagName === 'A')
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.target === '_blank')
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的作品集應該至少有一個媒體查詢。
@@ -118,14 +115,15 @@ assert(!!el && el.target === '_blank')
 ```js
 const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
 const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 你的 `#navbar` 元素應該始終位於視口的頂部。
 
 ```js
 (async () => {
-  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+  const timeout = milliseconds =>
+    new Promise(resolve => setTimeout(resolve, milliseconds));
 
   const navbar = document.getElementById('navbar');
   assert.approximately(
@@ -133,7 +131,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     0,
     15,
     "Navbar's parent should be body and it should be at the top of " +
-    'the viewport '
+      'the viewport '
   );
 
   window.scroll(0, 500);
@@ -144,8 +142,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     navbar?.getBoundingClientRect().top,
     0,
     15,
-    'Navbar should be at the top of the viewport even after ' +
-    'scrolling '
+    'Navbar should be at the top of the viewport even after ' + 'scrolling '
   );
   window.scroll(0, 0);
 })();
@@ -156,16 +153,13 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Personal Portfolio</title>
-</head>
-<body>
-
-</body>
-
+  </head>
+  <body></body>
 </html>
 ```
 
@@ -176,31 +170,41 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <link rel="stylesheet" href="styles.css" />
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
-    <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet" />
-</head>
-
-<body>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
     <!-- START NAV -->
 
     <nav id="navbar" class="nav">
-        <ul class="nav-list">
-            <li>
-                <a href="#welcome-section">About</a>
-            </li>
-            <li>
-                <a href="#project-section">Work</a>
-            </li>
-            <li>
-                <a href="#contact">Contact</a>
-            </li>
-        </ul>
+      <ul class="nav-list">
+        <li>
+          <a href="#welcome-section">About</a>
+        </li>
+        <li>
+          <a href="#project-section">Work</a>
+        </li>
+        <li>
+          <a href="#contact">Contact</a>
+        </li>
+      </ul>
     </nav>
 
     <!-- END NAV -->
@@ -208,8 +212,8 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START WELCOME SECTION -->
 
     <section id="welcome-section" class="welcome-section">
-        <h1>Hey I am Mimic</h1>
-        <p>a web developer</p>
+      <h1>Hey I am Mimic</h1>
+      <p>a web developer</p>
     </section>
 
     <!-- END WELCOME SECTION -->
@@ -217,68 +221,113 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START PROJECTS SECTION -->
 
     <section id="project-section" class="projects-section">
-        <h2 class="projects-section-header">These are some of my projects</h2>
-
-        <div class="projects-grid">
-            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Tribute Page
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project project-tile">
-                <img class="project-image"
-                    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Random Quote Machine
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    JavaScript Calculator
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Map Data Across the Globe
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Wikipedia Viewer
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/KzXQgy" target="_blank" class="project project-tile">
-                <img class="project-image"
-                    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Tic Tac Toe Game
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-        </div>
-
-        <a href="https://codepen.io/FreeCodeCamp/" class="btn btn-show-all" target="_blank">Show all<i
-                class="fas fa-chevron-right"></i></a>
+      <h2 class="projects-section-header">These are some of my projects</h2>
+
+      <div class="projects-grid">
+        <a
+          href="https://codepen.io/freeCodeCamp/full/zNqgVx"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Tribute Page
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Random Quote Machine
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/wgGVVX"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            JavaScript Calculator
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/mVEJag"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Map Data Across the Globe
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/wGqEga"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Wikipedia Viewer
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/KzXQgy"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Tic Tac Toe Game
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+      </div>
+
+      <a
+        href="https://codepen.io/FreeCodeCamp/"
+        class="btn btn-show-all"
+        target="_blank"
+        >Show all<i class="fas fa-chevron-right"></i
+      ></a>
     </section>
 
     <!-- END PROJECTS SECTION -->
@@ -286,20 +335,37 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START CONTACT SECTION -->
 
     <section id="contact" class="contact-section">
-        <div class="contact-section-header">
-            <h2>Let's work together...</h2>
-            <p>How do you take your coffee?</p>
-        </div>
-        <div class="contact-links">
-            <a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-facebook-square"></i> Facebook</a>
-            <a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-github"></i> GitHub</a>
-            <a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-twitter"></i> Twitter</a>
-            <a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
-            <a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
-        </div>
+      <div class="contact-section-header">
+        <h2>Let's work together...</h2>
+        <p>How do you take your coffee?</p>
+      </div>
+      <div class="contact-links">
+        <a
+          href="https://facebook.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-facebook-square"></i> Facebook</a
+        >
+        <a
+          id="profile-link"
+          href="https://github.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-github"></i> GitHub</a
+        >
+        <a
+          href="https://twitter.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-twitter"></i> Twitter</a
+        >
+        <a href="mailto:example@example.com" class="btn contact-details"
+          ><i class="fas fa-at"></i> Send a mail</a
+        >
+        <a href="tel:555-555-5555" class="btn contact-details"
+          ><i class="fas fa-mobile-alt"></i> Call me</a
+        >
+      </div>
     </section>
 
     <!-- END CONTACT SECTION -->
@@ -307,54 +373,58 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START FOOTER SECTION -->
 
     <footer>
-        <p>
-            **This is just a fake portfolio. All the projects and contact details
-            given are not real.
-        </p>
-        <p>
-            &copy; Created for
-            <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp <i
-                    class="fab fa-free-code-camp"></i></a>
-        </p>
+      <p>
+        **This is just a fake portfolio. All the projects and contact details
+        given are not real.
+      </p>
+      <p>
+        &copy; Created for
+        <a href="https://www.freecodecamp.org/" target="_blank"
+          >freeCodeCamp <i class="fab fa-free-code-camp"></i
+        ></a>
+      </p>
     </footer>
 
     <!-- END FOOTER SECTION -->
+</body>
 </body>
 
+  </body>
+
 </html>
 ```
 
 ```css
 /* Custom properties/variables  */
 :root {
-    --main-white: #f0f0f0;
-    --main-red: #be3144;
-    --main-blue: #45567d;
-    --main-gray: #303841;
+  --main-white: #f0f0f0;
+  --main-red: #be3144;
+  --main-blue: #45567d;
+  --main-gray: #303841;
 }
 
 /* Base reset */
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 /* box-sizing and font sizing */
 *,
 *::before,
 *::after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 html {
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    /* Set font size for easy rem calculations
+  /* Set font size for easy rem calculations
    * default document font size = 16px, 1rem = 16px, 100% = 16px
    * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
   */
-    font-size: 62.5%;
-    scroll-behavior: smooth;
+  font-size: 62.5%;
+  scroll-behavior: smooth;
 }
 
 /* A few media query to set some font sizes at different screen sizes.
@@ -374,287 +444,287 @@ html {
 
 /* 1200px / 16px = 75em */
 @media (max-width: 75em) {
-    html {
-        font-size: 60%;
-    }
+  html {
+    font-size: 60%;
+  }
 }
 
 /* 980px / 16px = 61.25em */
 @media (max-width: 61.25em) {
-    html {
-        font-size: 58%;
-    }
+  html {
+    font-size: 58%;
+  }
 }
 
 /* 460px / 16px = 28.75em */
 @media (max-width: 28.75em) {
-    html {
-        font-size: 55%;
-    }
+  html {
+    font-size: 55%;
+  }
 }
 
 /* Base styles */
 
 body {
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.8rem;
-    /* 18px */
-    font-weight: 400;
-    line-height: 1.4;
-    color: var(--main-white);
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.8rem;
+  /* 18px */
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--main-white);
 }
 
 h1,
 h2 {
-    font-family: 'Raleway', sans-serif;
-    font-weight: 700;
-    text-align: center;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 700;
+  text-align: center;
 }
 
 h1 {
-    font-size: 6rem;
+  font-size: 6rem;
 }
 
 h2 {
-    font-size: 4.2rem;
+  font-size: 4.2rem;
 }
 
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 a {
-    text-decoration: none;
-    color: var(--main-white);
+  text-decoration: none;
+  color: var(--main-white);
 }
 
 img {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 
 /* nav */
 
 .nav {
-    display: flex;
-    justify-content: flex-end;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: var(--main-red);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
-    z-index: 10;
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: var(--main-red);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
+  z-index: 10;
 }
 
 .nav-list {
-    display: flex;
-    margin-right: 2rem;
+  display: flex;
+  margin-right: 2rem;
 }
 
 @media (max-width: 28.75em) {
-    .nav {
-        justify-content: center;
-    }
+  .nav {
+    justify-content: center;
+  }
 
-    .nav-list {
-        margin: 0 1rem;
-    }
+  .nav-list {
+    margin: 0 1rem;
+  }
 }
 
 .nav-list a {
-    display: block;
-    font-size: 2.2rem;
-    padding: 2rem;
+  display: block;
+  font-size: 2.2rem;
+  padding: 2rem;
 }
 
 .nav-list a:hover {
-    background: var(--main-blue);
+  background: var(--main-blue);
 }
 
 /* Welcome section */
 
 .welcome-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    background-color: #000;
-    background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
 }
 
-.welcome-section>p {
-    font-size: 3rem;
-    font-weight: 200;
-    font-style: italic;
-    color: var(--main-red);
+.welcome-section > p {
+  font-size: 3rem;
+  font-weight: 200;
+  font-style: italic;
+  color: var(--main-red);
 }
 
 /* Projects section */
 
 .projects-section {
-    text-align: center;
-    padding: 10rem 2rem;
-    background: var(--main-blue);
+  text-align: center;
+  padding: 10rem 2rem;
+  background: var(--main-blue);
 }
 
 .projects-section-header {
-    max-width: 640px;
-    margin: 0 auto 6rem auto;
-    border-bottom: 0.2rem solid var(--main-white);
+  max-width: 640px;
+  margin: 0 auto 6rem auto;
+  border-bottom: 0.2rem solid var(--main-white);
 }
 
 @media (max-width: 28.75em) {
-    .projects-section-header {
-        font-size: 4rem;
-    }
+  .projects-section-header {
+    font-size: 4rem;
+  }
 }
 
 /* "Automagic" image grid using no media queries */
 .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    grid-gap: 4rem;
-    width: 100%;
-    max-width: 1280px;
-    margin: 0 auto;
-    margin-bottom: 6rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 4rem;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  margin-bottom: 6rem;
 }
 
 @media (max-width: 30.625em) {
-    .projects-section {
-        padding: 6rem 1rem;
-    }
+  .projects-section {
+    padding: 6rem 1rem;
+  }
 
-    .projects-grid {
-        grid-template-columns: 1fr;
-    }
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .project {
-    background: var(--main-gray);
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-    border-radius: 2px;
+  background: var(--main-gray);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
 }
 
 .code {
-    color: var(--main-gray);
-    transition: color 0.3s ease-out;
+  color: var(--main-gray);
+  transition: color 0.3s ease-out;
 }
 
 .project:hover .code {
-    color: #ff7f50;
+  color: #ff7f50;
 }
 
 .project-image {
-    height: calc(100% - 6.8rem);
-    width: 100%;
-    object-fit: cover;
+  height: calc(100% - 6.8rem);
+  width: 100%;
+  object-fit: cover;
 }
 
 .project-title {
-    font-size: 2rem;
-    padding: 2rem 0.5rem;
+  font-size: 2rem;
+  padding: 2rem 0.5rem;
 }
 
 .btn {
-    display: inline-block;
-    padding: 1rem 2rem;
-    border-radius: 2px;
+  display: inline-block;
+  padding: 1rem 2rem;
+  border-radius: 2px;
 }
 
 .btn-show-all {
-    font-size: 2rem;
-    background: var(--main-gray);
-    transition: background 0.3s ease-out;
+  font-size: 2rem;
+  background: var(--main-gray);
+  transition: background 0.3s ease-out;
 }
 
 .btn-show-all:hover {
-    background: var(--main-red);
+  background: var(--main-red);
 }
 
-.btn-show-all:hover>i {
-    transform: translateX(2px);
+.btn-show-all:hover > i {
+  transform: translateX(2px);
 }
 
-.btn-show-all>i {
-    margin-left: 10px;
-    transform: translateX(0);
-    transition: transform 0.3s ease-out;
+.btn-show-all > i {
+  margin-left: 10px;
+  transform: translateX(0);
+  transition: transform 0.3s ease-out;
 }
 
 /* Contact section */
 
 .contact-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 100%;
-    height: 80vh;
-    padding: 0 2rem;
-    background: var(--main-gray);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 80vh;
+  padding: 0 2rem;
+  background: var(--main-gray);
 }
 
-.contact-section-header>h2 {
-    font-size: 6rem;
+.contact-section-header > h2 {
+  font-size: 6rem;
 }
 
 @media (max-width: 28.75em) {
-    .contact-section-header>h2 {
-        font-size: 4rem;
-    }
+  .contact-section-header > h2 {
+    font-size: 4rem;
+  }
 }
 
-.contact-section-header>p {
-    font-style: italic;
+.contact-section-header > p {
+  font-style: italic;
 }
 
 .contact-links {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: 980px;
-    margin-top: 4rem;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 980px;
+  margin-top: 4rem;
+  flex-wrap: wrap;
 }
 
 .contact-details {
-    font-size: 2.4rem;
-    text-shadow: 2px 2px 1px #1f1f1f;
-    transition: transform 0.3s ease-out;
+  font-size: 2.4rem;
+  text-shadow: 2px 2px 1px #1f1f1f;
+  transition: transform 0.3s ease-out;
 }
 
 .contact-details:hover {
-    transform: translateY(8px);
+  transform: translateY(8px);
 }
 
 /* Footer */
 
 footer {
-    font-weight: 300;
-    display: flex;
-    justify-content: space-evenly;
-    padding: 2rem;
-    background: var(--main-gray);
-    border-top: 4px solid var(--main-red);
+  font-weight: 300;
+  display: flex;
+  justify-content: space-evenly;
+  padding: 2rem;
+  background: var(--main-gray);
+  border-top: 4px solid var(--main-red);
 }
 
-footer>p {
-    margin: 2rem;
+footer > p {
+  margin: 2rem;
 }
 
 footer i {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 @media (max-width: 28.75em) {
-    footer {
-        flex-direction: column;
-        text-align: center;
-    }
+  footer {
+    flex-direction: column;
+    text-align: center;
+  }
 }
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index 4856229d73..526e360fd2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78af367417b2b2512b04
 title: 製作一個產品登錄頁
-challengeType: 14
+challengeType: 25
 dashedName: build-a-product-landing-page
 demoType: onClick
 ---
@@ -63,7 +63,7 @@ assert.exists(el);
 assert.exists(el.src); 
 ```
 
-你的 `#header-img` 元素的 `src` 屬性應該有一個有效的 URL（以 `http` 開頭）。
+Your `#header-img`'s `src` value should be a valid URL (starts with `http`).
 
 ```js
 const el = document.getElementById('header-img');
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
index a1d4053caa..493cc70725 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
@@ -1,7 +1,7 @@
 ---
 id: 67051431a73f1ca25d9a6f25
 title: Build a Project Idea Board
-challengeType: 14
+challengeType: 25
 dashedName: build-a-project-idea-board
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
index 776a3e1edf..9988956c63 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
@@ -1,7 +1,7 @@
 ---
 id: 66f2836c459cfb16ae76f24f
 title: Build a Pyramid Generator
-challengeType: 14
+challengeType: 25
 dashedName: lab-pyramid-generator
 ---
 
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 9098300586..5b11923d0d 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
@@ -1,7 +1,7 @@
 ---
 id: 66f17db06803d11a1bd19a20
 title: Build a Quiz Game
-challengeType: 14
+challengeType: 25
 dashedName: lab-quiz-game
 ---
 
@@ -43,12 +43,14 @@ questions.forEach(question => {
 The `category` key should have the value of a string representing a question category.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({category}) => assert.isString(category));
 ```
 
 The `question` key should have the value of a string representing a question.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({question}) => {
     assert.isString(question);
     assert.include(question, '?');
@@ -58,6 +60,7 @@ questions.forEach(({question}) => {
 The `choices` key should have the value of an array containing three strings.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({choices}) => {
     assert.isArray(choices);
     assert.lengthOf(choices, 3);
@@ -68,12 +71,14 @@ questions.forEach(({choices}) => {
 The `answer` key should have the value of a string.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({answer}) => assert.isString(answer));
 ```
 
 The value of `answer` should be included in the `choices` array.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({answer, choices}) => assert.oneOf(answer, choices));
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
index 2b88138a0b..f19dad4fe0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
@@ -1,7 +1,7 @@
 ---
 id: 66b62d0ad68488dd76228d6c
 title: Debug a Random Background Color Changer
-challengeType: 14
+challengeType: 25
 dashedName: debug-a-random-background-color-changer
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
index ccf8351f97..a6842c83ed 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
@@ -1,7 +1,7 @@
 ---
 id: 66bb3e20d3dc5b6d0a21f5dd
 title: Build a Real Time Counter
-challengeType: 14
+challengeType: 25
 dashedName: build-a-real-time-counter
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
index 5ffaae94e2..06a91d31fe 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
@@ -1,7 +1,7 @@
 ---
 id: 668f08ea07b99b1f4a91acab
 title: Build a Recipe Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-recipe-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
index e929bc8c2c..9f881cc5a5 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
@@ -1,7 +1,7 @@
 ---
 id: 66e028680eca7d21db7e1aee
 title: Build a RegEx Sandbox
-challengeType: 14
+challengeType: 25
 dashedName: lab-regex-sandbox
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
index 39886846a1..d7f946044f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
@@ -1,7 +1,7 @@
 ---
 id: 673b02b03134b04637bf7055
 title: Build a Reusable Footer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-reusable-footer
 demoType: onClick
 ---
@@ -32,22 +32,29 @@ assert.lengthOf(mockedComponent.find('Footer'), 1);
 Your `Footer` component should return a `footer` element.
 
 ```js
-assert.equal(Enzyme.shallow(React.createElement(window.index.Footer)).type(), 'footer');
+assert.equal(
+  Enzyme.shallow(React.createElement(window.index.Footer)).type(),
+  'footer'
+);
 ```
 
 Your `footer` should have at least three unordered lists.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('ul').length, 3);
 ```
 
 Each of your unordered lists should have at least two list items.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 const uls = mockedComponent.find('ul');
-uls.forEach(ul => {  
+uls.forEach(ul => {
   assert.isAtLeast(ul.find('li').length, 2);
 });
 
@@ -57,17 +64,21 @@ assert.isAtLeast(uls.length, 1);
 Your `footer` should have at least one paragraph element.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('p').length, 1);
 ```
 
 You should have a copyright (`©`) symbol within one of your paragraphs.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 let hasCopyright = false;
 mockedComponent.find('p').forEach(p => {
-  if(p.text().includes('©')) {
+  if (p.text().includes('©')) {
     hasCopyright = true;
   }
 });
@@ -77,14 +88,18 @@ assert.isTrue(hasCopyright);
 Your `footer` should have at least three links with the `href` value set to `#`.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('a[href="#"]').length, 3);
 ```
 
 None of your links should be empty.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 mockedComponent.find('a').forEach(a => {
   assert.isAtLeast(a.text().length, 1);
 });
@@ -103,38 +118,34 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Reusable Footer Component</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { Footer } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <Footer />
-        );
+      import { Footer } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
@@ -143,132 +154,139 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ```
 
 ```jsx
-export const Footer = () => {
-
-};
+export const Footer = () => {};
 ```
 
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Reusable Footer Component</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { Footer } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <Footer />
-        );
+      import { Footer } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 .footer {
-    background-color: #e3e1eb;
-    padding: 20px;
-    text-align: center;
-    border-top: 1px solid #e5e7eb;
-    font-family: Arial, sans-serif;
+  background-color: #e3e1eb;
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid #e5e7eb;
+  font-family: Arial, sans-serif;
 }
 
 .footer-section {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    justify-content: center;
-    margin-bottom: 20px;
-    align-items: center;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  justify-content: center;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .footer ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .footer li {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .footer a {
-    text-decoration: none;
-    color: #1f2937;
+  text-decoration: none;
+  color: #1f2937;
 }
 
 .footer a:hover {
-    color: #6366f1;
+  color: #6366f1;
 }
 
 .footer p {
-    color: #6b7280;
-    margin-top: 20px;
+  color: #6b7280;
+  margin-top: 20px;
 }
 
 .footer-icons {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }
 
 .footer-icons a {
-    margin: 0 10px;
-    font-size: 24px;
-    color: #6b7280;
-    text-decoration: none;
+  margin: 0 10px;
+  font-size: 24px;
+  color: #6b7280;
+  text-decoration: none;
 }
 
 .footer-icons a:hover {
-    color: #6366f1;
+  color: #6366f1;
 }
 ```
 
 ```jsx
-export const Footer = () =>
-    <footer className="footer">
-        <div className="footer-section">
-            <ul>
-                <li><a href="#">Fitness Dashboard</a></li>
-                <li><a href="#">Services</a></li>
-            </ul>
-            <ul>
-                <li><a href="#">Watch Videos</a></li>
-                <li><a href="#">Discord</a></li>
-            </ul>
-            <ul>
-                <li><a href="#">Privacy Policy</a></li>
-                <li><a href="#">Terms & Conditions</a></li>
-            </ul>
-        </div>
-        <p>© 2024 Fitness Dashboard. All Rights Reserved.</p>
-        <div className="footer-icons">
-            <a href="#">&#x1F3AE;</a>
-            <a href="#">&#x1F426;</a>
-            <a href="#">&#x1F4BB;</a>
-            <a href="#">&#x1F3C0;</a>
-        </div>
-    </footer>
+export const Footer = () => (
+  <footer className='footer'>
+    <div className='footer-section'>
+      <ul>
+        <li>
+          <a href='#'>Fitness Dashboard</a>
+        </li>
+        <li>
+          <a href='#'>Services</a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a href='#'>Watch Videos</a>
+        </li>
+        <li>
+          <a href='#'>Discord</a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a href='#'>Privacy Policy</a>
+        </li>
+        <li>
+          <a href='#'>Terms & Conditions</a>
+        </li>
+      </ul>
+    </div>
+    <p>© 2024 Fitness Dashboard. All Rights Reserved.</p>
+    <div className='footer-icons'>
+      <a href='#'>&#x1F3AE;</a>
+      <a href='#'>&#x1F426;</a>
+      <a href='#'>&#x1F4BB;</a>
+      <a href='#'>&#x1F3C0;</a>
+    </div>
+  </footer>
+);
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
index 39a79b535c..bdf8c1dfaa 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
@@ -1,7 +1,7 @@
 ---
 id: 66c057041df6394ca796bf33
 title: Build a Sentence Maker
-challengeType: 14
+challengeType: 25
 dashedName: build-a-sentence-maker
 ---
 
@@ -119,11 +119,18 @@ You should declare a `firstStory` variable.
 assert.isNotNull(firstStory);
 ```
 
-Your should use the correct story format for both stories: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
+You should use the correct story format for the first story: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
 
 ```js
-const expected = `Once upon a time, there was a(n) ${adjective} ${noun} who loved to eat ${noun2}. The ${noun} lived in a ${place} and had ${adjective2} nostrils that blew fire when it was ${verb}.`;
-assert.strictEqual(secondStory, expected);
+const _initialValues = {}
+for (const name of ['adjective', 'noun', 'noun2', 'place', 'verb', 'adjective2']) {
+    const match = code.match(new RegExp(String.raw`${name}\s*=\s*('|"|${'`'})(?<${name}>.*)\1;?\s*`));
+    _initialValues[name] = match ? match.groups[name] : null;
+}
+
+const expected = `Once upon a time, there was a(n) ${_initialValues['adjective']} ${_initialValues['noun']} who loved to eat ${_initialValues['noun2']}. The ${_initialValues['noun']} lived in a ${_initialValues['place']} and had ${_initialValues['adjective2']} nostrils that blew fire when it was ${_initialValues['verb']}.`;
+
+assert.strictEqual(firstStory, expected);
 ```
 
 You should log your first story using the message `"First story: [firstStory]"`.
@@ -176,6 +183,13 @@ You should reassign the `noun2` variable for the second story.
 assert.lengthOf(__helpers.removeJSComments(code).match(/noun2\s*=\s*/g), 2);
 ```
 
+You should use the correct story format for the second story: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
+
+```js
+const expected = `Once upon a time, there was a(n) ${adjective} ${noun} who loved to eat ${noun2}. The ${noun} lived in a ${place} and had ${adjective2} nostrils that blew fire when it was ${verb}.`;
+assert.strictEqual(secondStory, expected);
+```
+
 You should log your second story using the format `"Second story: [secondStory]"`.
 
 ```js
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
new file mode 100644
index 0000000000..d876f2e316
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
@@ -0,0 +1,599 @@
+---
+id: 6716249b5405164036fd0b0d
+title: Build a Sorting Visualizer
+challengeType: 25
+dashedName: build-a-sorting-visualizer
+demoType: onClick
+---
+
+# --description--
+
+The Bubble Sort algorithm sorts a sequence of integers by comparing couples of adjacent elements starting from the beginning of the sequence. If the first element is greater than the second one, it swaps them. Then, it proceeds with the following couple. When the sequence ends, it starts a new cycle from the beginning of the sequence, and repeats the process until the elements are sorted.
+
+For this lab, you have been provided with all the HTML and CSS. You will use JavaScript to complete the Bubble Sort Visualizer so that it visualizes each step needed by the Bubble Sort algorithm to sort an array of five integers.
+
+Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a function named `generateElement` that returns a random integer between `1` and `100`, inclusive.
+1. You should have a function named `generateArray` that uses the `generateElement` function to return an array containing five random integers.
+1. You should have a function named `generateContainer` that creates and returns an empty `div` element.
+1. You should have a function named `fillArrContainer` that takes an HTML element as the first argument and an array as the second argument.
+1. The `fillArrContainer` function should fill the element passed as the first argument to the function with five `span` elements with the text of an integer from the array passed as the second argument to the function.
+1. You should have a function named `isOrdered` that takes two integers and returns a boolean indicating if the first integer is less than or equal to the second.
+1. You should have a function named `swapElements` that takes an array of integers and a numeric index.
+1. The `swapElements` function should modify the array in place by swapping the element at the passed index and the following element if `isOrdered` returns `false`.
+1. You should have a function named `highlightCurrentEls` that takes an HTML element and a numeric index.
+1. The `highlightCurrentEls` function should set the `border` of the given element's child at the given index, and the child immediately after the index, to have a `dashed` style, a `red` color, and a width of your choice.
+1. When you click `#generate-btn` you should use the `fillArrContainer` function to fill `#starting-array` with five `span` elements, each with a random number as its text. If present, other elements should be removed from `#array-container`.
+1. You should implement the Bubble Sort algorithm so that after you click `#sort-btn`, `#array-container` contains a `div` element for each of the steps required by the Bubble Sort algorithm to sort the starting array, including the `div` representing the starting array and a `div` representing the sorted array. The functions you have created so far can be useful here.
+1. Each `div` should contain five `span` elements, representing the array in its current state of being sorted.
+1. After you click `#sort-btn`, `#starting-array` should represent the starting step with the initial array and the first two integers highlighted.
+1. For each sorting step, you should use `highlightCurrentEls` to highlight the two numbers that are being compared, and swap them in the next step by using `swapElements`.
+
+# --hints--
+
+You should have a function named `generateElement`.
+
+```js
+assert.isFunction(generateElement);
+```
+
+Your `generateElement` function should return a random integer between `1` and `100` inclusive.
+
+```js
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    assert.strictEqual(generateElement(), 26);
+    assert.strictEqual(generateElement(), 9);
+} finally {
+    randomMocker.restore();
+}
+```
+
+You should have a function named `generateArray`.
+
+```js
+assert.isFunction(generateArray)
+```
+
+Your `generateArray` function should make use of the `generateElement` function.
+
+```js
+let flag = false;
+const temp = generateElement;
+generateElement = () => flag = true;
+try {
+    generateArray();
+    assert.isTrue(flag);
+} finally {
+    generateElement = temp;
+}
+```
+
+Your `generateArray` function should return an array containing five random integers between `1` and `100`.
+
+```js
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {
+    assert.deepEqual(generateArray(), [26, 9, 58, 23, 38])
+} finally {
+    randomMocker.restore();
+}
+```
+
+You should have a function named `generateContainer`.
+
+```js
+assert.isFunction(generateContainer);
+```
+
+Your `generateContainer` function should return an empty `div` element.
+
+```js
+const div = generateContainer();
+assert.equal(div.tagName, "DIV");
+assert.isEmpty(div.children);
+```
+
+You should have a function named `fillArrContainer`.
+
+```js
+assert.isFunction(fillArrContainer);
+```
+
+Your `fillArrContainer()` function should fill the element passed as the first argument to the function with five `span` elements with the text of an integer from the array passed as the second argument to the function.
+
+```js
+const testDiv = document.createElement("div");
+const testArr = [15, 98, 17, 5, 63]
+fillArrContainer(testDiv, testArr);
+const children = testDiv.children;
+assert.lengthOf(children, 5);
+Array.from(children).forEach((el, i) => {
+    assert.equal(el.tagName, "SPAN");
+    assert.equal(el.innerText, testArr[i])
+})
+```
+
+You should have a function named `isOrdered`.
+
+```js
+assert.isFunction(isOrdered);
+```
+
+Your `isOrdered` function should take two integers and should return a boolean indicating if the first integer is less than or equal to the second.
+
+```js
+assert.lengthOf(isOrdered, 2);
+assert.isTrue(isOrdered(2, 60));
+assert.isFalse(isOrdered(10, 3));
+assert.isTrue(isOrdered(5, 5));
+```
+
+You should have a function named `swapElements`.
+
+```js
+assert.isFunction(swapElements);
+```
+
+Your `swapElements` function take an array of integers and a numeric index as arguments. It should modify the array passed in place by swapping the element at the given index and the following element if the first element is greater than the second.
+
+```js
+const testArr = [22, 4, 87, 47, 33];
+swapElements(testArr, 0);
+assert.deepEqual(testArr, [4, 22, 87, 47, 33]);
+swapElements(testArr, 1);
+assert.deepEqual(testArr, [4, 22, 87, 47, 33]);
+swapElements(testArr, 2);
+assert.deepEqual(testArr, [4, 22, 47, 87, 33]);
+swapElements(testArr, 3);
+assert.deepEqual(testArr, [4, 22, 47, 33, 87]);
+```
+
+You should have a function named `highlightCurrentEls`.
+
+```js
+assert.isFunction(highlightCurrentEls);
+```
+
+Your `highlightCurrentEls` function should give the descendants of the specified element, located at the given index and the next index, a border that is `dashed`, `red`, and set to a width of your choice.
+
+```js
+const testDiv = document.createElement("div");
+document.querySelector("body").appendChild(testDiv)
+for (let i = 0; i < 5; i++) {
+    testDiv.appendChild(document.createElement("span"));
+}
+const redBorderRegex = /dashed (rgb\(255,\s*0,\s*0\)|#FF0000|#F00|hsl\(0,\s*100%,\s*50%\))/;
+const revertBorder = () => {
+    for (const el of children) {
+        el.style.border = "revert";
+    }
+}
+const children = testDiv.children;
+
+for (let i = 0; i < 3; i++) {
+    highlightCurrentEls(testDiv, i);
+    for (let j = 0; j < 5; j++) {
+        let b = getComputedStyle(children[j]).border;
+        if (j == i || j == i + 1) {            
+            assert.match(b, redBorderRegex);
+            assert.isAbove(parseFloat(b), 0);
+        } else {
+            assert.notMatch(b, redBorderRegex);
+        }
+    }
+    revertBorder();
+}
+testDiv.remove();
+```
+
+When you click `#generate-btn` you should fill `#starting-array` with five `span` elements, each with a random number between `1` and `100` as its text.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+genBtn.click();
+const children = document.querySelector("#starting-array").querySelectorAll("span");
+assert.lengthOf(children, 5);
+Array.from(children).forEach(el => {
+    assert.equal(el.tagName, "SPAN");
+    const num = Number(el.innerText);
+    assert.isAtMost(num, 100);
+    assert.isAtLeast(num, 1);
+})
+```
+
+When `#starting-array` already contains a generated array, or `#array-container` contains the sorted array, clicking the `#generate-btn` should remove other elements in the `#array-container`, leaving only `#starting-array` with newly generated numbers.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+genBtn.dispatchEvent(new Event("click"));
+
+const prevNumbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
+
+sortBtn.dispatchEvent(new Event("click"));
+genBtn.dispatchEvent(new Event("click"));
+
+const container = document.querySelector("#array-container");
+assert.lengthOf(container.children, 1);
+const numbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
+assert.lengthOf(numbers, 5);
+assert.isTrue(prevNumbers.some((num, index) => num !== numbers[index]))
+```
+
+After you click `#sort-btn`, `#array-container` should contain as many `div` elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the `div` representing the starting array and a `div` representing the sorted array.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+// using randomMocker to be sure that the starting array requires 13 steps to be sorted
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    genBtn.dispatchEvent(new Event("click"));
+    sortBtn.dispatchEvent(new Event("click"));
+    const container = document.querySelector("#array-container");
+    assert.lengthOf(container.children, 13)
+    Array.from(container.children).forEach(el => {assert.equal(el.tagName, "DIV")})
+} finally {
+    randomMocker.restore();
+}
+```
+
+After you click `#sort-btn`, each `div` within `#array-container` should contain five `span`, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array.
+
+```js
+const finalArr = [9, 23, 26, 38, 58];
+const arrays = [
+    [26, 9, 58, 23, 38],
+    [9, 26, 58, 23, 38],
+    [9, 26, 58, 23, 38],
+    [9, 26, 23, 58, 38],
+    [9, 26, 23, 38, 58],
+    [9, 26, 23, 38, 58],
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr
+]
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    genBtn.dispatchEvent(new Event("click"));
+    sortBtn.dispatchEvent(new Event("click"));
+    const container = document.querySelector("#array-container");
+    assert.isNotEmpty(container.children);
+    Array.from(container.children).forEach((el, i) => {
+        Array.from(el.children).forEach((j, k) => {
+            assert.strictEqual(Number(j.innerText), arrays[i][k])
+        })
+    })
+} finally {
+    randomMocker.restore();
+}
+```
+
+When you click the `#sort-btn`, you should make use of the `highlightCurrentEls` function to highlight the elements being compared in each step.
+
+```js
+const sortBtn = document.querySelector("#sort-btn");
+let flag = false;
+const temp = highlightCurrentEls;
+highlightCurrentEls = () => flag = true;
+try {
+    sortBtn.dispatchEvent(new Event("click"));
+    assert.isTrue(flag);
+} finally {
+    highlightCurrentEls = temp;
+}
+```
+
+After you click `#sort-btn`, `#starting-array` should represent the starting step with the initial array and the first two integers highlighted using `highlightCurrentEls`.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");   
+genBtn.dispatchEvent(new Event("click"));
+sortBtn.dispatchEvent(new Event("click"));
+const firstContainer = document.querySelector("#starting-array");
+const children = firstContainer.children
+const redBorderRegex = /dashed (rgb\(255,\s*0,\s*0\)|#FF0000|hsl\(0,\s*100%,\s*50%\))/;
+assert.match(getComputedStyle(children[0]).border, redBorderRegex);
+assert.match(getComputedStyle(children[1]).border, redBorderRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <main>
+        <div id="array-container">
+            <div id="starting-array"></div>
+        </div>
+        <div id="btn-container">
+            <button id="generate-btn" type="button">Generate Array</button>
+            <button id="sort-btn" type="button">Sort Array</button>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+main {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+#array-container {
+    max-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 2px;
+
+}
+
+#array-container>div {
+    min-width: 8rem;
+    height: 2rem;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    border-radius: 10px;
+    margin-bottom: 0.2rem;
+    border: 2px solid darkgray;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#starting-array {
+    border: 4px solid darkblue !important;
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+button {
+    padding: 2px;
+    margin: 5px;
+}
+
+span {
+    border-radius: 2px;
+    padding: 0.5px;
+    margin: 0
+}
+
+@media (min-width: 430px) {
+  #array-container>div {
+    min-width: 12rem;    
+  }
+  span {
+    padding: 1px;
+    margin: 1px;
+  }
+}
+```
+
+```js
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <main>
+        <div id="array-container">
+            <div id="starting-array"></div>
+        </div>
+        <div id="btn-container">
+            <button id="generate-btn" type="button">Generate Array</button>
+            <button id="sort-btn" type="button">Sort Array</button>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+main {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+#array-container {
+    max-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 2px;
+
+}
+
+#array-container>div {
+    min-width: 8rem;
+    height: 2rem;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    border-radius: 10px;
+    margin-bottom: 0.2rem;
+    border: 2px solid darkgray;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#starting-array {
+    border: 4px solid darkblue !important;
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+button {
+    padding: 2px;
+    margin: 5px;
+}
+
+#sort-btn {
+   display: none 
+}
+
+span {
+    border-radius: 2px;
+    padding: 0.5px;
+    margin: 0
+}
+
+@media (min-width: 430px) {
+  #array-container>div {
+    min-width: 12rem;    
+  }
+  span {
+    padding: 1px;
+    margin: 1px;
+  }
+}
+```
+
+```js
+const arrayContainer = document.getElementById("array-container");
+const generateArrayBtn = document.getElementById("generate-btn");
+const sortArrayBtn = document.getElementById("sort-btn");
+const arrayLength = 5;
+const minVal = 1;
+const maxVal = 100;
+const isStart = () => arrayContainer.children.length === 1;
+const clearArrayContainer = () => { arrayContainer.innerHTML = '<div id="starting-array"></div>' };
+const showSortBtn = () => {sortArrayBtn.style.display = "inline-block"};
+const hideSortBtn = () => {sortArrayBtn.style.display = "none"};
+const generateElement = () => Math.floor(Math.random() * maxVal + minVal);
+const generateArray = () => Array.from({ length: arrayLength }, generateElement);
+const fillArrContainer = (container, arr) => {
+    container.innerHTML = "";
+    arr.forEach(i => {
+        const el = document.createElement("span");
+        el.innerText = i;
+        el.id = `number-${i}`
+        container.appendChild(el);
+    })
+}
+const isOrdered = (el1, el2) => el1 <= el2;
+
+const swapElements = (arr, n = 0) => {
+    if (n < arr.length - 1 && !isOrdered(arr[n], arr[n + 1])) {
+        const temp = arr[n];
+        arr[n] = arr[n + 1];
+        arr[n + 1] = temp;
+    }
+}
+const getLastChildren = () => arrayContainer.lastElementChild;
+const getLastArr = () => {
+    const els = Array.from(getLastChildren().children);
+    const arr = els.map(el => Number(el.id.replace("number-", "")));
+    return arr;
+}
+const generateContainer = () => {
+    const container = document.createElement("div");
+    arrayContainer.appendChild(container);
+    return container;
+}
+const highlightCurrentEls = (container, n = 0) => {
+    const children = container.children;
+    children[n].style.border = "2px dashed red";
+    children[n + 1].style.border = "2px dashed red";
+}
+
+const highlightSorted = () => {
+    getLastChildren().style.border = "4px solid green";
+}
+
+const bubbleSort = () => {
+    let swapped = true;
+    while (swapped) {
+        const startingArr = getLastArr();
+        startingArr.forEach((_, i) => {
+            if (i + 1 < arrayLength) {
+                highlightCurrentEls(getLastChildren(), i);
+                const arr = getLastArr();
+                swapElements(arr, i);
+                fillArrContainer(generateContainer(), arr);
+            }
+        })
+        const lastArr = getLastArr()
+        if (startingArr.every((el, i) => el === lastArr[i])) swapped = false;
+    }
+}
+
+
+generateArrayBtn.addEventListener("click", () => {
+    if (!isStart()) {
+        clearArrayContainer();
+    }
+    fillArrContainer(document.getElementById("starting-array"), generateArray());
+    showSortBtn();
+});
+
+sortArrayBtn.addEventListener("click", () => {
+    bubbleSort();
+    highlightSorted();
+    hideSortBtn();
+})
+```
+
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
index 7369288bd1..518546a913 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
@@ -1,7 +1,7 @@
 ---
 id: 66c051d13a6a20255a963695
 title: Build a Stylized To-Do list
-challengeType: 14
+challengeType: 25
 dashedName: build-a-stylized-to-do-list
 demoType: onClick
 ---
@@ -28,7 +28,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 6. You should set the text color of the links to a color of your choice.
 7. When your links are visited, the color should change to another color of your choice.
 8. When your links are hovered over, the color should change to another color of your choice.
-9.  When your links are focused, there should be a colored outline around the link.
+9. When your links are focused, there should be a colored outline around the link.
 10. When your links are clicked, the color should change to another color of your choice.
 
 **Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
@@ -44,30 +44,37 @@ assert.exists(document.querySelector('.todo-list'));
 You should remove the default list style from your `.todo-list`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyleType === 'none' || new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyle === 'none');
+const isListStyleTypeNone =
+  new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyleType ===
+  'none';
+const isListStyleNone =
+  new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyle === 'none';
+assert.isTrue(isListStyleTypeNone || isListStyleNone);
 ```
 
 You should have four list items inside the unordered list.
 
 ```js
 const li = document.querySelectorAll('.todo-list li');
-assert.strictEqual(li.length, 8);
+assert.lengthOf(li, 8);
 ```
 
 Each list item should contain an `input` element with the type `checkbox`.
 
 ```js
-const checkboxes = document.querySelectorAll('.todo-list li input[type="checkbox"]');
-assert.strictEqual(checkboxes.length, 4);
+const checkboxes = document.querySelectorAll(
+  '.todo-list li input[type="checkbox"]'
+);
+assert.lengthOf(checkboxes, 4);
 ```
 
 All of the `input` elements should have an `id`.
 
 ```js
 const inputs = document.querySelectorAll('input');
-assert(!!inputs.length);
+assert.isAbove(inputs.length, 0);
 for (let input of inputs) {
-    assert.isAbove(input?.id.length, 0);
+  assert.isAbove(input?.id.length, 0);
 }
 ```
 
@@ -75,23 +82,25 @@ After the `label` elements, there should be an unordered list with the class `su
 
 ```js
 const labelSbItems = document.querySelectorAll('label+ul.sub-item');
-assert.equal(labelSbItems.length, 4);
+assert.lengthOf(labelSbItems, 4);
 ```
 
 The `li` inside the `ul` with the class `sub-item` should have an anchor element with the class `sub-item-link`.
 
 ```js
-const allItems = document.querySelectorAll('label + ul.sub-item li a.sub-item-link');
-assert.equal(allItems.length, 4);
+const allItems = document.querySelectorAll(
+  'label + ul.sub-item li a.sub-item-link'
+);
+assert.lengthOf(allItems, 4);
 ```
 
 All of the anchor elements should have a valid `href`.
 
 ```js
 const links = document.querySelectorAll('a');
-assert(!!links.length);
+assert.isAbove(links.length, 0);
 for (let link of links) {
-    assert.isAbove(link.href.length, 0);
+  assert.isAbove(link.href.length, 0);
 }
 ```
 
@@ -99,9 +108,9 @@ All of the `anchor` elements should have a text.
 
 ```js
 const links = document.querySelectorAll('a');
-assert(!!links.length);
+assert.isAbove(links.length, 0);
 for (let link of links) {
-    assert.isAbove(link.innerText.length, 0);
+  assert.isAbove(link.innerText.length, 0);
 }
 ```
 
@@ -109,9 +118,9 @@ All of the `label` elements should have a `for` attribute.
 
 ```js
 const labels = document.querySelectorAll('label');
-assert(!!labels.length);
+assert.isAbove(labels.length, 0);
 for (let label of labels) {
-    assert.isAbove(label.htmlFor.length, 0);
+  assert.isAbove(label.htmlFor.length, 0);
 }
 ```
 
@@ -119,9 +128,9 @@ All of the `label` elements should have some text.
 
 ```js
 const labels = document.querySelectorAll('label');
-assert(!!labels.length);
+assert.isAbove(labels.length, 0);
 for (let label of labels) {
-    assert.isAbove(label.innerText.length, 0);
+  assert.isAbove(label.innerText.length, 0);
 }
 ```
 
@@ -129,43 +138,62 @@ Each `a` element should have a `target` attribute with the value of `_blank`.
 
 ```js
 const anchors = document.querySelectorAll('a');
-assert(!!anchors.length);
+assert.isAbove(anchors.length, 0);
 for (let anchor of anchors) {
-    assert.equal(anchor.target, '_blank');
+  assert.equal(anchor.target, '_blank');
 }
 ```
 
 The links on the page should have no underline by default.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('a.sub-item-link')?.textDecoration === 'none' || new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none' ||  new __helpers.CSSHelp(document).getStyle('.sub-item-link')?.textDecoration === 'none' );
-
+assert.isTrue(
+  new __helpers.CSSHelp(document).getStyle('a.sub-item-link')
+    ?.textDecoration === 'none' ||
+    new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none' ||
+    new __helpers.CSSHelp(document).getStyle('.sub-item-link')
+      ?.textDecoration === 'none'
+);
 ```
 
 The links should change color when hovered over.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:hover')?.color || new __helpers.CSSHelp(document).getStyle('a:hover')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:hover')?.color);
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:hover')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:hover')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:hover')?.color
+);
 ```
 
 The links should change color when they are being clicked.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:active')?.color || new __helpers.CSSHelp(document).getStyle('a:active')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:active')?.color);
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:active')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:active')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:active')?.color
+);
 ```
 
 The links should have an outline when focused.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:focus')?.outline || new __helpers.CSSHelp(document).getStyle('a:focus')?.outline || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:focus')?.outline);
-
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:focus')?.outline ||
+    new __helpers.CSSHelp(document).getStyle('a:focus')?.outline ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:focus')?.outline
+);
 ```
 
 The links should change color once visited.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color || new __helpers.CSSHelp(document).getStyle('a:visited')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:visited')?.color);
-
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:visited')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:visited')?.color
+);
 ```
 
 # --seed--
@@ -197,130 +225,131 @@ assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Styled To-Do List</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <h1>My To-Do List</h1>
-        <ul class="todo-list">
+      <h1>My To-Do List</h1>
+      <ul class="todo-list">
+        <li>
+          <input type="checkbox" id="task1" />
+          <label for="task1">Explore gaming keyboards</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task1">
-                <label for="task1">Explore gaming keyboards</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">Store link</a>
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link">Store link</a>
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task2" />
+          <label for="task2">Finish the report</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task2">
-                <label for="task2">Finish the report</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">Request Access</a>
-                    </li>
-                </ul>
-
+              <a href="#" target="_blank" class="sub-item-link"
+                >Request Access</a
+              >
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task3" />
+          <label for="task3">View Phone's Warranty</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task3">
-                <label for="task3">View Phone's Warranty</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">View Receipts</a>
-
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link"
+                >View Receipts</a
+              >
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task4" />
+          <label for="task4">Check Processor Specs</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task4">
-                <label for="task4">Check Processor Specs</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">View Model Number</a>
-
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link"
+                >View Model Number</a
+              >
             </li>
-        </ul>
+          </ul>
+        </li>
+      </ul>
     </div>
 </body>
-
 </html>
 ```
 
 ```css
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
-    margin: 0;
-    padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  margin: 0;
+  padding: 20px;
 }
 
 .container {
-    max-width: 400px;
-    margin: 0 auto;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
-    text-align: center;
-    color: #333;
+  text-align: center;
+  color: #333;
 }
 
 .todo-list {
-    list-style-type: none;
-    padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 .todo-list li {
-    margin-bottom: 15px;
-    line-height: 1.6;
-    padding: 10px;
-    background-color: #e5f1e5;
-    border-radius: 10px;
-    position: relative;
+  margin-bottom: 15px;
+  line-height: 1.6;
+  padding: 10px;
+  background-color: #e5f1e5;
+  border-radius: 10px;
+  position: relative;
 }
 
 a.sub-item-link {
-    margin-left: 10px;
-    text-decoration: none;
+  margin-left: 10px;
+  text-decoration: none;
 }
 
 .sub-item-link:link {
-    color: blue;
+  color: blue;
 }
 
 .sub-item-link:visited {
-    color: purple;
+  color: purple;
 }
 
 .sub-item-link:hover {
-    color: red;
+  color: red;
 }
 
 .sub-item-link:focus {
-    outline: 2px solid blue;
-    outline-offset: 2px;
+  outline: 2px solid blue;
+  outline-offset: 2px;
 }
 
 .sub-item-link:active {
-    color: green;
+  color: green;
 }
 
 .sub-item {
-    list-style-type: square;
+  list-style-type: square;
 }
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
index fde659a791..7f9134a3fe 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78af367417b2b2512b03
 title: 製作一個調查表格
-challengeType: 14
+challengeType: 25
 dashedName: build-a-survey-form
 demoType: onClick
 ---
@@ -35,261 +35,297 @@ You should have an `h1` element with an `id` of `title`.
 
 ```js
 const el = document.getElementById('title');
-assert(!!el && el.tagName === 'H1');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'H1');
 ```
 
 Your `#title` should not be empty.
 
 ```js
 const el = document.getElementById('title');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 You should have a `p` element with an `id` of `description`.
 
 ```js
 const el = document.getElementById('description');
-assert(!!el && el.tagName === 'P');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'P');
 ```
 
 Your `#description` should not be empty.
 
 ```js
 const el = document.getElementById('description');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 You should have a `form` element with an `id` of `survey-form`.
 
 ```js
 const el = document.getElementById('survey-form');
-assert(!!el && el.tagName === 'FORM');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'FORM');
 ```
 
 You should have an `input` element with an `id` of `name`.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#name` should have a `type` of `text`.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.type === 'text');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'text');
 ```
 
 Your `#name` should require input.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.required);
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 Your `#name` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #name');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` element with an `id` of `email`.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#email` should have a `type` of `email`.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.type === 'email');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'email');
 ```
 
 Your `#email` should require input.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.required);
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 Your `#email` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #email');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` element with an `id` of `number`.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#number` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #number');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#number` should have a `type` of `number`.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.type === 'number');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'number');
 ```
 
 Your `#number` should have a `min` attribute with a numeric value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.min && isFinite(el.min));
+assert.isNotNull(el);
+assert.isNotEmpty(el.min);
+assert.isTrue(isFinite(el.min));
 ```
 
 Your `#number` should have a `max` attribute with a numeric value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.max && isFinite(el.max));
+assert.isNotNull(el);
+assert.isNotEmpty(el.max);
+assert.isTrue(isFinite(el.max));
 ```
 
 You should have a `label` element with an `id` of `name-label`.
 
 ```js
 const el = document.getElementById('name-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 You should have a `label` element with an `id` of `email-label`.
 
 ```js
 const el = document.getElementById('email-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 You should have a `label` element with an `id` of `number-label`.
 
 ```js
 const el = document.getElementById('number-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 Your `#name-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('name-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#email-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('email-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#number-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('number-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#name-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #name-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#email-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #email-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#number-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #number-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#name` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 Your `#email` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 Your `#number` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 You should have a `select` field with an `id` of `dropdown`.
 
 ```js
 const el = document.getElementById('dropdown');
-assert(!!el && el.tagName === 'SELECT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'SELECT');
 ```
 
 Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
 
 ```js
 const els = document.querySelectorAll('#dropdown option:not([disabled])');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 Your `#dropdown` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #dropdown');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have at least two `input` elements with a `type` of `radio` (radio buttons).
 
 ```js
 const els = document.querySelectorAll('input[type="radio"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 You should have at least two radio buttons that are descendants of `#survey-form`.
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="radio"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 All your radio buttons should have a `value` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('input[type="radio"]');
-const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  'input[type="radio"][value=""], input[type="radio"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 All your radio buttons should have a `name` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('input[type="radio"]');
-const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  'input[type="radio"][name=""], input[type="radio"]:not([name])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 Every radio button group should have at least 2 radio buttons.
@@ -302,59 +338,64 @@ if (radioButtons) {
   radioButtons.forEach(el => {
     if (!groups[el.name]) groups[el.name] = [];
     groups[el.name].push(el);
-  })
+  });
 }
 
 const groupKeys = Object.keys(groups);
 
 groupKeys.forEach(key => {
   if (groups[key].length < 2) assert(false);
-})
+});
 
-assert(groupKeys.length > 0);
+assert.isAbove(groupKeys.length, 0);
 ```
 
 You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 All your checkboxes inside `#survey-form` should have a `value` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]');
-const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  '#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 You should have at least one `textarea` element that is a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form textarea');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` or `button` element with an `id` of `submit`.
 
 ```js
 const el = document.getElementById('submit');
-assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'));
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'INPUT' || el.tagName === 'BUTTON');
 ```
 
 Your `#submit` should have a `type` of `submit`.
 
 ```js
 const el = document.getElementById('submit');
-assert(!!el && el.type === 'submit');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'submit');
 ```
 
 Your `#submit` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #submit');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 # --seed--
@@ -364,17 +405,13 @@ assert(!!el);
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Survey Form</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
-</html> 
+  <body></body>
+</html>
 ```
 
 # --solutions--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
index 888c9235df..2f25ded8e8 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78b0367417b2b2512b05
 title: 製作一個技術文檔頁面
-challengeType: 14
+challengeType: 25
 demoType: onClick
 dashedName: build-a-technical-documentation-page
 ---
@@ -35,141 +35,147 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。
 
 ```js
-const el = document.getElementById('main-doc')
-assert(!!el)
+const el = document.getElementById('main-doc');
+assert.isNotNull(el);
 ```
 
 你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc section');
+assert.isAtLeast(els.length, 5);
 ```
 
 你所有的 `.main-section` 元素都應該是 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (el.tagName !== 'SECTION') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'SECTION') {
+    assert.fail();
+  }
+});
+assert.isAbove(els.length, 0);
 ```
 
 你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc .main-section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc .main-section');
+assert.isAtLeast(els.length, 5);
 ```
 
 每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
-})
-assert(els.length > 0)
+  if (el.firstElementChild?.tagName !== 'HEADER') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你的 `header` 元素不應爲空。
 
 ```js
-const els = document.querySelectorAll('header')
+const els = document.querySelectorAll('header');
 els.forEach(el => {
-  if (el.innerText?.length <= 0) assert(false)
-})
-assert(els.length > 0)
+  if (el.innerText?.length <= 0) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.main-section` 元素都應該有 `id`。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (!el.id || el.id === '') assert(false)
-})
-assert(els.length > 0)
+  if (!el.id || el.id === '') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
-  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
-})
-assert(els.length > 0)
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_');
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 在你的 `.main-section` 元素中總計應有至少 10 個 `p` 元素
 
 ```js
-const els = document.querySelectorAll('.main-section p')
-assert(els.length >= 10)
+const els = document.querySelectorAll('.main-section p');
+assert.isAtLeast(els.length, 10);
 ```
 
 所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section code')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section code');
+assert.isAtLeast(els.length, 5);
 ```
 
 所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section li')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section li');
+assert.isAtLeast(els.length, 5);
 ```
 
 你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。
 
 ```js
-const el = document.getElementById('navbar')
-assert(!!el && el.tagName === 'NAV')
+const el = document.getElementById('navbar');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'NAV');
 ```
 
 你的 `#navbar` 應該只有一個 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('#navbar header')
-assert(els.length === 1)
+const els = document.querySelectorAll('#navbar header');
+assert.lengthOf(els, 1);
 ```
 
 你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。
 
 ```js
-const els = document.querySelectorAll('a.nav-link')
-assert(els.length >= 1)
+const els = document.querySelectorAll('a.nav-link');
+assert.isAtLeast(els.length, 1);
 ```
 
 你所有的 `.nav-link` 元素都應該是錨點（`a`）元素。
 
 ```js
-const els = document.querySelectorAll('.nav-link')
+const els = document.querySelectorAll('.nav-link');
 els.forEach(el => {
-  if (el.tagName !== 'A') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'A') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.nav-link` 元素都應該在 `#navbar` 中。
 
 ```js
-const els1 = document.querySelectorAll('.nav-link')
-const els2 = document.querySelectorAll('#navbar .nav-link')
-assert(els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.nav-link');
+const els2 = document.querySelectorAll('#navbar .nav-link');
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。
 
 ```js
-const els1 = document.querySelectorAll('.main-section')
-const els2 = document.querySelectorAll('.nav-link')
-assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.main-section');
+const els2 = document.querySelectorAll('.nav-link');
+assert.isNotEmpty(els1);
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 `#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接（`a`）之前。
@@ -177,54 +183,66 @@ assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
 ```js
 const navLinks = document.querySelectorAll('#navbar a.nav-link');
 const header = document.querySelector('#navbar header');
-navLinks.forEach((navLink) => {
+navLinks.forEach(navLink => {
   if (
-    (
-      header.compareDocumentPosition(navLink) &
-      Node.DOCUMENT_POSITION_PRECEDING
-    ) 
-  ) assert(false)
+    header.compareDocumentPosition(navLink) & Node.DOCUMENT_POSITION_PRECEDING
+  )
+    assert.fail();
 });
-assert(!!header)
+assert.isNotNull(header);
 ```
 
 每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。
 
 ```js
-const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
-  el.firstElementChild?.innerText?.trim().toUpperCase()
-)
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(
+  el => el.firstElementChild?.innerText?.trim().toUpperCase()
+);
 const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
   el.innerText?.trim().toUpperCase()
-)
-const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
-assert(headerText.length > 0 && linkText.length > 0 && remainder.length === 0)
+);
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1);
+
+assert.isNotEmpty(headerText);
+assert.isNotEmpty(linkText);
+assert.isEmpty(remainder);
 ```
 
 每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。
 
 ```js
-const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
-const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
-const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
-assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.getAttribute('href')
+);
+const mainSectionIDs = Array.from(
+  document.querySelectorAll('.main-section')
+).map(el => el.id);
+const missingHrefValues = mainSectionIDs.filter(
+  str => hrefValues.indexOf('#' + str) === -1
+);
+assert.isNotEmpty(hrefValues);
+assert.isNotEmpty(mainSectionIDs);
+assert.isEmpty(missingHrefValues, 0);
 ```
 
 你的 `#navbar` 元素應該始終位於視口的頂部。
 
 ```js
-const el = document.getElementById('navbar')
-const left1 = el?.offsetLeft
-const left2 = el?.offsetLeft
-assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+const el = document.getElementById('navbar');
+const left1 = el?.offsetLeft;
+assert.isNotNull(el);
+assert.isAtLeast(left1, -15);
+assert.isAtMost(left1, 15);
 ```
 
 你的技術文檔項目應該使用至少一個媒體查詢。
 
 ```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el =>
+  el.getAttribute('media')
+);
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media');
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 # --seed--
@@ -234,17 +252,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Technical Documentation Page</title>
-</head>
-
-<body>
+  </head>
 
-</body>
+  <body>
 
-</html> 
+  </body>
+</html>
 ```
 
 ```css
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index cbf2f077ac..6076f4db8f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -1,7 +1,7 @@
 ---
 id: 669e2f60e83c011754f711f9
 title: Build a Travel Agency Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-travel-agency-page
 demoType: onClick
 ---
@@ -42,7 +42,10 @@ assert.match(code, /<html\s+lang\s*=\s*('|")en\1\s*>[\s\S]*<\/\s*html\s*>/i);
 You should have a `head` element within the `html` element.
 
 ```js
-assert.match(code, /<html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i);
+assert.match(
+  code,
+  /<html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i
+);
 ```
 
 You should have a `meta` element within your `head` element.
@@ -60,7 +63,10 @@ assert.match(code, /<\s*meta[\s\S]+?charset\s*=\s*('|")UTF-8\1/i);
 You should have `title` element within your `head` element.
 
 ```js
-assert.match(code, /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i);
+assert.match(
+  code,
+  /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i
+);
 ```
 
 Your `title` element should have your travel agency name.
@@ -72,25 +78,30 @@ assert.isAbove(document.querySelector('title')?.innerText.trim().length, 0);
 You should have a `body` element within your `html` element.
 
 ```js
-assert(code.match(/<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i));
+assert.match(
+  code,
+  /<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i
+);
 ```
 
 You should have an `h1` element to present your travel destinations.
 
 ```js
-assert.isAbove(document.querySelector('h1')?.innerText.length, 0)
+assert.isAbove(document.querySelector('h1')?.innerText.length, 0);
 ```
 
 You should only have one `h1` element.
 
 ```js
-assert.lengthOf(document.querySelectorAll('h1'), 1)
+assert.lengthOf(document.querySelectorAll('h1'), 1);
 ```
 
 You should have a `p` element below the `h1` element.
 
 ```js
-assert.strictEqual(document.querySelector('h1')?.nextElementSibling, document.querySelector('p'))
+assert.strictEqual(
+  document.querySelector('h1')?.nextElementSibling.tagName, 'P'
+);
 ```
 
 Your first `p` element should introduce the travel opportunities.
@@ -108,34 +119,40 @@ assert.equal(document.querySelectorAll('h2')[0]?.innerText, 'Packages');
 You should have a `p` element below your first `h2` element.
 
 ```js
-assert.strictEqual(document.querySelector('h2')?.nextElementSibling, document.querySelectorAll('p')?.[1])
+assert.strictEqual(
+    document.querySelector('h2')?.nextElementSibling.tagName, 'P'
+);
 ```
 
 Your second `p` element should introduce briefly the various packages.
 
 ```js
-assert.isNotEmpty(document.querySelectorAll('p')?.[1]?.textContent?.trim())
+assert.isNotEmpty(document.querySelectorAll('p')?.[1]?.textContent?.trim());
 ```
 
 You should have an unordered list element below your second `p` element.
 
 ```js
-assert.strictEqual(document.querySelectorAll('p')?.[1]?.nextElementSibling?.tagName, 'UL');
+assert.strictEqual(
+  document.querySelectorAll('p')?.[1]?.nextElementSibling?.tagName,
+  'UL'
+);
 ```
 
 You should have two items in your unordered list.
 
 ```js
-assert.equal(document.querySelectorAll('li').length,  2);
+assert.lengthOf(document.querySelectorAll('p + ul li'), 2);
 ```
 
 Both your list items should contain an anchor element.
 
 ```js
-const listItems = $('li');
-assert(!!listItems.length);
+const listItems = document.querySelectorAll('li');
+assert.isNotEmpty(listItems);
 for (let e of listItems) {
-  assert(e.children[0].tagName === 'A' && e.children.length === 1);
+  assert.strictEqual(e.children[0].tagName, 'A');
+  assert.lengthOf(e.children, 1);
 }
 ```
 
@@ -154,88 +171,99 @@ assert.equal(document.querySelectorAll('a')[1]?.innerText, 'Private Tours');
 You should have an `h2` element after your unordered list.
 
 ```js
-assert($('h2')[1]?.previousElementSibling.tagName === 'UL');
+assert.strictEqual(
+  document.querySelectorAll('h2')[1]?.previousElementSibling.tagName,
+  'UL'
+);
 ```
 
 Your second `h2` element should have the text `Top Itineraries`.
 
 ```js
-assert.equal($('h2')[1]?.innerText, 'Top Itineraries');
+assert.equal(document.querySelectorAll('h2')[1]?.innerText, 'Top Itineraries');
 ```
 
 You should have at least three `figure` elements.
 
 ```js
-assert.isAtLeast(document.querySelectorAll('figure').length, 3)
+assert.isAtLeast(document.querySelectorAll('figure').length, 3);
 ```
 
 Each `figure` element should contain an anchor element as its first child.
 
 ```js
-const figures = $('figure');
-assert(!!figures.length);
+const figures = document.querySelectorAll('figure');
+assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[0].tagName,'A');
+  assert.equal(figure.children[0].tagName, 'A');
 }
 ```
 
 Each `figure` element should contain a `figcaption` element as its second child.
 
 ```js
-const figures = $('figure');
-assert(!!figures.length);
+const figures = document.querySelectorAll('figure');
+assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
+  assert.equal(figure.children[1]?.tagName, 'FIGCAPTION');
 }
 ```
 
+Each `figcaption` should contain some text.
+
+```js
+const figcaptionEls = document.querySelectorAll('figcaption');
+assert.isNotEmpty(figcaptionEls);
+figcaptionEls.forEach((figcaption => assert.isNotEmpty(figcaption.innerText)));
+```
+
 Each of the `a` elements that are children of your `figure` elements should contain an image.
 
 ```js
-const anchors = $('figure > a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('figure > a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-  assert.equal(anchor.children[0].tagName, 'IMG');
+  assert.equal(anchor.children[0]?.tagName, 'IMG');
 }
 ```
 
 Each `img` element should have a valid `src` attribute.
 
 ```js
-const images = $('img');
-assert(!!images.length);
+const images = document.querySelectorAll('img');
+assert.isNotEmpty(images);
 for (let image of images) {
-    assert.isAbove(image.src.length, 0);
+  assert.isAbove(image.src.length, 0);
 }
 ```
 
 Each `img` element should have an `alt` attribute with an appropriate value.
 
 ```js
-const images = $('img');
-assert(!!images.length);
+const images = document.querySelectorAll('img');
+assert.isNotEmpty(images);
 for (let image of images) {
-    assert.isAbove(image.alt.length, 0);
+  assert.isAbove(image.alt.length, 0);
 }
 ```
 
 Each `a` element should have an `href` attribute with the value of `https://www.freecodecamp.org/learn`.
 
 ```js
-const anchors = $('a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-    assert.equal(anchor.href, 'https://www.freecodecamp.org/learn');
+  assert.equal(anchor.href, 'https://www.freecodecamp.org/learn');
 }
 ```
 
 Each `a` element should have a `target` attribute with the value of `_blank`.
 
 ```js
-const anchors = $('a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-    assert.equal(anchor.target, '_blank');
+  assert.equal(anchor.target, '_blank');
 }
 ```
 
@@ -252,38 +280,64 @@ for (let anchor of anchors) {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>Travel Agency Page</title>
-    </head>
-    <body>
-        <h1>Discover Italy</h1>
-        <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
-        <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
-        <ul>
-            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
-            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
-        </ul>
-        <h2>Top Itineraries</h2>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="colosseum view" >                
-            </a>
-            <figcaption>Rome and Center Italy</figcaption>
-        </figure>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="dolomites mountain view" >                
-            </a>
-            <figcaption>Nature and National Parks</figcaption>            
-        </figure>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="sea view" >                
-            </a>
-            <figcaption>South Italy and Islands</figcaption>
-        </figure>                
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Travel Agency Page</title>
+  </head>
+  <body>
+    <h1>Discover Italy</h1>
+    <p>
+      Art, folklore, food, nature, and more. Choose among our wide selection of
+      guided tours and excursions, and live an unforgettable experience
+      exploring Italy.
+    </p>
+    <h2>Packages</h2>
+    <p>
+      We offer an extensive range of holiday solutions to accommodate the needs
+      of all our clients. From daily excursions in the most beautiful cities, to
+      thorough tours of hidden villages and medieval towns to discover Italy's
+      lesser-known sides.
+    </p>
+    <ul>
+      <li>
+        <a href="https://www.freecodecamp.org/learn" target="_blank"
+          >Group Travels</a
+        >
+      </li>
+      <li>
+        <a href="https://www.freecodecamp.org/learn" target="_blank"
+          >Private Tours</a
+        >
+      </li>
+    </ul>
+    <h2>Top Itineraries</h2>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg"
+          alt="colosseum view"
+        />
+      </a>
+      <figcaption>Rome and Center Italy</figcaption>
+    </figure>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg"
+          alt="dolomites mountain view"
+        />
+      </a>
+      <figcaption>Nature and National Parks</figcaption>
+    </figure>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg"
+          alt="sea view"
+        />
+      </a>
+      <figcaption>South Italy and Islands</figcaption>
+    </figure>
+  </body>
 </html>
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index 19801d0898..81adc2dcc3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -1,7 +1,7 @@
 ---
 id: bd7158d8c442eddfaeb5bd18
 title: 製作一個致敬頁
-challengeType: 14
+challengeType: 25
 demoType: onClick
 dashedName: build-a-tribute-page
 ---
@@ -29,111 +29,125 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你的頁面應該包含一個 `main` 元素，且它有一個值爲`main` 的`id`屬性。
 
 ```js
-const el = document.getElementById('main')
-assert(!!el && el.tagName === 'MAIN')
+const el = document.getElementById('main');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'MAIN');
 ```
 
 你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 應該是 `#main` 的子元素。
 
 ```js
-const el1 = document.querySelector('#main #img-div')
-const el2 = document.querySelector('#main #image')
-const el3 = document.querySelector('#main #img-caption')
-const el4 = document.querySelector('#main #tribute-info')
-const el5 = document.querySelector('#main #tribute-link')
-assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+const el1 = document.querySelector('#main #img-div');
+const el2 = document.querySelector('#main #image');
+const el3 = document.querySelector('#main #img-caption');
+const el4 = document.querySelector('#main #tribute-info');
+const el5 = document.querySelector('#main #tribute-link');
+assert.isNotNull(el1);
+assert.isNotNull(el2);
+assert.isNotNull(el3);
+assert.isNotNull(el4);
+assert.isNotNull(el5);
 ```
 
 你應該有一個 `id` 爲 `title` 的元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el)
+const el = document.getElementById('title');
+assert.isNotNull(el);
 ```
 
 你的 `#title` 元素不應爲空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText, 0);
 ```
 
 你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-div')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+const el = document.getElementById('img-div');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGURE');
 ```
 
 你應該有一個 `id` 爲 `image` 的 `img` 元素。
 
 ```js
-const el = document.getElementById('image')
-assert(!!el && el.tagName === 'IMG')
+const el = document.getElementById('image');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'IMG');
 ```
 
 你的 `#image` 元素應該是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #image')
-assert(!!el)
+const el = document.querySelector('#img-div #image');
+assert.isNotNull(el);
 ```
 
 你應該有一個 `id` 爲 `img-caption` 的 `figcaption` 元素或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGCAPTION');
 ```
 
 你的 `#img-caption` 元素應該是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #img-caption')
-assert(!!el)
+const el = document.querySelector('#img-div #img-caption');
+assert.isNotNull(el);
 ```
 
 你的 `#img-caption` 不應爲空。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你應該有一個 `id` 爲 `tribute-info` 的元素。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
 ```
 
 你的 `#tribute-info` 不應爲空。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你應該有一個 `id` 爲 `tribute-link` 的 `a` 元素。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.tagName === 'A')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#tribute-link` 應該有一個 `href` 屬性和值。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && !!el.href && el.href.length > 0)
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.isNotNull(el.href);
+assert.isNotEmpty(el.href);
 ```
 
 你的 `#tribute-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.target === '_blank')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的 `img` 元素應該具有 `display` 值爲 `block`。
@@ -141,8 +155,8 @@ assert(!!el && el.target === '_blank')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('display')
-assert(style === 'block')
+const style = imgStyle?.getPropertyValue('display');
+assert.strictEqual(style, 'block');
 ```
 
 你的 `#image` 應該具有 `max-width` 值爲 `100%`。
@@ -150,8 +164,8 @@ assert(style === 'block')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('max-width')
-assert(style === '100%')
+const style = imgStyle?.getPropertyValue('max-width');
+assert.strictEqual(style, '100%');
 ```
 
 你的 `#image` 應該具有 `height` 值爲 `auto`。
@@ -163,9 +177,9 @@ const imgStyle = window.getComputedStyle(img);
 const oldDisplayValue = imgStyle.getPropertyValue('display');
 const oldDisplayPriority = imgStyle.getPropertyPriority('display');
 img?.style.setProperty('display', 'none', 'important');
-const heightValue = imgStyle?.getPropertyValue('height')
+const heightValue = imgStyle?.getPropertyValue('height');
 img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
-assert(heightValue === 'auto')
+assert.strictEqual(heightValue, 'auto');
 ```
 
 你的 `#image` 元素應該在其父元素內居中。
@@ -180,7 +194,8 @@ const img = document.getElementById('image'),
   parentRight = imgParent?.getBoundingClientRect().right,
   leftMargin = imgLeft - parentLeft,
   rightMargin = parentRight - imgRight;
-assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+assert.isBelow(leftMargin - rightMargin, 6);
+assert.isBelow(rightMargin - leftMargin, 6);
 ```
 
 # --seed--
@@ -190,16 +205,12 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Tribute Page</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
+  <body></body>
 </html>
 ```
 
@@ -253,7 +264,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
             <strong>1938</strong> - Marries wife of 69 years Margret Gibson.
             Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman,
             he returns to school study under Stakman, who teaches him about
-            breeding pest-resistent plants.
+            breeding pest-resistant plants.
           </li>
           <li>
             <strong>1941</strong> - Tries to enroll in the military after the
@@ -269,7 +280,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
             <strong>1944</strong> - Rejects a 100% salary increase from Dupont,
             leaves behind his pregnant wife, and flies to Mexico to head a new
             plant pathology program. Over the next 16 years, his team breeds
-            6,000 different strains of disease resistent wheat - including
+            6,000 different strains of disease resistant wheat - including
             different varieties for each major climate on Earth.
           </li>
           <li>
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
index 0f0ba9a929..afc337de68 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
@@ -1,7 +1,7 @@
 ---
 id: 669e81368e52b3a5c35a2dc5
 title: Build a Video Compilation Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-video-compilation-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
index afe533d6f5..e86fb0152f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
@@ -1,7 +1,7 @@
 ---
 id: 673b567e3ba535dda140d278
 title: Build a Voting System
-challengeType: 14
+challengeType: 25
 dashedName: build-a-voting-system
 ---
 
@@ -35,8 +35,7 @@ In this lab, you will build a voting system that uses `Map` to create a poll and
 
    - If the voter has already voted, the function should display the message `Voter <voterId> has already voted for "<option>".`
 
-   - If the voter has not voted, `voterId` should be added to the `Set` of `voters` for this option. The function should return the message  `Voter <voterId> voted for "<option>".`
-
+   - If the voter has not voted, `voterId` should be added to the `Set` of `voters` for this option. The function should return the message `Voter <voterId> voted for "<option>".`
 
 6. You should have at least three options in your `poll`.
 
@@ -51,7 +50,7 @@ OptionB: N votes
 .
 .
 
-/* 
+/*
 sample output
 
 Poll Results:
@@ -115,9 +114,8 @@ const pollCopy = new Map(poll);
 try {
   poll.clear();
 
-  addOption("Turkey");
-  assert.instanceOf(poll.get("Turkey"), Set);
-
+  addOption('Turkey');
+  assert.instanceOf(poll.get('Turkey'), Set);
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -132,7 +130,7 @@ try {
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  assert.equal(addOption("Egypt"), 'Option "Egypt" added to the poll.');
+  assert.equal(addOption('Egypt'), 'Option "Egypt" added to the poll.');
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -144,7 +142,7 @@ try {
 Adding an empty option should return `"Option cannot be empty."`
 
 ```js
-assert.equal(addOption(""), 'Option cannot be empty.');
+assert.equal(addOption(''), 'Option cannot be empty.');
 ```
 
 When `Turkey` is already added, `addOption("Turkey")` should return `Option "Turkey" already exists.`
@@ -153,10 +151,9 @@ When `Turkey` is already added, `addOption("Turkey")` should return `Option "Tur
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  addOption("Turkey");
-  assert.equal(addOption("Turkey"), 'Option "Turkey" already exists.');
-
+  addOption('Turkey');
+  addOption('Turkey');
+  assert.equal(addOption('Turkey'), 'Option "Turkey" already exists.');
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -171,8 +168,11 @@ When `Malysia` exists in the voting options, `vote("Malysia", "traveler1")` shou
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Malysia");
-  assert.equal(vote("Malysia", "traveler1"), 'Voter traveler1 voted for "Malysia".');
+  addOption('Malysia');
+  assert.equal(
+    vote('Malysia', 'traveler1'),
+    'Voter traveler1 voted for "Malysia".'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -187,11 +187,10 @@ try {
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Alaska");
-  vote("Alaska", "seal");
-  assert.isTrue(poll.get("Alaska").has("seal"));
-
-  } finally {
+  addOption('Alaska');
+  vote('Alaska', 'seal');
+  assert.isTrue(poll.get('Alaska').has('seal'));
+} finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
     poll.set(key, val);
@@ -205,9 +204,12 @@ When `traveler1` tries to vote for `Algeria` again, `vote("Algeria", "traveler1"
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Algeria");
-  vote("Algeria", "traveler1");
-  assert.equal(vote("Algeria", "traveler1"), 'Voter traveler1 has already voted for "Algeria".');
+  addOption('Algeria');
+  vote('Algeria', 'traveler1');
+  assert.equal(
+    vote('Algeria', 'traveler1'),
+    'Voter traveler1 has already voted for "Algeria".'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -222,12 +224,12 @@ Duplicate votes should not increase the size of the `Set`.
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  vote("Turkey", "traveler1");
-  const voterSet = poll.get("Turkey");
+  addOption('Turkey');
+  vote('Turkey', 'traveler1');
+  const voterSet = poll.get('Turkey');
   const initialSize = voterSet.size;
 
-  vote("Turkey", "traveler1");
+  vote('Turkey', 'traveler1');
   assert.equal(voterSet.size, initialSize);
 } finally {
   poll.clear();
@@ -243,7 +245,10 @@ When `Nigeria` is not in the voting options, `vote("Nigeria", "traveler2")` shou
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-assert.equal(vote("Nigeria", "traveler2"), 'Option "Nigeria" does not exist.');
+  assert.equal(
+    vote('Nigeria', 'traveler2'),
+    'Option "Nigeria" does not exist.'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -258,10 +263,10 @@ A unique option should be able to receive multiple votes.
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Bali");
-  assert.equal(vote("Bali", "traveler1"), 'Voter traveler1 voted for "Bali".');
-  assert.equal(vote("Bali", "traveler2"), 'Voter traveler2 voted for "Bali".');
-  assert.equal(poll.get("Bali").size, 2);
+  addOption('Bali');
+  assert.equal(vote('Bali', 'traveler1'), 'Voter traveler1 voted for "Bali".');
+  assert.equal(vote('Bali', 'traveler2'), 'Voter traveler2 voted for "Bali".');
+  assert.equal(poll.get('Bali').size, 2);
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -273,18 +278,20 @@ try {
 `displayResults()` should return the results in the correct format.
 
 ```js
-
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  addOption("Morocco");
+  addOption('Turkey');
+  addOption('Morocco');
 
-  vote("Turkey", "traveler1");
-  vote("Turkey", "traveler2");
-  vote("Morocco", "traveler3");
+  vote('Turkey', 'traveler1');
+  vote('Turkey', 'traveler2');
+  vote('Morocco', 'traveler3');
 
-  assert.equal(displayResults(), "Poll Results:\nTurkey: 2 votes\nMorocco: 1 votes");
+  assert.equal(
+    displayResults(),
+    'Poll Results:\nTurkey: 2 votes\nMorocco: 1 votes'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -307,8 +314,8 @@ try {
 const poll = new Map();
 
 function addOption(option) {
-  if (!option || option.trim() === "") {
-    return "Option cannot be empty.";
+  if (!option || option.trim() === '') {
+    return 'Option cannot be empty.';
   }
   if (!poll.has(option)) {
     poll.set(option, new Set());
@@ -318,7 +325,6 @@ function addOption(option) {
   }
 }
 
-
 function vote(option, voterId) {
   if (!poll.has(option)) {
     return `Option "${option}" does not exist.`;
@@ -327,26 +333,24 @@ function vote(option, voterId) {
   if (voters.has(voterId)) {
     return `Voter ${voterId} has already voted for "${option}".`;
   } else {
-    voters.add(voterId); 
+    voters.add(voterId);
     return `Voter ${voterId} voted for "${option}".`;
   }
 }
 
 function displayResults() {
-    let results = "Poll Results:\n";
-    for (let [option, voters] of poll.entries()) {
-        results += `${option}: ${voters.size} votes\n`;
-    }
-    return results.trim();
+  let results = 'Poll Results:\n';
+  for (let [option, voters] of poll.entries()) {
+    results += `${option}: ${voters.size} votes\n`;
+  }
+  return results.trim();
 }
 
+addOption('Turkey');
+addOption('Morocco');
+addOption('Spain');
 
-addOption("Turkey");
-addOption("Morocco");
-addOption("Spain");
-
-vote("Turkey", "traveler1");
-vote("Turkey", "traveler2");
-vote("Morocco", "traveler3");
-
+vote('Turkey', 'traveler1');
+vote('Turkey', 'traveler2');
+vote('Morocco', 'traveler3');
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
index d07e1c609d..ad5b97d0cd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
@@ -1,7 +1,7 @@
 ---
 id: 66f12a88741aeb16b9246c59
 title: Build a Weather App
-challengeType: 14
+challengeType: 25
 dashedName: lab-weather-app
 demoType: onClick
 ---
@@ -27,7 +27,7 @@ You will use a weather API. The output data has the following format:
     "temp_min": 1.72, // min temperature of the day in C
     "temp_max": 3.49, // max temperature of the day in C
     "pressure": 1010, // atmospheric pressure in hPa
-    "humidity": 81, // humidity in %
+    "humidity": 81 // humidity in %
   },
   "visibility": 10000, // distance in meters
   "wind": {
@@ -35,7 +35,7 @@ You will use a weather API. The output data has the following format:
     "deg": 285, // orientation of the wind in degrees
     "gust": 3.13 // gust speed in m/s
   },
-  "name": "London",
+  "name": "London"
 }
 ```
 
@@ -43,7 +43,8 @@ You will use a weather API. The output data has the following format:
 
 1. You should have a `button` element with an `id` of `get-forecast`.
 
-1. You should have a `select` element with seven `option` elements nested within it. The first option should have an empty string as its text and `value` attribute. The rest should have the follow for their text and values (with the value being lowercase):
+1. You should have a `select` element with seven `option` elements nested within it. The first option should have an empty string as its text and `value` attribute. The rest should have the following for their text and values (with the value being lowercase):
+
    - New York
    - Los Angeles
    - Chicago
@@ -105,105 +106,112 @@ Inside the `select` element the first child should be an `option` element with a
 
 ```js
 assert.exists(document.querySelector('select > option[value=""]'));
-assert.strictEqual(document.querySelector('select > option:first-child').value, "");
+assert.strictEqual(
+  document.querySelector('select > option:first-child').value,
+  ''
+);
 ```
 
 Inside the `select` element there should be 6 `option` elements, one for each of the following cities: Paris, London, Tokyo, Los Angeles, Chicago, New York.
 
 ```js
-["Paris", "London", "Tokyo", "Los Angeles", "Chicago", "New York"].forEach(city => {
-    const el = document.querySelector(`select > option[value="${city.toLowerCase()}"]`);
+['Paris', 'London', 'Tokyo', 'Los Angeles', 'Chicago', 'New York'].forEach(
+  city => {
+    const el = document.querySelector(
+      `select > option[value="${city.toLowerCase()}"]`
+    );
     assert.exists(el);
-    assert.strictEqual(el.innerText.trim(), city)
-});
+    assert.strictEqual(el.innerText.trim(), city);
+  }
+);
 ```
 
 You should have an `img` element with the id `weather-icon` for displaying the weather icon.
 
 ```js
 async () => {
-    document.querySelector('select').value = "chicago";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("img#weather-icon"));
-}
+  document.querySelector('select').value = 'chicago';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('img#weather-icon'));
+};
 ```
 
 You should have an element with the id `main-temperature` for displaying the main temperature.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#main-temperature"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#main-temperature'));
+};
 ```
 
 You should have an element with the id `feels-like` for displaying what the temperature feels like.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#feels-like"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#feels-like'));
+};
 ```
 
 You should have an element with the id `humidity` for displaying the amount of humidity in air.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#humidity"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#humidity'));
+};
 ```
 
 You should have an element with the id `wind` element for displaying the wind speed.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#wind"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#wind'));
+};
 ```
 
 You should have an element with the id `wind-gust` element for displaying the wind gust.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#wind-gust"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#wind-gust'));
+};
 ```
 
 You should have an element with the id `weather-main` element for displaying the main weather type.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#weather-main"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#weather-main'));
+};
 ```
 
 You should have an element with the id `location` element for displaying the current location.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#location"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#location'));
+};
 ```
 
 You should have a `showWeather` function.
@@ -222,261 +230,288 @@ The `getWeather` function should accept a city as it's only argument and return
 
 ```js
 async () => {
-    try {
-        const city = "chicago";
-        const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
-        const outputFunction = await getWeather(city);
-        const json = await fetch(url).then(data => data.json());
-        assert.deepEqual(outputFunction, json)
-    } catch (err) {
-        throw new Error(err);
-    }
-}
+  try {
+    const city = 'chicago';
+    const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
+    const outputFunction = await getWeather(city);
+    const json = await fetch(url).then(data => data.json());
+    assert.deepEqual(outputFunction, json);
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 The `showWeather` function should call the `getWeather` function to get the weather data.
 
 ```js
 async () => {
-    try {
-        let flag = false;
-        const temp = getWeather;
-        getWeather = async (location) => {
-            flag = true;
-            return await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${location}`).then(data => data.json())
-        }
-        await showWeather("london");
-        getWeather = temp;
-        assert.isTrue(flag)
-    } catch (err) {
-        throw new Error(err);
-    }
-}
+  try {
+    let flag = false;
+    const temp = getWeather;
+    getWeather = async location => {
+      flag = true;
+      return await fetch(
+        `https://weather-proxy.freecodecamp.rocks/api/city/${location}`
+      ).then(data => data.json());
+    };
+    await showWeather('london');
+    getWeather = temp;
+    assert.isTrue(flag);
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When New York is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "new york";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'new york';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Chicago is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "chicago";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'chicago';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When London is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "london";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'london';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Tokyo is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "tokyo";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'tokyo';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Los Angeles is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "los angeles";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'los angeles';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 If there is an error, your `getWeather` function should log the error to the console.
@@ -490,11 +525,17 @@ const temp4 = alert;
 async () => {
   try {
     alert = () => {};
-    console.log = obj => {testArr.push(obj.toString())};
-    console.error = obj => {testArr.push(obj.toString())};
-    fetch = source => {throw new Error("This is a test error");}
-    await getWeather("chicago");
-    assert.include(testArr[0], "This is a test error");
+    console.log = obj => {
+      testArr.push(obj.toString());
+    };
+    console.error = obj => {
+      testArr.push(obj.toString());
+    };
+    fetch = source => {
+      throw new Error('This is a test error');
+    };
+    await getWeather('chicago');
+    assert.include(testArr[0], 'This is a test error');
     assert.lengthOf(testArr, 1);
   } finally {
     fetch = temp1;
@@ -502,7 +543,7 @@ async () => {
     console.error = temp3;
     alert = temp4;
   }
-}
+};
 ```
 
 When Paris is selected the app should show an alert with `Something went wrong, please try again later`.
@@ -512,17 +553,19 @@ const testArr = [];
 const temp4 = alert;
 async () => {
   try {
-    alert = (msg) => {testArr.push(msg)};
-    const city = "paris";
+    alert = msg => {
+      testArr.push(msg);
+    };
+    const city = 'paris';
     document.querySelector('select').value = city;
     document.querySelector('#get-forecast').click();
     await new Promise(resolve => setTimeout(resolve, 800));
-    assert.include(testArr[0], "Something went wrong, please try again later");
+    assert.include(testArr[0], 'Something went wrong, please try again later');
     assert.lengthOf(testArr, 1);
   } finally {
     alert = temp4;
   }
-}
+};
 ```
 
 # --seed--
@@ -530,20 +573,15 @@ async () => {
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Weather App</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
+  <body></body>
 </html>
-
 ```
 
 ```css
@@ -557,68 +595,66 @@ async () => {
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Weather App</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
 
-<body>
+  <body>
     <div class="weather-info-wrap">
-        <div id="weather-info">
-            <div id="location"></div>
-            <div class="primary-info">
-                <div class="primary-info-left" id="main-temperature"></div>
-                <div class="primary-info-right">
-                    <img id="weather-icon" >
-                    <div id="weather-main"></div>
-                </div>
+      <div id="weather-info">
+        <div id="location"></div>
+        <div class="primary-info">
+          <div class="primary-info-left" id="main-temperature"></div>
+          <div class="primary-info-right">
+            <img id="weather-icon" />
+            <div id="weather-main"></div>
+          </div>
+        </div>
+        <hr />
+        <div class="secondary-info">
+          <div class="secondary-info-top">
+            <div id="humidity"></div>
+            <div id="feels-like"></div>
+          </div>
+          <div class="secondary-info-bottom">
+            <div class="secondary-info-bottom-left">
+              <div id="wind"></div>
+              <div id="wind-gust"></div>
             </div>
-            <hr >
-            <div class="secondary-info">
-                <div class="secondary-info-top">
-                    <div id="humidity"></div>
-                    <div id="feels-like"></div>
-                </div>
-                <div class="secondary-info-bottom">
-                    <div class="secondary-info-bottom-left">
-                        <div id="wind"></div>
-                        <div id="wind-gust"></div>
-                    </div>
-                    <div class="secondary-info-bottom-right" id="compass">
-                        <span id="compass-arrow">
-                            <span class="arrow-head"></span>
-                        </span>
-                        <span class="compass-direction north"></span>
-                        <span class="compass-direction east"></span>
-                        <span class="compass-direction south"></span>
-                        <span class="compass-direction west"></span>
-                    </div>
-                </div>
+            <div class="secondary-info-bottom-right" id="compass">
+              <span id="compass-arrow">
+                <span class="arrow-head"></span>
+              </span>
+              <span class="compass-direction north"></span>
+              <span class="compass-direction east"></span>
+              <span class="compass-direction south"></span>
+              <span class="compass-direction west"></span>
             </div>
+          </div>
         </div>
+      </div>
     </div>
 
     <div class="btn-wrap">
-        <span>Weather for:</span>
-        <select id="location-selector">
-            <option value=""></option>
-            <option value="new york">New York</option>
-            <option value="los angeles">Los Angeles</option>
-            <option value="chicago">Chicago</option>
-            <option value="paris">Paris</option>
-            <option value="tokyo">Tokyo</option>
-            <option value="london">London</option>
-        </select>
-        <button id="get-forecast">Get Forecast</button>
+      <span>Weather for:</span>
+      <select id="location-selector">
+        <option value=""></option>
+        <option value="new york">New York</option>
+        <option value="los angeles">Los Angeles</option>
+        <option value="chicago">Chicago</option>
+        <option value="paris">Paris</option>
+        <option value="tokyo">Tokyo</option>
+        <option value="london">London</option>
+      </select>
+      <button id="get-forecast">Get Forecast</button>
     </div>
 
     <script type="text/javascript" src="script.js"></script>
-</body>
-
+  </body>
 </html>
 ```
 
@@ -648,7 +684,7 @@ body {
   padding: 20px;
   border-radius: 10px;
   background-color: #6cd488;
-  box-shadow: 6px 6px 6px rgba(0,0,0,0.5);
+  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
 }
 
 .btn-wrap > span {
@@ -658,7 +694,7 @@ body {
 }
 
 .btn-wrap > span::first-letter {
-  font-size: 1.3em
+  font-size: 1.3em;
 }
 
 #location-selector {
@@ -682,7 +718,7 @@ body {
   background-color: #eee;
   border-radius: 10px;
   border: 2px solid black;
-  box-shadow: 6px 6px 6px rgba(0,0,0,0.5);
+  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
 }
 
 #weather-info {
@@ -781,13 +817,15 @@ body {
   background-color: black;
 }
 
-.north, .south {
+.north,
+.south {
   width: 3px;
   height: 8px;
   left: 50%;
 }
 
-.east, .west {
+.east,
+.west {
   width: 8px;
   height: 3px;
   top: 50%;
@@ -825,20 +863,16 @@ const mainEl = document.getElementById('weather-main');
 const locationEl = document.getElementById('location');
 const arrowEl = document.getElementById('compass-arrow');
 
-getForecastBtn.addEventListener('click', () =>
-  selectEl.value && showWeather(selectEl.value)
+getForecastBtn.addEventListener(
+  'click',
+  () => selectEl.value && showWeather(selectEl.value)
 );
 
 async function showWeather(city) {
   const json = await getWeather(city);
   const {
     weather,
-    main:
-    { 
-      temp,
-      feels_like,
-      humidity
-    },
+    main: { temp, feels_like, humidity },
     wind: { speed, gust, deg = 0 },
     name
   } = json;
@@ -861,7 +895,9 @@ async function showWeather(city) {
 
 async function getWeather(city) {
   try {
-    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
+    const response = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    );
 
     if (!response.ok) {
       alert('Something went wrong, please try again later');
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 69365f03d5..dade1e5cbe 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
@@ -2,7 +2,7 @@
 id: 672aa8d65995be62ef1c7515
 title: What Are CSS Animations, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: dryjwjTQllk
 dashedName: what-are-css-animations
 ---
 
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 ed4b6d0586..7aed75cda6 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
@@ -2,7 +2,7 @@
 id: 672cf764cf55a70433590def
 title: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bKM3ZhO5Sns
 dashedName: what-are-accessibility-concerns-around-using-animations
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
index 267796bc59..562e010a29 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
@@ -2,7 +2,7 @@
 id: 672aa82768e00d600305afc0
 title: What Are Some Tools to Check for Good Color Contrast on Sites?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2qj6LcJ4wSk
 dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
index 830ac0e056..b72ed7b123 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
@@ -2,7 +2,7 @@
 id: 672c35a79fa53e00de9f2a49
 title: "What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible?"
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ycYVairxSdQ
 dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which CSS property hides content visually but keeps it in the document flow and accessible to screen readers?
+What is the main accessibility issue when using the `display: none` and `visibility: hidden` style declarations, or the `hidden` attribute to hide content?
 
 ## --answers--
 
-`display: none;`
+These methods make it so that only assistive technologies like screen readers can access the hidden content.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ---
 
-`visibility: hidden;`
+Content is only hidden until users move their mouse over the content.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ---
 
-`opacity: 0;`
+These methods remove the content from the accessibility tree, making it impossible for assistive technologies like screen readers to access the hidden content.
 
 ---
 
-`position: absolute; left: -9999px;`
+These methods do not work with some browsers.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Think about which property affects layout but not screen reader access.
 
 ## --text--
 
-What is the primary purpose of the "visually hidden" or "sr-only" CSS technique?
+What is the primary purpose of the "visually hidden" or "screen reader only" CSS technique?
 
 ## --answers--
 
@@ -86,35 +86,35 @@ Consider the needs of users who rely on screen readers.
 
 ## --text--
 
-When using the aria-hidden attribute, what effect does it have on content?
+When should you hide content on a web page?
 
 ## --answers--
 
-It makes the content invisible.
+When the content you're hiding is less important than other content on the page.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ---
 
-It removes the content from the DOM.
+When the content you're hiding is incorrect.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ---
 
-It tells assistive technologies to ignore the content.
+Only when it genuinely enhances the user experience.
 
 ---
 
-It makes the content unclickable.
+Whenever you feel like it.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
index 173f6f75f9..0753e48d5b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
@@ -2,7 +2,7 @@
 id: 672aa8873d4e25618870764f
 title: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ISOf41vPNJY
 dashedName: what-is-responsive-web-design
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
index 0ec7c2c62c..f33675391c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
@@ -2,7 +2,7 @@
 id: 672cf05c3ad533eabe1e8197
 title: How Do Media Queries Work, and What Are Some Common Media Types and Features?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1h0QErJG8DE
 dashedName: how-do-media-queries-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
index 8b78e23cc7..8c41d92a3b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
@@ -2,7 +2,7 @@
 id: 672cf06c8f46f9eb04db9832
 title: What Is the Mobile First Approach in Responsive Web Design?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BuCdyShUzKQ
 dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
index 2537cf3d3a..bd51cfa98d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
@@ -2,7 +2,7 @@
 id: 672cf07a2b9796eb49719e03
 title: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: R0hiJEAXGIk
 dashedName: what-are-media-breakpoints
 ---
 
@@ -50,35 +50,35 @@ Think about how websites adapt to various device sizes.
 
 ## --text--
 
-In a mobile-first approach, which type of media query is typically used for breakpoints?
+Which of the following is a commonly used breakpoint for smaller devices like smart phones?
 
 ## --answers--
 
-`max-width`
+1640px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ---
 
-`min-width`
+640px
 
 ---
 
-`max-height`
+1200px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ---
 
-`min-height`
+2000px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ## --video-solution--
 
@@ -114,7 +114,7 @@ Think about which screen resolution is less commonly targeted in responsive desi
 
 ---
 
-`2560px` (4K displays).
+`6000px` (really large device).
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
index 8195e78587..135ed5b519 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
@@ -62,7 +62,7 @@ Remember the example given for searching for freeCodeCamp content while excludin
 
 ---
 
-`
+`` ` ``
 
 ### --feedback--
 
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 1f8865f3c2..b201185a11 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
@@ -94,7 +94,7 @@ Complex video editing features.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ---
 
@@ -106,7 +106,7 @@ Being a raster-based image editor.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ---
 
@@ -114,7 +114,7 @@ Specialized 3D modeling capabilities.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
index 0b6eb0b1b0..b17cee5c3f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
@@ -2,7 +2,7 @@
 id: 6733aa9b006d29f4d11307a5
 title: What Are Some Examples of Common JavaScript Errors?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: e5P8nJkOSMQ
 dashedName: what-are-some-examples-of-common-javascript-errors
 ---
 
@@ -22,15 +22,15 @@ Trying to call a variable like a function.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ---
 
-Trying to use a value that’s out of range.
+Trying to use a value that's out of range.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ---
 
@@ -38,11 +38,11 @@ Writing something incorrectly in your code, like missing a parenthesis or semico
 
 ---
 
-Accessing a variable before it’s declared.
+Accessing a variable before it's declared.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ## --video-solution--
 
@@ -58,7 +58,7 @@ What will happen if you try to call a variable that holds a number as if it were
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ---
 
@@ -66,7 +66,7 @@ The error happens because the variable is being treated like a function when it
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ---
 
@@ -78,7 +78,7 @@ The error happens because the variable is being treated like a function when it
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ## --video-solution--
 
@@ -86,7 +86,7 @@ The error happens because the variable is being treated like a function when it
 
 ## --text--
 
-Which error occurs when you try to access an array index that doesn’t exist?
+Which error occurs when you try to access an array index that doesn't exist?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
index bafabd33d8..2118071aa6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
@@ -2,7 +2,7 @@
 id: 6733bec70d86e13522e98a4f
 title: How Does the Throw Statement Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: vNlPchT8nr8
 dashedName: how-does-the-throw-statement-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
index 2623a2c2a9..191090dd59 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
@@ -2,7 +2,7 @@
 id: 6733becf4b0c353553b9bfa4
 title: How Does the Debugger Statement Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gn0q7gXiMRo
 dashedName: how-does-the-debugger-statement-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
index f5c68460bd..cc678b1164 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
@@ -2,7 +2,7 @@
 id: 6733bee844600f35c05b8264
 title: How Does try...catch...finally Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _3whfUfxGYI
 dashedName: how-does-try-catch-finally-work
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which of the following is a common use case for `try…catch…finally` in JavaScript?
+What best describes the `try` block?
 
 ## --answers--
 
-Creating new HTML elements.
+It’s for running code again automatically after an error occurs.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Styling a webpage using CSS.
+It’s for handling errors.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Declaring variables.
+It’s for setup before an error is thrown.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Handling API requests.
+It’s a safe wrapper for code that might throw an error.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
index 49e7be346e..a6d2d7a98d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
@@ -2,7 +2,7 @@
 id: 6733befb703ca6361da3755b
 title: What Are Some Examples of Using Advanced JavaScript Debugging Techniques?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: hHWAQYXRvxs
 dashedName: what-are-some-examples-of-using-advanced-javascript-debugging-techniques
 ---
 
@@ -86,35 +86,35 @@ Think about tracking variables across different parts of the code.
 
 ## --text--
 
-What statement works like a breakpoint in JavaScript, pausing execution for inspection?
+What method can you use to see an interactive list of properties for the JavaScript object you pass in?
 
 ## --answers--
 
-`throw`
+`console.log()`
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ---
 
-`return`
+`console.table()`
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ---
 
-`debugger`
+`console.dir()`
 
 ---
 
-`console.log`
+Finding the object in the Network tab and double clicking on it.
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index a6032fda57..ac62d4f199 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -2,7 +2,7 @@
 id: 670803abcb3e980233da4768
 title: What are Div Elements and When Should You Use Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: fq65B7JnEjM
 dashedName: what-are-div-elements
 ---
 
@@ -14,35 +14,35 @@ Watch the video and answer the questions below.
 
 ## --text--
 
-What type of element is a `div` element?
+What semantic meaning does a `div` element have?
 
 ## --answers--
 
-An inline-level element.
+The `div` element represents a container for introductory content or a set of navigational links.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-An inline-block element.
+The `div` element defines a footer for a document or section.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-A block-inline element.
+The `div` specifies the main page content and should be unique.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-A block-level element.
+The `div` element has no semantic meaning.
 
 ## --video-solution--
 
@@ -94,35 +94,35 @@ Review the beginning of the video for the correct syntax.
 
 ## --text--
 
-What should you group using a `div` element?
+Which of the following HTML elements is commonly used to group content into distinct sections?
 
 ## --answers--
 
-Block-level content and larger sections.
+`section`
 
 ---
 
-Inline texts and smaller sections.
+`aside`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-The whole HTML content.
+`nav`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-Images and media files only.
+`h1`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
index d3e6ff98df..2d33343871 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -2,7 +2,7 @@
 id: 6708382cf088b216580a9ff1
 title: What Are IDs and Classes, and When Should You Use Them?
 challengeType: 11
-videoId: yTuzVH6THdg
+videoId: gM7Tngm3QXo
 dashedName: what-are-ids-and-classes
 ---
 
@@ -22,7 +22,7 @@ Use a `class` when you want a unique identifier that should only apply to one el
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -34,7 +34,7 @@ Use an `id` when you want to style multiple elements consistently across differe
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -42,7 +42,7 @@ Use an `id` when you want to apply styles that can be easily overridden by other
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Remember that an `id` is unique and can only be used once per HTML document.
 
 ## --text--
 
-What happens if you try to use duplicate an `id` in your HTML?
+What happens if you use the same `id` more than once in your HTML?
 
 ## --answers--
 
@@ -62,7 +62,7 @@ The program will crash.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -70,7 +70,7 @@ Nothing will happen.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -78,7 +78,7 @@ There will be a popup alert message in the browser window.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ## --video-solution--
 
@@ -116,10 +116,6 @@ Only classes can hold multiple separate values.
 
 `id="main heading"`
 
-### --feedback--
-
-Only classes can hold multiple separate values.
-
 ## --video-solution--
 
 4
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
index a75ddd24b2..95b16c7bd7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -2,7 +2,7 @@
 id: 67083868d5fdcb17bf8c14bd
 title: What Are HTML Entities, and What Are Some Common Examples?
 challengeType: 11
-videoId: VJmx-XzTqg8
+videoId: mVdIq0H_B4E
 dashedName: what-are-html-entities
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
index c80bdb5d87..7ce09ce185 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -2,7 +2,7 @@
 id: 670838977810401844af6fe0
 title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
 challengeType: 11
-videoId: qeGlYqpFRZA
+videoId: Xdyig5C-oSU
 dashedName: what-is-the-role-of-the-link-element-in-html
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
index 2f13df7865..02192951fb 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -2,7 +2,7 @@
 id: 670838b10ee87a18e5faff62
 title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
 challengeType: 11
-videoId: ZxpITCgbc5Y
+videoId: nNCwy4QUh8Q
 dashedName: what-is-the-role-of-the-script-element-in-html
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
index c039ba2262..e114141bd0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -2,7 +2,7 @@
 id: 670838e914096b194b0c51aa
 title: What Is an HTML Boilerplate, and Why Is It Important?
 challengeType: 11
-videoId: UKxDoI54eLE
+videoId: IlJEEVOc9o0
 dashedName: what-is-an-html-boilerplate
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
index e49edd740a..102a2cbe50 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -2,7 +2,7 @@
 id: 670839051794aa19fcef6dc8
 title: What Is UTF-8 Character Encoding, and Why Is It Needed?
 challengeType: 11
-videoId: SuTPQkOpa10
+videoId: T0VimOMROr8
 dashedName: what-is-utf-8-character-encoding
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
index 88345cd681..fe94f2bb13 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -2,7 +2,7 @@
 id: 67083952f800051a8a21fcfd
 title: What Is the Role of the Meta Description, and How Does It Affect SEO?
 challengeType: 11
-videoId: aLy7C2fGDQw
+videoId: G-g2KBE05to
 dashedName: what-is-the-role-of-the-meta-description
 ---
 
@@ -94,7 +94,7 @@ Inside the `figure` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -102,7 +102,7 @@ Inside the `footer` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -114,7 +114,7 @@ In a popup alert message.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index c1d55001a7..73a3bc175d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -2,7 +2,7 @@
 id: 6708396caa00e11b597b3365
 title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
 challengeType: 11
-videoId: wQhsL9NjiuA
+videoId: 94IAhyEfO8I
 dashedName: what-is-the-role-of-open-graph-tags
 ---
 
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
index 4935c3f182..aa50bc64b9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
@@ -2,7 +2,7 @@
 id: 672a51e9e4fd8b8552eeb758
 title: What Is Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i2d9G5g8WxM
 dashedName: what-is-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
index 8bd8e80692..daa434c8ab 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
@@ -2,7 +2,7 @@
 id: 672a5310d7e46b8a34d48dfd
 title: What Are Screen Readers, and Who Uses Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aowIBtwkwyE
 dashedName: what-are-screen-readers
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
index db18fbb9a4..81c861daed 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
@@ -2,7 +2,7 @@
 id: 672a5326a7606a8a766cbedb
 title: What Are Large Text or Braille Keyboards, and Who Uses Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: kg-R09kIDiY
 dashedName: what-are-large-text-or-braille-keyboards
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
index 3b5e58c4a5..b9973911ef 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
@@ -2,7 +2,7 @@
 id: 672a533e6041c28ad680eb8f
 title: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: vN7C2gexLu0
 dashedName: what-are-alternative-pointing-devices
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
index 745d4d8839..915bac68a2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
@@ -2,7 +2,7 @@
 id: 672a5361ef88158b25fbfba7
 title: What Are Screen Magnifiers Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Voiysxr-Df4
 dashedName: what-are-screen-magnifiers
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
index ea40b20532..fb7b4cc0fc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
@@ -2,7 +2,7 @@
 id: 672a536f8386288b9ed0a154
 title: What Is Voice Recognition Software Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _qT4ce85TLg
 dashedName: what-is-voice-recognition-software
 ---
 
@@ -94,7 +94,7 @@ Dragon.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ---
 
@@ -106,7 +106,7 @@ Voice Control.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ---
 
@@ -114,7 +114,7 @@ Voice Access.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
index 43b4c9643c..398853f05b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
@@ -2,7 +2,7 @@
 id: 672a537f05f3798bd4f57d2d
 title: What Are Some Common Accessibility Auditing Tools to Use?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BZ37IV7eNeo
 dashedName: what-are-some-common-accessibility-auditing-tools
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
index 5f8450f7ab..9a3dc51b4b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
@@ -2,7 +2,7 @@
 id: 672a538c029f9e8c1687460e
 title: How Does Proper Heading Level Structure Affect Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: FqBrK9IAvhI
 dashedName: how-does-proper-heading-level-structure-affect-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
index f360bcc4c8..7645015c63 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
@@ -2,7 +2,7 @@
 id: 672a539b887ec68c593cdc4b
 title: What Are Best Practices for Tables and Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aaip_wiDgEw
 dashedName: what-are-best-practices-for-tables-and-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
index 988d190b70..889b66fbc2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
@@ -2,7 +2,7 @@
 id: 672a53ae8f1ad28c8a1ed0f0
 title: Why Is It Important for Inputs to Have an Associated Label?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _FWK8pqUUXo
 dashedName: why-is-it-important-for-inputs-to-have-an-associated-label
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
index af986253d7..259c75b9a7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
@@ -2,7 +2,7 @@
 id: 672a53cf67140d8cd85d4b0f
 title: What Is the Purpose of WAI-ARIA, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LNv_JZogKy0
 dashedName: what-is-the-purpose-of-wai-aria
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
index 45f2f251ba..63ce2beb24 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
@@ -2,7 +2,7 @@
 id: 672a549231b8728f7171ed9d
 title: What Are ARIA Roles?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9rEXBdjn5ZQ
 dashedName: what-are-aria-roles
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
index a465acef27..8d209caedb 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
@@ -2,7 +2,7 @@
 id: 672a54a6675c168faa84252d
 title: What Are the Roles of the aria-label and aria-labelledby Attributes?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: WLb6vAfd_eE
 dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
index 74efdaa36a..26eeeac4db 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
@@ -2,7 +2,7 @@
 id: 672a54bc58319c8fe6f78ad4
 title: What Is the aria-hidden Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: QedOQkZOBYc
 dashedName: what-is-the-aria-hidden-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
index 8a57914143..5f53ca98e3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
@@ -2,7 +2,7 @@
 id: 672a54ce90c19e9038f481d7
 title: What Is the aria-expanded Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EhZHqC1ZE_Q
 dashedName: what-is-the-aria-expanded-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
index 63fecb64ec..efbf028f5b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
@@ -2,7 +2,7 @@
 id: 672a54dff9dc439089f1a219
 title: What Is the aria-live Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LGkl102m2-s
 dashedName: what-is-the-aria-live-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
index 58a4119ada..89dc093f3e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
@@ -2,7 +2,7 @@
 id: 672a54f29d783890d1f94740
 title: What Are Some Common ARIA States Used on Custom Control Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: tzoL0L63V5g
 dashedName: what-are-some-common-aria-states-used-on-custom-control-elements
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
index 227f474939..4fc6b1b677 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
@@ -2,7 +2,7 @@
 id: 672a5507d857a891139abc7f
 title: What Is the aria-controls Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: CIjzHpQHKFo
 dashedName: what-is-the-aria-controls-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
index cfe559fe6e..8789f5eae6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
@@ -2,7 +2,7 @@
 id: 672a551975938a916c74802c
 title: What Is the aria-describedby Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IuYRdE-f28M
 dashedName: what-is-the-aria-describedby-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
index bcc9fc059b..502b85460a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
@@ -2,7 +2,7 @@
 id: 672a55b5c0c14493328fe36e
 title: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _yKzvDikHOI
 dashedName: when-is-the-alt-attribute-needed
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
index c63035cee6..0afc2ea879 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
@@ -2,7 +2,7 @@
 id: 672a55dd1d86bc939606e204
 title: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JI_yg4ZivfM
 dashedName: what-are-the-accessibility-benefits-for-good-link-text
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
index 6485aff4a6..0768efbb52 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
@@ -2,7 +2,7 @@
 id: 672a55eb7791559421ff0cd3
 title: What Are Good Ways to Make Audio and Video Content Accessible?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KIuKBpihUPg
 dashedName: what-are-good-ways-to-make-audio-and-video-content-accessible
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
index b4e5b4b0c0..69fcc2743c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
@@ -2,7 +2,7 @@
 id: 672a55fbc2d95a9453151caf
 title: What Are Some Ways to Make Web Applications Keyboard Accessible?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: UE7rKhSKfHs
 dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
index e86ed9318d..9d0fab401d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -50,15 +50,15 @@ All of the above
 
 ## --text--
 
-What element must an `h3` element come after?
+Which heading element must precede an `h3` element?
 
 ## --answers--
 
-`h1`
+`h5`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -66,11 +66,11 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ---
 
-`h3`
+`h6`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -78,7 +78,7 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
index 173c1708ee..e9ee54a2a9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
@@ -50,35 +50,35 @@ Think about an element that primarily affects text style to highlight when part
 
 ## --text--
 
-Which HTML element is used to emphasize important text?
+When should you use CSS instead of the `i` or `em` elements?
 
 ## --answers--
 
-`em`
+When the text has a special purpose or meaning in the paragraph.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ---
 
-`strong`
+When you want to display text in italics for presentational purposes only.
 
 ---
 
-`i`
+When the text is an idiomatic expression.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ---
 
-`mark`
+When the text needs to be emphasized for importance.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
index c70034f3ea..f8501e6312 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
@@ -50,39 +50,39 @@ Analyze the two types of quotation elements. Think about which one displays the
 
 ## --text--
 
-Which HTML element is used for displaying inline quotations?
+What is the purpose of the `cite` element in HTML?
 
 ## --answers--
 
-`q`
-
----
-
-`blockquote`
+To display inline quotations.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ---
 
-`cite`
+To specify the source URL of a quotation.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ---
 
-`p`
+To mark up the title of a referenced creative work.
+
+---
+
+To display extended quotations.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ## --video-solution--
 
-1
+3
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
index 6ca38d68c8..671eaa7226 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
@@ -50,7 +50,7 @@ Think about an element that is specifically designed for shortened words.
 
 ## --text--
 
-What is the primary purpose of the ``abbr` element?
+What is the primary purpose of the `abbr` element?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
index 92fd187d64..516dfb03e3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -62,7 +62,7 @@ What is the correct format for the `datetime` attribute value according to ISO 8
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -70,7 +70,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -78,7 +78,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
index 051b5c4ea8..87f6104018 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
@@ -1,20 +1,50 @@
 ---
 id: 6734e3a9cc78faaf4248d335
 title: What Is the Role of JS Libraries and Frameworks, and Why Are They Used in the Industry?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-role-of-js-libraries-and-frameworks-and-why-are-they-used-in-the-industry
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+JavaScript libraries and frameworks provide pre-built code that streamlines the development process.  While both libraries and frameworks serve to improve productivity and standardize coding practices, they differ in their approach and level of control they provide to developers.
+
+Libraries are generally more focused on providing solutions to specific tasks, such as manipulating the DOM, handling events, or managing AJAX requests.
+
+An example of a JavaScript library is jQuery.
+
+jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like datepickers, sliders, and modal dialogs.
+
+Although jQuery is no longer as widely used as it once was, it significantly helped developers by making tasks that were complex in vanilla JavaScript much easier to implement.
+
+Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow.
+
+For example, Angular encourages a component-based architecture with a set of conventions and tools that provide a structured approach to organizing and building applications. Angular gives developers clear guidelines on how to structure components, manage state, handle routing, and interact with services, making it a more opinionated framework.
+
+Other examples of frameworks include Remix and NextJS.
+
+In contrast, React, a UI library, is more flexible and doesn't enforce any particular architectural pattern. React focuses primarily on the view layer and leaves a lot of the choices on application design up to the developers.
+
+Although libraries and frameworks are used across projects of all sizes, The choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications.
+
+In the industry, libraries and frameworks are widely used for several reasons. They significantly speed up development by providing quick solutions for common problems.
+
+One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built in solutions to help you with date manipulation, timezones, parsing and formatting of dates.
+
+A lot of popular libraries and frameworks are well-tested and maintained by large communities. This means they're often more practical than building the same thing from scratch.
+
+Libraries and frameworks follow best practices and patterns that have been proven effective in real life scenarios. This can lead to more robust and scalable applications.
+
+In conclusion, libraries and frameworks offer quick solutions to common problems, speed up development, and promote best practices. Understanding the differences between libraries and frameworks, and knowing when to use them is a valuable skill for any JavaScript developer.
 
 # --questions--
 
 ## --text--
 
-Why was jQuery a popular library of choice in the early 2010’s?
+Why was jQuery a popular library of choice in the early 2010's?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
index f643612a40..6384efbdf9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
@@ -1,14 +1,32 @@
 ---
 id: 6734e867bbf41cc5b11648c4
 title: What Are Single Page Applications, and What Are Some Issues Surrounding Them?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-single-page-applications-and-what-are-some-issues-surrounding-them
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Unlike traditional multi-page websites, single page applications (SPAs) load only one HTML page and dynamically update the content as the user interacts with the app, without reloading the entire page. This approach can lead to faster, more responsive applications, but it also comes a set of challenges and considerations.
+
+SPAs heavily use JavaScript to manage the application's state and render content. Instead of requesting new HTML pages from the server, SPAs use JavaScript to manipulate the DOM and fetch data asynchronously. This is often done using libraries and frameworks like React, Vue, or Angular, which provide great tools for building complex user interfaces.
+
+SPAs have some common issues. One significant issue is that screen readers may struggle with dynamically updated content. When content changes without a page reload/refresh, screen readers might not notify these changes, which makes our users unaware of updates on our web app.
+
+Another challenge with SPAs is with navigation and browser history. Users expect the back and forward buttons to work as they do on traditional websites. This might not work properly in SPAs because technically, the URL of the web app doesn’t change. Since, the URL of the web app doesn’t change, they can’t bookmark any specific page. Refreshing the page might reset the application to its initial state, rather than maintaining the current view.
+
+SPAs can pose challenges for SEO optimization.
+
+Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly.
+
+However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs.
+
+Performance is another consideration. SPAs load the entire application in one go, which means that if the loading time increases, users will be seeing a blank screen for a longer period of time. Now consider the scenario of users with slower internet speeds. Overall, the user experience will not be very pleasant.
+
+In conclusion, while Single Page Applications offer many benefits, they also present unique challenges. Developers need to be careful of accessibility, usability, SEO, and performance considerations when building SPAs. By addressing these issues, it's possible to create SPAs that are fast, responsive, and accessible to all users.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
index 41ae2d9b62..5c3163ec9d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
@@ -1,14 +1,30 @@
 ---
 id: 6734e86f590727c5e7e9ec5e
 title: What Is React, and What Is It Commonly Used For?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-react-and-what-is-it-commonly-used-for
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features.
+
+A fundamental concept in React is the creation of reusable UI components. These components, such as buttons, cards, and avatar components, can be easily reused throughout your application. You can nest these components inside each other to build more complex, dynamic interfaces.
+
+One of the key advantages of React is that these custom components can update and render independently as data changes.
+
+Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency. You’ll learn more about the virtual DOM and how it works in upcoming lecture videos.
+
+In addition to reusable components, React also provides a powerful way to manage the state of your application. State refers to the data that determines how a component renders and behaves.
+
+With React, you can easily track and update the state of components, ensuring that the UI reflects the most current data. You will learn more about working with state in future lecture videos.
+
+While there are many libraries within the JavaScript ecosystem, freeCodeCamp will mainly be focused on teaching React because of its wide spread use and demand in the industry.
+
+Over the next few lectures, we will dive deeper into building custom components, managing state, and more.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
index 419372cd3e..c0d9ac8920 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
@@ -1,14 +1,117 @@
 ---
 id: 6734e879c78ee6c61db25b90
 title: What Are Components in React, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-components-in-react-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces, making it easier to develop and maintain large-scale applications.
+
+The two types of components in React are functional and class based components. In modern React, developers will use functional components and all of the examples we look at today will be functional components.
+
+At a higher level, you can think of component like JavaScript functions that return elements describing the UI.
+
+This UI is described using JSX, a syntax extension for JavaScript that looks similar to HTML but allows you to write UI elements in a more declarative way.
+
+Let's look at an example of a React component:
+
+```js
+function Greeting() {
+  const name = "John"
+  {/* The result will be Hello John*/}
+  return <h1 className="title">Hello {name}</h1>;
+}
+```
+
+In this example, we've defined a component called Greeting. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the name variable within the h1 element.
+
+We are also applying a `className` called title to the `h1` element.
+
+But why are we using `className` instead of class like with regular HTML elements?
+
+Well this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead.
+
+We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work.
+
+```js
+{/* Block Comments */}
+```
+
+Another thing you might have noticed is that we are using a capital letter at the beginning of the component name. But why can’t we use all lower case letters?
+
+This is because React treats components with a capital letter as custom components, while elements with lowercase letters are considered built-in HTML elements.
+
+When React encounters a lowercase tag (like `<div>` or `<span>`), it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create.
+
+To use this `Greeting` component in our application, we would write something like this:
+
+```js
+<Greeting />
+```
+
+This would render an `<h1>` element with the text `"Hello, John"` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol.
+
+When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here
+
+```js
+<img />
+<MyComponent />
+```
+
+So far we have only been looking at how to render a single h1 element. But you can actually render multiple elements.
+
+Let’s take a look at the following example code here:
+
+```js
+function Greeting() {
+  const name = "John";
+  {/* This will throw an error */}
+  return <h1>Hello {name}</h1> 
+  <p>Nice to meet you.</p>
+}
+```
+
+We are trying to add another sentence of `"Nice to meet you"` but it is not rendering on the page correctly.
+
+There seems to be an error message instead. The error message says `"Adjacent JSX elements must be wrapped in an enclosing tag."`
+
+The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the h1 and p elements in a single div, there is another way to silence the error.
+
+React `<Fragment>`s are used to group elements together.
+
+Here is what the revised example will look like:
+
+```js
+function Greeting() {
+  const name = "John";
+  return (
+    <Fragment>
+      <h1>Hello {name}</h1>
+      <p>Nice to meet you.</p>
+    </Fragment>
+  );
+}
+```
+
+You can also choose to use empty JSX tags which can serve as shorthand for Fragments.
+
+```js
+ function Greeting() {
+  const name = "John";
+  return (
+    <>
+      <h1>Hello {name}</h1>
+      <p>Nice to meet you.</p>
+    </>
+  );
+}
+```
+
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
index 158d5b4c12..cfd23df155 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
@@ -1,14 +1,63 @@
 ---
 id: 6734e88cc46e6dc679420040
 title: What is Vite and How Can It Be Used to Setup a New React Project?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-vite-and-how-can-it-be-used-to-setup-a-new-react-project
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to setup of all of the necessary configurations by yourself, there are tools that will do that for you.
+
+One of the most popular tools for setting up projects is Vite. Vite, which means "fast" in French, is a build tool that aims to provide a faster development experience for modern web projects. Vite can be used with React, as well as with other libraries and frameworks like Vue or Svelte. You can even use it with vanilla JavaScript projects.
+
+To create a new project with Vite, you will need to use the command line. If you are using Windows machine, then you can use the Command Prompt or Windows PowerShell. If you are using a Mac, then you can use the Terminal app.
+
+Once you have the command line open, you can use the following command:
+
+```bash
+npm create vite@latest my-react-app -- --template react
+```
+
+This command creates a new React project named `my-react-app` using Vite's React template.
+
+You can then open up the new project and see the React boilerplate code that Vite has provided for you.
+
+The great thing about Vite is that it will only provide the files that are absolutely necessary to get started with your React project.
+
+To actually run the project as is, you will need to install the dependencies using the following commands in the command line:
+
+```bash
+  cd my-react-app
+  npm install
+```
+
+The `cd my-react-app` command ensures that you change to the correct directory where your project is located.
+
+The `npm install` command is used to install the dependencies needed to properly run your React project. Dependencies are libraries or packages that your React project requires in order to function correctly, such as React itself, ReactDOM, or other third-party packages that provide additional functionality.
+
+Running `npm install` will read the `package.json` file in your project directory and install all the dependencies listed there, allowing you to build and run your React app without missing any necessary components.
+
+The `package.json` file is a key configuration file in projects that contains metadata about your project, including its name, version, and dependencies. It also defines scripts, licensing information, and other settings that help manage the project and its dependencies.
+
+Once the dependencies are installed, you should notice a new folder in your project called `node_modules`.
+
+The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in your package.json file, including both your project's direct dependencies and any dependencies of those dependencies.
+
+To run your project, run the `npm run dev` command and open up a new browser tab at `http://localhost:5173/`.
+
+You should see the starter template that Vite has provided for you.
+
+If you need to stop the local server, press `CTRL + C` in the command line.
+
+To actually see the code for this starter template, you can go into your project inside the src folder and you should see the `App.jsx` file.
+
+From there you can start to modify the file, save your changes and see the new changes display in the browser.
+
+And with that, you're ready to begin building your React application!
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
index ea0054f4ca..bbc991edf0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
@@ -1,14 +1,106 @@
 ---
 id: 674ba6876f7ada867135bb95
 title: How Can You Import and Export Components in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-import-and-export-components-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In this lecture, we will take a look at how to import and export components in React.
+
+In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the jsx file extension because this file is mainly working with JSX.
+
+```js
+function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+```
+
+This `Cat` component returns a JSX markup with a title and image for a cat called Mr.Whiskers.
+
+If we want to use our `Cat` component in another file, we need to first export it like this:
+
+```js
+function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+
+export default Cat;
+```
+
+We are using the default keyword because this will be the default export from the module. You can also choose to export the component on the same line as the component definition like this:
+
+```js
+export default function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+```
+
+You can choose to import child components in other parent component files. Or import them in the root component file. For this example, we will import the Cat component inside the root component file.
+
+Every React project will have a top-level component, typically called `App.jsx`. This file is usually located in the src directory of your project. You’ll learn more about common project layouts in a future lecture video.
+
+```js
+export default function App() {
+  return (
+    // return component here
+  );
+}
+```
+
+To use the `Cat` component inside the root `App` component, you will need to import it like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+  return (
+    // return component here
+  );
+}
+```
+
+Now, you can return the `Cat` component inside the `App` component like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+  return (
+    <Cat />
+  );
+}
+```
+
+As you continue building your own React projects, you’ll become more comfortable organizing components, importing them where needed, and creating sophisticated UIs by composing these modular components.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
index 6ca9e5d940..ce54c281bb 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
@@ -2,7 +2,7 @@
 id: 672d26385dbe73203c4dac81
 title: What Is JavaScript, and How Does It Work with HTML and CSS?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G7lc_Yt2fqY
 dashedName: what-is-javascript
 ---
 
@@ -58,7 +58,7 @@ JavaScript adds more styles to the CSS file.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ---
 
@@ -66,11 +66,11 @@ JavaScript creates a new version of HTML for the page.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ---
 
-JavaScript interacts with the DOM to change content and styles dynamically.
+JavaScript interacts with the page to change content and styles dynamically.
 
 ---
 
@@ -78,7 +78,7 @@ JavaScript only works in the backend.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
index 9c8fdba12f..af13e8e3bb 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
@@ -2,7 +2,7 @@
 id: 672d496eca926b5df8176a67
 title: What Is a Data Type, and What Are the Different Data Types in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DQgf3RxOiQg
 dashedName: what-is-a-data-type
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
index e39d154003..ec58dd387d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
@@ -2,7 +2,7 @@
 id: 672d497cb1a1675e47bf7ea1
 title: What Are Variables, and What Are Guidelines for Naming JavaScript Variables?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: h6ytd29mrrg
 dashedName: what-are-variables
 ---
 
@@ -74,7 +74,7 @@ Remember the rules for starting a variable name and avoiding special characters
 
 ---
 
-`return`
+`const`
 
 ### --feedback--
 
@@ -90,7 +90,7 @@ Why is it important to use descriptive names for your variables?
 
 ## --answers--
 
-It’s required by JavaScript.
+It's required by JavaScript.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
index 046193f28b..887da5e0df 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
@@ -2,7 +2,7 @@
 id: 672d49959621885e9d3e672c
 title: How Do let and const Work Differently When It Comes to Variable Declaration, Assignment, and Reassignment?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ax8XbAiG4Ek
 dashedName: how-do-let-and-const-work
 ---
 
@@ -66,7 +66,7 @@ When you want to track a value that will change during program execution.
 
 ---
 
-When you want to declare a variable but don’t want it to be accessible in a specific block of code.
+When you want to declare a variable but don't want it to be accessible in a specific block of code.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
index 57696daf94..b6d894df10 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
@@ -2,7 +2,7 @@
 id: 672d49a5cf43945ee09e5fba
 title: What Is a String in JavaScript, and What Is String Immutability?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: AXinCYvj7h8
 dashedName: what-is-a-string
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
index 6d90d8cd24..f021fff99e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
@@ -2,7 +2,7 @@
 id: 672d49b2fb76df5f1d6117af
 title: What Is String Concatenation, and How Can You Concatenate Strings with Variables?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4bCDHakINH8
 dashedName: what-is-string-concatenation
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
index 38058dd76e..eb62c204cf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
@@ -2,7 +2,7 @@
 id: 672d49c4e899345f5b33c24c
 title: What Is console.log Used For, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: J9CeRj7EBmM
 dashedName: what-is-console-log
 ---
 
@@ -50,7 +50,7 @@ Think about where you can see the results of the `console.log` method.
 
 ## --text--
 
-Which of the following examples correctly uses `console.log` to display the value of a variable?
+Which of the following examples correctly uses `console.log` to display the value of a string?
 
 ## --answers--
 
@@ -110,11 +110,11 @@ Think about the basic structure of `console.log` and where the variable should g
 
 ---
 
-`console.write(age);`
+`console.log("age");`
 
 ### --feedback--
 
-Think about the basic structure of `console.log` and where the variable should go.
+Think about the difference between a variable and a string.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
index db6be4b3f6..5b27976bf6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
@@ -2,7 +2,7 @@
 id: 672d49d93b54b85faa4dbad7
 title: What Is the Role of Semicolons in JavaScript, and Programming in General?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BgZYZV0_-UM
 dashedName: what-is-the-role-of-semicolons
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
index ab6814c50b..5dda4709d8 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
@@ -2,7 +2,7 @@
 id: 672d49e65a1c855fe7bb3fdb
 title: What Are Comments in JavaScript, and When Should You Use Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HyYHnvP_EaM
 dashedName: what-are-comments-in-javascript
 ---
 
@@ -98,7 +98,7 @@ Think about how comments help clarify but should not clutter the code.
 
 ---
 
-Only use comments for complex logic or unclear code.
+Use comments to provide context and leave notes for yourself and other developers.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
index 9273138f57..34f6a8de44 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
@@ -86,42 +86,6 @@ This rule adds space below each list item, not above.
 
 ## --text--
 
-Given the CSS rule `li { margin-bottom: 15px; }`, what effect does this have on list items?
-
-## --answers--
-
-Adds `15px` of space inside each list item.
-
-### --feedback--
-
-This rule affects the space outside the list item, not inside.
-
----
-
-Adds `15px` of space between the content and `border` of each list item.
-
-### --feedback--
-
-This rule affects the space outside the `border` of each list item.
-
----
-
-Adds `15px` of space below each list item.
-
----
-
-Adds `15px` of space above each list item.
-
-### --feedback--
-
-This rule adds space below each list item, not above.
-
-## --video-solution--
-
-3
-
-## --text--
-
 What does the `line-height` property control in CSS?
 
 ## --answers--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
index 0982d60a3e..5d1897b9df 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
@@ -2,7 +2,7 @@
 id: 67329fbcfaf5ff5cdaa38a42
 title: What Is the var Keyword, and Why Is It No Longer Suggested to Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ae4bq5IcDfI
 dashedName: what-is-the-var-keyword-and-why-is-it-no-longer-suggested-to-use-it
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
index bc8a1a6b21..c4decaafbe 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
@@ -2,7 +2,7 @@
 id: 67335f45489c5a11b71d0ed5
 title: What Is Hoisting?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Aa1bLYTu5T8
 dashedName: what-is-hoisting
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
index 39fa9b1772..7e9ac93c18 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
@@ -2,7 +2,7 @@
 id: 6733b072bd8f5b06ccdbd9e2
 title: What Is Asynchronous JavaScript, and How Does It Differ from Synchronous JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ibxm8ApRm8A
 dashedName: what-is-asynchronous-javascript-and-how-does-it-differ-from-synchronous-javascript
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
index 95a85fa90e..6cb9d259b1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
@@ -2,7 +2,7 @@
 id: 67340798c2c1776709d8a5fe
 title: How Does the Async Attribute Work Inside Script Elements, and How Does It Differ from the Defer Attribute?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G0eRfrQzHdM
 dashedName: how-does-the-async-attribute-work-inside-script-elements-and-how-does-it-differ-from-the-defer-attribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
index 3a53b7a083..287bc520cc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
@@ -2,7 +2,7 @@
 id: 673407a223891b6734563c89
 title: What Is the Fetch API, and What Are Common Types of Resources That Are Fetched from the Network?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DVq2gXN12tQ
 dashedName: what-is-the-fetch-api-and-what-are-common-types-of-resources-that-are-fetched-from-the-network
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
index ffcc41b7e0..1b6e559cf9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
@@ -2,7 +2,7 @@
 id: 673407be6af21d6766ed4b96
 title: How Does the Fetch API Work with Common HTTP Methods and res.json()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: igua3fllgXc
 dashedName: how-does-the-fetch-api-work-with-common-http-methods-and-res-json
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
index 140a6c6384..0269fc49b0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
@@ -2,7 +2,7 @@
 id: 673407ca21117a67cf9521ca
 title: What Are Promises, and How Does Promise Chaining Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 7BclniIRnUs
 dashedName: what-are-promises-and-how-does-promise-chaining-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
index 963fc7e828..1cd296de72 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
@@ -2,7 +2,7 @@
 id: 673407d56c3dce67fa97969b
 title: What Is Async/Await, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: GYf6F2PTMEw
 dashedName: what-is-async-await-and-how-does-it-work
 ---
 
@@ -62,7 +62,7 @@ Consider the restrictions on where `await` can be placed.
 
 ---
 
-Only at the top level of a module.
+At very beginning of your code.
 
 ### --feedback--
 
@@ -70,7 +70,7 @@ Consider the restrictions on where `await` can be placed.
 
 ---
 
-Only inside `async` functions.
+Inside `async` functions.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
index e4d24c63fd..c98ac06414 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
@@ -2,7 +2,7 @@
 id: 673407e02bcf0d682b9a49a9
 title: How Does the JavaScript Engine Work, and What Is a JavaScript Runtime?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ekNo7Ai_4Uo
 dashedName: how-does-the-javascript-engine-work-and-what-is-a-javascript-runtime
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
index e3a4b550e0..053796abee 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
@@ -2,7 +2,7 @@
 id: 673407eb10ca9d68634e81d9
 title: What Is the Geolocation API, and How Does the getCurrentPosition Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Daytgop2tf0
 dashedName: what-is-the-geolocation-api-and-how-does-the-getcurrentposition-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
index e2d2d17228..e92ab03672 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
@@ -2,7 +2,7 @@
 id: 672d26917a8ab3220c038a42
 title: How Do Comparisons Work with Null and Undefined Data Types?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LFaWJYxUkds
 dashedName: how-do-comparisons-work-with-null-and-undefined-data-types
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
index efe7c82d19..e5ff928312 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
@@ -2,13 +2,13 @@
 id: 673282bea35dbf129efb63d6
 title: What Are Switch Statements and How Do They Differ from If/Else Chains?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3qSSecohwrc
 dashedName: what-are-switch-statements-and-how-do-they-differ-from-if-else-chains
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
index 11fc342586..96d642737c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
@@ -2,7 +2,7 @@
 id: 672aa578a2129554d4675049
 title: What Are the Basic Parts of a Computer?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: SJT6r_ejSqw
 dashedName: what-are-the-basic-parts-of-a-computer
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
index 99c7c12bda..91a1e84380 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
@@ -2,7 +2,7 @@
 id: 672ab82c1a9bbd0e3aabc39d
 title: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: AcTxNEVccxc
 dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing-devices
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
index 9105b060dc..515d189cc8 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
@@ -2,7 +2,7 @@
 id: 672ab83c4297910eade53c2e
 title: What Are the Different Types of Internet Service Providers?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pNR0QzFzSrg
 dashedName: what-are-the-different-types-of-internet-service-providers
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
index dba5d2ea48..8e1b267afd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
@@ -2,7 +2,7 @@
 id: 672ab849aa1ef70eefd29364
 title: What Are Safe Ways to Sign Into Your Computer?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pGoZFEMjC-g
 dashedName: what-are-safe-ways-to-sign-into-your-computer
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which of the follow is considered an unsafe password?
+Which of the following is considered an unsafe password?
 
 ## --answers--
 
@@ -78,7 +78,7 @@ Think about the extra layer of security.
 
 ---
 
-To ensure the person trying to access the account is the authorized user.
+It ensures the person trying to access the account is the authorized user.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
index 18c74684ad..0aba68160a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
@@ -2,7 +2,7 @@
 id: 672ab8573f32480f192aaae1
 title: What Are the Different Types of Tools Professional Developers Use?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: FHUfC8cm_AA
 dashedName: what-are-the-different-types-of-tools-professional-developers-use
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
index 1604f7ec9b..43fdc2091c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
@@ -2,7 +2,7 @@
 id: 67329f9e9eb84e5c6a5e4366
 title: What Is a String Object, and How Does It Differ from String Primitive?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _-EJRG7vr-0
 dashedName: what-is-a-string-object-and-how-does-it-differ-from-string-primitive
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
index 772d1bf66e..b81371dcae 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
@@ -2,7 +2,7 @@
 id: 6732c68f4520d160584a6fd2
 title: What Is the toString() Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: OYOHw8Xmatw
 dashedName: what-is-the-tostring-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
index a2fe162e72..3bfd6c643e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
@@ -2,7 +2,7 @@
 id: 6732c69d82814160951b1aa7
 title: What Is the Number Constructor, and How Does It Work for Type Coercion?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ZY_GdH7FbPI
 dashedName: what-is-the-number-constructor-and-how-does-it-work-for-type-coercion
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
index 9fe8fd7de9..aa9de6ca0f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
@@ -2,7 +2,7 @@
 id: 6732c6ab21031b60d2b0c999
 title: What Are Some Common Practices for Naming Variables and Functions?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: wheRZCpE724
 dashedName: what-are-some-common-practices-for-naming-variables-and-functions
 ---
 
@@ -86,35 +86,35 @@ Remember the prefix we typically use for getter functions.
 
 ## --text--
 
-Which of these is the best name for a constant representing the maximum number of login attempts?
+Which of the following should you do if you’re working in an established codebase and / or with a team?
 
 ## --answers--
 
-`max_attempts`
+Use your text editor's find-and-replace feature to update any function or variable names you come across that could be improved, even it's not related to the task you're working on.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ---
 
-`MAX_LOGIN_ATTEMPTS`
+Stick to the naming conventions for variables and functions that have already been established.
 
 ---
 
-`loginMaxAttempts`
+Come up with your own naming conventions for any new code you write.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ---
 
-`ATTEMPTS_MAX`
+Strictly use the naming conventions covered in this lecture.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
index 96a5d87762..627d73b2a3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
@@ -2,7 +2,7 @@
 id: 6732c6ba2ea42b610b9f9ce1
 title: How Do You Get the Length for an Array, and How Can You Create an Empty Array of Fixed Length?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ezk1SIbBDqw
 dashedName: how-do-you-get-the-length-for-an-array-and-how-can-you-create-an-empty-array-of-fixed-length
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
index fb67a1c812..6aca9b93a9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
@@ -2,7 +2,7 @@
 id: 6732c6c72d3738614e1230a2
 title: What Are Linters and Formatters, and How Can They Help You with Code Consistency?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XDPvu4bk8IA
 dashedName: what-are-linters-and-formatters-and-how-can-they-help-you-with-code-consistency
 ---
 
@@ -106,7 +106,7 @@ Think about when it would be most beneficial to catch potential issues.
 
 ---
 
-As part of the continuous integration pipeline.
+As part of the build process, a plugin for your text editor or IDE, a pre-commit hook before code can be committed to a codebase, and so on.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
index a7150859dc..781cc1c448 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
@@ -2,7 +2,7 @@
 id: 6732c6d4dec34c61850a1276
 title: What Is Memory Management, and How Does It Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HJF89E-ODlw
 dashedName: what-is-memory-management-and-how-does-it-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
index b93d630963..a5f72166df 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
@@ -2,7 +2,7 @@
 id: 6732c6e281c14a61c4858361
 title: What Are Closures, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: J4ZBwMbDAgE
 dashedName: what-are-closures-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
index 38797fe0ea..aafb368aab 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
@@ -2,7 +2,7 @@
 id: 6733aae9d25004f60d1e86f2
 title: What Are Some Ways to Validate Forms Using JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: azh-Mh6dxyo
 dashedName: what-are-some-ways-to-validate-forms-using-javascript
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
index 614a257d86..ad0285c05d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
@@ -2,7 +2,7 @@
 id: 6733d3a33abdd27cd562bdf2
 title: What Is the Purpose of e.preventDefault?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gBUdCKcBJSg
 dashedName: what-is-the-purpose-of-e-preventdefault
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
index 74b2c72627..31b4d3e0b3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
@@ -2,7 +2,7 @@
 id: 6733d3ab69e94b7df7ee91b0
 title: How Does the Submit Event Work with Forms?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EWGb5yFyQs4
 dashedName: how-does-the-submit-event-work-with-forms
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
index 10957f235f..4c8b910483 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
@@ -1,14 +1,75 @@
 ---
 id: 6733b0451d6be0065430b418
 title: What Is Functional Programming?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-functional-programming
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Functional programming is about writing code that is clean, predictable, and easier to test and debug. Two key concepts we'll explore today are pure functions and avoiding side effects.
+
+Let's start with pure functions.
+
+A pure function is a function that, given the same input, will always return the same output, and it doesn't modify anything outside of itself.
+
+Here's an example of a pure function:
+
+```js
+function add(a, b) {
+  return a + b;
+}
+```
+
+This function is pure because it always returns the same result for the same inputs, and it doesn't change anything outside of itself. No matter how many times you call `add(2, 3)`, it will always return `5`, and it won't affect any other part of your program.
+
+Now, let's contrast this with an impure function:
+
+```js
+let total = 0;
+function addToTotal(value) {
+  total += value;
+  return total;
+}
+```
+
+This function is impure because it modifies a variable outside of itself (`total`). The result of `addToTotal(5)` will be different depending on what `total` was before the function was called. This unpredictability can make our code harder to understand and debug.
+
+This brings us to our next important concept and that is side effects.
+
+A side effect is any change that occurs in the state of the program when a function is called. This could include modifying a global variable, writing to a file, or making an API call.
+
+Pure functions have no side effects but impure functions have these.
+
+Avoiding side effects is a key principle of functional programming. When we minimize side effects, our code becomes more predictable and easier to test.
+
+While writing code, our main goal should be to make functions do one thing and they should do it very well without changing other parts of our program.
+
+Here's an example of a function with a side effect:
+
+```js
+function greet(name) {
+  console.log(`Hello, ${name}!`);
+}
+```
+
+This function has a side effect because it interacts with the outside world by logging to the console.
+
+In functional programming, we might rewrite this as:
+
+```js
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+console.log(greet("Alice"));
+```
+
+Now `greet` is a pure function that simply returns a string, and we handle the side effect (logging to the console) separately.
+
+Functional programming encourages us to compose our programs using pure functions by breaking our code into small, predictable pieces. And thus, we can build programs that are easier to understand, test, and maintain.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
index 435dd0013d..39cae08a55 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
@@ -1,14 +1,56 @@
 ---
 id: 6734061fe116df617a564a37
 title: What Is Currying, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-currying-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Currying is a technique where we transform a function that takes multiple arguments into a sequence of functions, each taking a single argument.
+
+Let's start with a basic example. Imagine we have a function that adds two numbers:
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add(3, 4)); // Output: 7
+```
+
+This is a function that takes two arguments and returns their sum. Now, let's see how we can curry this function:
+
+```js
+function curriedAdd(a) {
+  return function(b) {
+    return a + b;
+  }
+}
+
+console.log(curriedAdd(3)(4)); // Output: 7
+```
+
+In this curry converted code, instead of taking two arguments at once, we have a function that takes the first argument and returns another function. This returned function then takes the second argument and performs the addition. We call it like `curriedAdd(3)(4)`, where each pair of parentheses represents a function call.
+
+But why would we want to do this?
+
+Currying allows us to create some special functions easily. For example, we could create a function that always adds five to any number:
+
+```js
+const addFive = curriedAdd(5);
+console.log(addFive(10)); // Output: 15
+console.log(addFive(20)); // Output: 25
+```
+
+Here, `addFive` is a function that's always ready to add five to whatever number we give it. This is a simple example of partial application, where we fix a certain number of arguments to a function, producing another function that takes fewer arguments.
+
+While our examples have focused on functions with two arguments, currying can be applied to functions with any number of arguments.
+
+As you continue your journey in JavaScript, you'll likely find many situations where currying can make your code cleaner and more expressive.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
index 4db556f700..77979f32f6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
@@ -2,7 +2,7 @@
 id: 6733affc29df1304e2c97e88
 title: What Are Classes, and How Do They Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ap99e6plM10
 dashedName: what-are-classes-and-how-do-they-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
index e2e7faaaf7..da3b669de0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
@@ -2,7 +2,7 @@
 id: 673403ca2bb16658309e3632
 title: How Does the This Keyword Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Tt1v6kLAdMo
 dashedName: how-does-the-this-keyword-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
index a59505a833..b83eb10e2e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
@@ -2,7 +2,7 @@
 id: 673403d2aa52d8586a14a269
 title: What Is Class Inheritance, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DNO-xTd5D70
 dashedName: what-is-class-inheritance-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
index 84531b6dff..50e53a924d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
@@ -2,7 +2,7 @@
 id: 673403dbf5c9835898632c84
 title: What Are Static Properties and Methods in Classes?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xDIqlqh6_EU
 dashedName: what-are-static-properties-and-methods-in-classes
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
index f4336f8d2d..0280a627cf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
@@ -2,7 +2,7 @@
 id: 672aa86da9937560d3dfe3d6
 title: What Are Common Use Cases for Using Floats, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xUr2Oh1KE8I
 dashedName: what-are-common-use-cases-for-using-floats
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
index edff7974ad..d9b6146d33 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
@@ -2,7 +2,7 @@
 id: 672c3a84fb8d4613776cc99e
 title: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3BO43MUDd8Q
 dashedName: what-is-relative-positioning
 ---
 
@@ -22,7 +22,7 @@ Which of the following is the default positioning for all elements?
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
@@ -30,7 +30,7 @@ Think about what kind of positioning doesn’t need any special CSS declaration.
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
@@ -38,7 +38,7 @@ Think about what kind of positioning doesn’t need any special CSS declaration.
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
index 5b2646ed2c..e81f1e77fc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
@@ -2,7 +2,7 @@
 id: 672c3a8fac7c5613b4bb75de
 title: What Is Absolute Positioning, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KaTb9CL9lMQ
 dashedName: what-is-absolute-positioning
 ---
 
@@ -106,7 +106,7 @@ Consider what the element falls back to when no positioned ancestor is available
 
 ---
 
-Relative to the initial containing block (usually the browser’s viewport).
+Relative to the initial containing block (usually the browser's viewport).
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
index 180cf0866c..703bafa815 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
@@ -2,7 +2,7 @@
 id: 672c3a9d32c56113fcaedf24
 title: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: H7sJoYv_zmA
 dashedName: what-is-fixed-and-sticky-positioning
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
index 1a25bd0249..b21819ecc3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
@@ -2,7 +2,7 @@
 id: 672c3aa9bc3a481425cb52b3
 title: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IkEM5npJM5E
 dashedName: what-is-the-z-index-property
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
index cccaf8c884..46366eb342 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
@@ -2,7 +2,7 @@
 id: 67329fd6ad99c75d4a4b74e4
 title: What Is a Module in JavaScript, and How Can You Import and Export Modules in Your Program?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: mGPyLJLTUpo
 dashedName: what-is-a-module-in-javascript-and-how-can-you-import-and-export-modules-in-your-program
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
index d9ca791db7..1406e683c1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
@@ -1,14 +1,144 @@
 ---
 id: 6733b02d1e556005a544c5e3
 title: What Is Recursion, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-recursion-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let’s learn how recursion works in JavaScript.
+
+Recursion is a complicated feature that allows you to call a function repeatedly until a base-case is reached. Unlike a traditional loop, recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree. But you can also use it for more basic tasks, such as counting down from a given number.
+
+Let’s construct a function to do exactly that. We’ll call our function recursiveCountdown, and it needs to accept a number. We’ll have it print this number to the console:
+
+```js
+const recursiveCountdown = (number) => {
+  console.log(number);
+};
+```
+
+Now if we call this and pass the number 5, we’ll see the number print to our terminal. But nothing else happens – and the number 5 certainly isn’t a countdown.
+
+Before we start building the recursive portion of our function, we need to establish our base case first. If you don’t have a base case established, your code will run until it exceeds your memory allocation and crashes.
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    console.log(number);
+  };
+
+recursiveCountdown(5);
+```
+
+For our base case, we want the countdown to stop if the number is less than 1. When we hit that base-case, we can return to break out of the function execution.
+
+Now that we’ve safely prepared a base-case, we can set up the recursion. The key point that makes a function recursive is that it calls itself in its execution. In this case, we want to call the function after we print the number. But in order to count down, our new number needs to be one less:
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    console.log(number);
+    recursiveCountdown(number - 1);
+  };
+
+recursiveCountdown(5); // 
+```
+
+This would log the numbers 5, 4, 3, 2, and 1 to the console.
+
+We do get our five numbers! But what if we wanted to count up instead? Rather than writing an entirely new function, we can swap the order of our log and our recursive call:
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    recursiveCountdown(number - 1);
+    console.log(number);
+  };
+
+recursiveCountdown(5);
+```
+
+This would log the numbers 1, 2, 3, 4, and 5 to the console.
+
+But why does that work? Well, to understand this you need to understand the call stack. The call stack is how JavaScript tracks and resolves function calls. The stack functions as a last-in-first-out queue of sorts. To understand this better, let’s add some logging to our function:
+
+```js
+const recursiveCountdown = (number) => {
+    console.log(`Function execution started for number: ${number}`);
+    if (number < 1) {
+        console.log(`Base case reached, begin resolving stack`);
+        return;
+    }
+    console.log(`Calling recursiveCountdown with number: ${number - 1}`);
+    recursiveCountdown(number - 1);
+    console.log(`Function execution completed for number: ${number}`);
+  };
+
+recursiveCountdown(5);
+```
+
+We’ve added four key statements here. The first log runs when a function call begins executing. The third log runs just before the recursive function is called. And the fourth log runs when the function execution has ended. The result is:
+
+```md
+Function execution started for number: 5
+Calling recursiveCountdown with number: 4
+Function execution started for number: 4
+Calling recursiveCountdown with number: 3
+Function execution started for number: 3
+Calling recursiveCountdown with number: 2
+Function execution started for number: 2
+Calling recursiveCountdown with number: 1
+Function execution started for number: 1
+Calling recursiveCountdown with number: 0
+Function execution started for number: 0
+Base case reached, begin resolving stack
+Function execution completed for number: 1
+Function execution completed for number: 2
+Function execution completed for number: 3
+Function execution completed for number: 4
+Function execution completed for number: 5
+```
+
+But how does this happen? Well, this is where the call stack comes in to play. When we call `recursiveCountdown(5)`, that function call is added to the call stack.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(4)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(4)` gets added to the call stack, on top of the `recursiveCountdown(5)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(3)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(3)` gets added to the call stack, on top of the `recursiveCountdown(4)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(2)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(2)` gets added to the call stack, on top of the `recursiveCountdown(3)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(1)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(1)` gets added to the call stack, on top of the `recursiveCountdown(2)`.
+
+And finally, when that function call reaches the point where it needs to call `recursiveCountdown(0)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(0)` gets added to the call stack, on top of the `recursiveCountdown(1)`.
+
+But `recursiveCountdown(0)` doesn’t call another function – it hits our base case, where it returns early. Because the execution of that function has ended, the function call can be considered “resolved”. When the call is resolved, it’s removed from the stack.
+
+Now our `recursiveCountdown(1)` is no longer waiting on that call – it’s at the top of the stack and can resume executing.
+
+`recursiveCountdown(1)` resolves, is removed from the stack, and allows `recursiveCountdown(2)` to resume execution.
+
+`recursiveCountdown(2)` resolves, is removed from the stack, and allows `recursiveCountdown(3)` to resume execution.
+
+`recursiveCountdown(3)` resolves, is removed from the stack, and allows `recursiveCountdown(4)` to resume execution.
+
+`recursiveCountdown(4)` resolves, is removed from the stack, and allows `recursiveCountdown(5)` to resume execution.
+
+And `recursiveCountdown(5)` resolves and is removed from the stack. Our call stack is now empty, so the recursion is complete!
+
+This is a basic overview of how recursion works in JavaScript. It’s a complicated concept, and you should play around with some code and log statements until you’re comfortable with the behavior of the call stack.
+
+For a little fun fact, we talked about how a lack of a base-case can cause your code to crash when it runs out of memory. This is because the recursion keeps piling more and more function calls into the call stack until the stack overflows. Just like the name of the popular programming community.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
index 7e2662b831..8b15a1fa60 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
@@ -2,7 +2,7 @@
 id: 6732a06aed1b095f57b0bb82
 title: What Is the Change Event, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 87w0nfXZhss
 dashedName: what-is-the-change-event-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
index 5eb1995853..d5ef623ff0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
@@ -2,7 +2,7 @@
 id: 67338e93b75977a344cf6d40
 title: How Do Event Bubbling, and Event Delegation Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9yeVpWaYwMU
 dashedName: how-do-event-bubbling-and-event-delegation-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
index 046c33cb15..a38b58bf7d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
@@ -50,7 +50,7 @@ The name of the feature is a clue to its purpose.
 
 ## --text--
 
-Why is not a good idea to use pure black backgrounds with white text in dark mode?
+Why is it not a good idea to use pure black backgrounds with white text in dark mode?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
index 96e9d87863..13bcc49923 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
@@ -46,7 +46,7 @@ Think about the user experience
 
 ## --video-solution--
 
-3
+1
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
index 7bf2b03135..b3cc62f425 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
@@ -18,7 +18,7 @@ What is infinite scrolling?
 
 ## --answers--
 
-A design pattern to change the scrollbar on the page.
+A design pattern that changes the scrollbar on the page.
 
 ### --feedback--
 
@@ -26,7 +26,7 @@ Review the beginning of the video when this concept is introduced.
 
 ---
 
-A design pattern to change size of the page.
+A design pattern that changes the size of the page.
 
 ### --feedback--
 
@@ -42,15 +42,11 @@ Review the beginning of the video when this concept is introduced.
 
 ---
 
-A design pattern that breaks up content into pages.
-
-### --feedback--
-
-Review the beginning of the video when this concept is introduced.
+A design pattern that loads more content as the user scrolls down the page
 
 ## --video-solution--
 
-3
+4
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
index 501388fb55..6e3678f0a1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What is alignment in design?
+What is the importance of balance in design when placing images?
 
 ## --answers--
 
-The distribution of visual weight in a design.
+To ensure images are the right size.
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ---
 
-The order in which elements are viewed on a page.
+To make images accessible to all users
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ---
 
-The placement of elements in relation to each other.
+To create a harmonious design by distributing visual weight.
 
 ---
 
-The size of an image in relation to the space it occupies.
+To improve the resolution of images.
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
index bed2785ba2..ad39683131 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
@@ -2,7 +2,7 @@
 id: 6734ddabad59e593a49afafe
 title: Welcome Message from Quincy
 challengeType: 24
-videoId: nVAaxZ34khk
+videoId: KwZkXwDUc1o
 dashedName: welcome-message-from-quincy
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
index 50014e458c..cfa1be8adc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
@@ -2,7 +2,7 @@
 id: 6734e2c5780912abd874e79c
 title: How Does the Certification Process Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: v27_UwsNiUE
 dashedName: how-does-the-certification-process-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
index 2bd0446801..339890c9ab 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
@@ -1,9 +1,9 @@
 ---
 id: 6734e2dcb965e5ac0ea38e0f
-title: How to Develop Effective Learning Habits
+title: How Can You Build Effective Learning Habits and Work Smarter?
 challengeType: 11
-videoId: nVAaxZ34khk
-dashedName: how-to-develop-effective-learning-habits
+videoId: tnp3tOg9oBM
+dashedName: how-can-you-build-effective-learning-habits-and-work-smarter
 ---
 
 # --description--
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-How to Develop Effective Learning Habits question?
+What does the "Pace yourself" tip emphasize as key to making progress through the curriculum?
 
 ## --answers--
 
-Answer 1
+Learning as much as possible all in one day
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
+
+---
+
+Completing the curriculum without breaks
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
 
 ---
 
-Answer 2
+Working a little bit each day
+
+---
+
+Stopping frequently whenever it feels hard
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the main benefit of establishing a coding routine?
+
+## --answers--
+
+It doubles the amount of learning in half the time
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+---
+
+It reduces the need for sleep
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+---
+
+It helps make coding a habit that requires less willpower
+
+---
+
+It eliminates the need for practice or repetition
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+## --video-solution--
+
+3
+
+## --text--
+
+How does the Pomodoro technique help with starting a coding session?
+
+## --answers--
+
+It guarantees you will code for hours without stopping
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
+
+---
+
+It instantly makes you a faster coder by strictly timing every keystroke
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
+
+---
+
+It automatically determines which tasks you should work on, removing the need for planning
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
 
 ---
 
-Answer 3
+It makes it easier to begin coding by committing to just 25 minutes
 
 ## --video-solution--
 
-1
+4
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
new file mode 100644
index 0000000000..60c6525ae0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
@@ -0,0 +1,121 @@
+---
+id: 6763500bd5a85d5898cc21a9
+title: How do Most People Learn Effectively?
+challengeType: 11
+videoId: ybpwBqa56-s
+dashedName: how-do-most-people-learn-effectively
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the concept called where learning is spread out over time, allowing sleep to reinforce memory structures?
+
+## --answers--
+
+Spaced Repetition
+
+---
+
+Speed Reading
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+---
+
+Memorization
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+---
+
+Passive Review
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which learning approach involves switching between different concepts or skills during a single study session to keep your thinking flexible?
+
+## --answers--
+
+Focused Immersion
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+---
+
+Interleaving Practice
+
+---
+
+Highlighting Notes
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+---
+
+Mental Mapping
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What strategy helps you overcome the illusion of competence by actively testing your understanding through quizzes and exercises?
+
+## --answers--
+
+Passive Listening
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+---
+
+Rereading Notes
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+---
+
+Active Recall
+
+---
+
+Watching Tutorials Only
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
index b10d5af014..cac2bfd8ad 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
@@ -92,30 +92,30 @@ Which of the following units can be used to set the `width` or `height` of an el
 
 `px`, `%`, and `em`.
 
-### --feedback--
-
-CSS allows various units to set dimensions.
-
 ---
 
-`px`, `vh`, and `vw`.
+`pxx`, `depth`, and `radius`.
 
 ### --feedback--
 
-CSS allows various units to set dimensions.
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
 
 ---
 
-`cm`, `vh`, and `rem`.
+`%%`, `mb`, and `vel`.
 
 ### --feedback--
 
-CSS allows various units to set dimensions.
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
 
 ---
 
 All of the above
 
+### --feedback--
+
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
+
 ## --video-solution--
 
-4
+1
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
index c1a539a0ac..adebb0514c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
@@ -120,13 +120,6 @@ Think about the combinator that targets elements that are direct children of a s
 
 Which CSS rule will style the first `p` element that immediately follows any `h1` element?
 
-```css
-h1 {
-  color: green;
-  font-size: 24px;
-}
-```
-
 ## --answers--
 
 ```css
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
index 64551994f4..4eed45a28e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
@@ -86,7 +86,7 @@ Consider how inline-block strikes a balance between inline flow and size control
 
 ## --text--
 
-In what situation would an element with d`isplay: inline-block;` behave differently than one with `display: block;`?
+In what situation would an element with `display: inline-block;` behave differently than one with `display: block;`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..715cff09bf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: zUCIsEDCIMU
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is an example of a boolean attribute?
+
+## --answers--
+
+`src`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`href`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`disabled`
+
+---
+
+`alt`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the role of an attribute in HTML?
+
+## --answers--
+
+Attributes provide additional information and help define the behavior for HTML elements.
+
+---
+
+Attributes change the background color of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes change the font size of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes add JavaScript functionality to an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is the correct syntax for a boolean attribute?
+
+## --answers--
+
+`<input type="checkbox" checked>`
+
+---
+
+`<input type="checkbox" checked="on">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="off">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="isChecked">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
index 273ad05c90..dabc6bc4a6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
@@ -14,40 +14,35 @@ Watch the video lecture and answer the questions below.
 
 ## --text--
 
-What will be the output of the following code?
-
-```js
-let numbers = [1, 2, 3, 4, 5];
-console.log(numbers[2]);
-```
+Which of the following is NOT true about JavaScript arrays?
 
 ## --answers--
 
-`2`
+They are zero-indexed.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ---
 
-`3`
+They are an unordered collection of values.
 
 ---
 
-`4`
+They can contain another array as a value.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ---
 
-`5`
+They are dynamic, and their size can change after they're created.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ## --video-solution--
 
@@ -58,38 +53,37 @@ Remember that arrays in JavaScript are zero-indexed.
 What will be the output of the following code?
 
 ```js
-let fruits = ['apple', 'banana'];
-fruits.push('orange');
-console.log(fruits);
+let numbers = [1, 2, 3, 4, 5];
+console.log(numbers[2]);
 ```
 
 ## --answers--
 
-`['apple', 'banana']`
+`2`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ---
 
-`['apple', 'banana', 'orange']`
+`3`
 
 ---
 
-`['banana', 'orange']`
+`4`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ---
 
-`['orange', 'apple', 'banana']`
+`5`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
index cfbae628d8..81ec4e45e7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
@@ -1,14 +1,26 @@
 ---
 id: 6733ab12b60bd7f6b2b0b0c0
 title: How Does the Audio Constructor Work, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-does-the-audio-constructor-work-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about the Audio constructor and its common methods.
+
+The `Audio` constructor, like other constructors, is a special function called with the `new` keyword. It returns an HTMLAudioElement, which you can then use to play audio for the user, or append to the DOM for the user to control themselves.
+
+When you call the constructor, you can optionally pass a URL as the (only) argument. This URL should point to the source of the audio file you want to play. Or, if you need to change the source dynamically, you can assign the URL to the `src` property of the returned audio element.
+
+The returned audio element offers various methods for controlling the audio. You'll most likely use the `play()` method, which begins audio playback. There is also the `pause()` method, which pauses the audio playback but preserves the current location in the track allowing `play()` to resume playback from that point.
+
+You might expect there to be a `stop()` method, to pause audio playback and reset the track to the beginning. But instead, you should call `pause()` and set the `currentTime` property directly.
+
+Finally, the `canPlayType()` method can be used to determine if a browser is likely to be able to play your specific audio format. You will learn about audio and video formats in the next lecture.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
index 58373912a7..d967dd3b0d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
@@ -1,14 +1,34 @@
 ---
 id: 6733d8203da84a08a0f5eab4
 title: What Are the Different Types of Video and Audio Formats?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-the-different-types-of-video-and-audio-formats
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about the different types of audio and video formats.
+
+You have probably heard of, or even used, a few common ones. If the terms MP3, MP4, MOV, or WebM are familiar to you, those are all different formats for video and audio. And there are quite a few more that are available.
+
+Before we dive in to file formats, we need to talk about MIME types. A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type.
+
+Nearly every file format has a MIME type. HTML, for example, has the type `text/html`. A JSON object has the type `application/json`. Even a Windows `.exe` installer has a MIME type: `application/vnd.microsoft.portable-executable`.
+
+The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
+
+An MP3 file has the MIME type `audio/mp3`. An MP4, however, can have the MIME type `audio/mp4` OR `video/mp4`, depending on whether it's a video file or audio-only. This distinction tells the browser how to handle the file.
+
+There are plenty of other file formats, such as the waveform format WAV, the multipurpose OGG, WMV for the Windows media player, the open source MKV, and many more.
+
+Knowing the differences between these file formats can help you ensure your users get the best experience, but sometimes you can't know what format a user's computer will support (or not support). Thankfully, `video` and `audio` elements both support the `source` element.
+
+With the `source` element, you can specify a file type and `source` and can include multiple different types by using multiple `source` elements. When you do this, the browser will determine the best format to use for the user's current environment.
+
+This takes away the guess work and allows you to focus on building engaging applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
index 48a10a8aea..5011bcafef 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
@@ -1,14 +1,28 @@
 ---
 id: 6733d829d983c008d2db41a1
 title: What Is Codecs and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-codecs-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about codecs and how they work.
+
+If you have worked with videos or audio before, you may have heard about codecs. A codec, short for “encoder/decoder", is an algorithm or software that can convert audio and video between analogue and digital formats.
+
+Codecs can be specified as part of the MIME type. The basic syntax to define a codec is to add a semi-colon after the media type, then `codecs=` and the codec.
+
+For example, an OGG audio file which uses the Vorbis codec might have a MIME type of `audio/ogg; codecs=vorbis`. Or, if a file supports multiple codecs, you can specify them as comma separated, but must surround them with quotes: `video/webm; codecs="vp8, vorbis"`.
+
+But some file types have a much more complicated syntax for codecs. For example, an MP4 might have a codec of `codecs="avc1.4d002a"`, indicating it was encoded with H.264.
+
+But when might you actually use these? Well, you can include them in the `type` attribute for a `source` element. This allows you to specify different codecs for the same format, giving the browser more granular options when determining which format to use for that user's environment.
+
+But you can also use them as part of the MIME type you pass to the global `MediaSource.isTypeSupported()` method. This method accepts a MIME-type, and returns `true` if the environment is likely to support it. Or rather, it returns `false` if it fails to instantiate a buffer for that file type. This approach allows you to programmatically select a source yourself, rather than relying on whatever the browser determines is “best".
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
index 25cc9e69db..ab8985556b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
@@ -1,14 +1,32 @@
 ---
 id: 6733d83630e76f08ff49e6dc
 title: What Is the HTMLMediaElement API and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-htmlmediaelement-api-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The HTMLMediaElement API is a powerful tool to control the behavior of audio and video elements on your page. It extends the base HTMLElement interface, so you have access to the base properties as well as these helpful methods.
+
+You've already explored some of the methods in a previous lecture about the Audio element, such as `play()` and `pause()`. These same methods are available on video elements as well.
+
+There are some other helpful methods, such as the `addTextTrack()` method. This method allows you to specify a text track to associate with the media element which is especially helpful for adding subtitles to a video.
+
+Or the `fastSeek()` method, which allows you to move the playback position to a specific time within the media.
+
+The HTMLMediaElement API also provides access to some new events that a standard element does not have.
+
+The `play` and `pause` events are fired when the media starts and stops playing. The `ended` event fires when the end of the media has been reached.
+
+The `waiting` event fires when playback is automatically paused due to data buffering.
+
+And the `canplay` and `canplaythrough` events fire when the media can be partially played, or played in totality.
+
+The HTMLMediaElement offers a great deal of control over your interactive media, and we've only scratched the surface. I encourage you to explore and experiment with the API to find the best ways to integrate it with your applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
index 025caa8592..7b30a960f7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
@@ -1,14 +1,58 @@
 ---
 id: 6733d852175df50937f06061
 title: How Can You Work with the Media Streams to Capture Video and Audio from a Local Device?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-work-with-the-media-streams-getusermedia-to-capture-video-and-audio-from-a-local-device
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Instead of playing audio and video, you may sometimes want to capture audio or video. The Media Capture and Streams API, or the MediaStream API, allows you to do this.
+
+In order to use the API, however, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the global `navigator` object has a `getUserMedia()` method for you to use.
+
+This method accepts a single `constraints` object which defines the type of media you want to receive. This object has an `audio` and `video` property, reflecting audio and video streams. These properties can be `false`, if you do not want to receive that type of stream, `true` if you do, or objects defining additional constraints.
+
+For example, you can require a specific resolution of video output:
+
+```js
+window.navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: {
+    width: {
+      min: 1280,
+      ideal: 1920,
+      max: 3840
+    },
+    height: {
+      min: 720,
+      ideal: 1080,
+      max: 2160
+    }
+  }
+});
+```
+
+This constraint object specifies minimum and maximum resolutions for the video feed. The `ideal` property specifies the resolution you'd most like to have – and the stream will provide the resolution closest to your ideal.
+
+Once you've created your MediaStream (assuming the user approves the automated request to access their hardware), you can use the stream data however you need.
+
+Note that `getUserMedia()` returns a Promise, which means you will either need a callback function to consume the stream, or use async/await syntax. You will learn more about Promises and asynchronous programming in future lectures.
+
+Here's a basic example which renders the user's webcam feed to the page.
+
+```js
+const video = document.querySelector("video");
+const stream =
+  await window.navigator.mediaDevices.getUserMedia({ video: true });
+video.srcObject = stream;
+await video.play();
+```
+
+It is worth noting that this API does not offer access to screen capture. You'll learn about that API in the next lecture.
 
 # --questions--
 
@@ -22,7 +66,7 @@ Which method is used to access the user's media devices?
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ---
 
@@ -30,7 +74,7 @@ This method accesses the user’s media devices.
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ---
 
@@ -42,7 +86,7 @@ This method accesses the user’s media devices.
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
index 9a2ccc881f..33008c9aa9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
@@ -1,14 +1,26 @@
 ---
 id: 6733d8606fb893099e3d0df3
 title: What Are Some Other Examples of Video and Audio APIs?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-some-other-examples-of-video-and-audio-apis
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+You've learned about the HTMLMediaElement and MediaStreams APIs, but there are a few more APIs that can be quite helpful in working with video and audio.
+
+The first is the Screen Capture API. As the name might suggest, this API allows you to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+
+Then there is the MediaStream Recording API. This API works in tandem with the MediaStreams APIs, allowing you to record a MediaStream (or even an HTMLMediaElement directly). It then fires `dataavailable` events with Blob payloads you can write to the local file storage.
+
+Underlying all of this technology is the Media Source Extensions API. The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property, for example.
+
+And finally, the Web Audio API which powers everything audible on the web. This API includes important objects like an `AudioBuffer` (representing a Buffer specifically containing audio data) or the `AudioContext`.
+
+And that wraps up our lectures on audio and video!
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
index 9f69392f93..0080dd6da9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
@@ -74,7 +74,7 @@ It makes the gradient extend to the farthest corner of the element.
 
 ---
 
-It makes the gradient only appear within the element’s `padding`.
+It makes the gradient only appear within the element's `padding`.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
index 49ecdfbbfc..50823d9683 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
@@ -94,15 +94,15 @@ It makes the website look less colorful.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ---
 
-It doesn’t affect users with visual impairments.
+It doesn't affect users with visual impairments.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ---
 
@@ -114,7 +114,7 @@ It requires more CSS code.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
index 467ca6704d..f6ea379d54 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
@@ -102,35 +102,35 @@ Consider which property specifically targets one side of an element's border.
 
 ## --text--
 
-What's a potential advantage of using `box-shadow` to create a border effect instead of the `border` property?
+Which CSS property would you use to round the corners of a border?
 
 ## --answers--
 
-It's more widely supported by browsers.
+`border-style`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ---
 
-It allows for multiple "borders" with a single property.
+`border-radius`
 
 ---
 
-It's more performant.
+`border-spacing`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ---
 
-It can create gradients without additional properties.
+`border-bottom`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
index 7cb6ef94dc..17ccf4a3d7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
@@ -1,14 +1,92 @@
 ---
 id: 6733ab64775d35f78f5238fe
 title: What Does CRUD Stand For, and How Do the Basic Operations Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-does-crud-stand-for-and-how-do-the-basic-operations-work
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+CRUD is an acronym that stands for Create, Read, Update, and Delete. These are the four operations of persistent storage.
+
+Persistent storage refers to saving data in a way that makes it available even after the power is turned off or the device is restarted.
+
+Understanding how the basic operation of CRUD works is crucial to web development because it forms the foundation for working with databases and building applications where users can add, view, modify, and delete data.
+
+Now, let’s take a look at each part of CRUD more closely
+
+- Create refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
+
+- Read is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+
+- Update involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
+
+- Delete is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+
+CRUD is used when working with databases, the UI, and RESTful APIs. RESTful APIs are a set of conventions for building web services that allow the client to interact with a database or backend system by performing CRUD operations through standard HTTP methods.
+
+HTTP stands for Hypertext Transfer Protocol and it is the foundation for data communication on the web. There are HTTP methods which define the actions that can be performed on resources over the web. The common methods are `GET`, `POST`, `PUT`, `PATCH`, `DELETE`.
+
+You will learn more about RESTful APIs and HTTP in future videos, but here is a quick break down of how CRUD maps to the different HTTP methods.
+
+- `POST` is used to create a new resource.
+
+- `GET` is used to retrieve or read data.
+
+- `PUT` is used to update a resource by replacing it entirely.
+
+- `PATCH` is used to partially update a resource.
+
+- `DELETE` is used to remove a resource.
+
+Here’s an example of how CRUD operations might be represented in code using a simple array in JavaScript:
+
+```js
+let items = [];
+
+// Create
+function createItem(item) {
+  items.push(item);
+}
+
+// Read
+function readItems() {
+  return items;
+}
+
+// Update
+function updateItem(index, newItem) {
+  items[index] = newItem;
+}
+
+// Delete
+function deleteItem(index) {
+  items.splice(index, 1);
+}
+
+// Example Usage
+createItem('Book');
+console.log(readItems()); // ['Book']
+updateItem(0, 'Magazine');
+console.log(readItems()); // ['Magazine']
+deleteItem(0);
+console.log(readItems()); // []
+```
+
+In this example:
+
+- We create an item by pushing it into an array.
+
+- We read the items by returning the array.
+
+- We update an item by modifying the array element at a given index.
+
+- We delete an item by removing it from the array using splice().
+
+This is a basic representation of how CRUD operations work at a conceptual level.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
index dffd025eb2..c60ca2e42e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
@@ -1,14 +1,80 @@
 ---
 id: 6733ff4a9319c8486750886c
 title: What Is localStorage, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-localstorage-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The Web Storage API provides a mechanism for browsers to store key-value pairs right within the browser, allowing developers to store information that can be used across different page reloads and sessions.
+
+The two main components in the Web Storage API are `localStorage` and `sessionStorage`.
+
+`localStorage` is the part of the Web Storage API that allows data to persist even after the browser window is closed or the page is refreshed. This data remains available until it is explicitly removed by the application or the user.
+
+`sessionStorage` is another part of the Web Storage API that stores data for the duration of the page session, meaning the data is available as long as the browser tab or window is open. However, unlike `localStorage`, the data in `sessionStorage` is cleared when the tab or window is closed. You will learn more about `sessionStorage` in the next video.
+
+Common use cases for `localStorage` include storing user settings, such as themes or language preferences, remembering form data across browser sessions, and caching small pieces of information to improve the performance of web apps.
+
+Caching refers to storing frequently accessed data in a temporary storage location, known as a cache, so that subsequent requests for that data can be served more quickly without having to recompute or fetch it from a slower data source, such as a database or external server.
+
+Some common `localStorage` methods include the `setItem`, `getItem`, `removeItem` and `clear` methods.
+
+Here is an example of using the `setItem()` method which stores a key-value pair in `localStorage`.
+
+```js
+localStorage.setItem('username', 'JaneDoe');
+```
+
+Then if we want retrieve that value of a given key from `localStorage`, we can use the `getItem()` method.
+
+```js
+let username = localStorage.getItem('username');
+console.log(username); // JaneDoe
+```
+
+To remove an item from `localStorage` using its key, you can use the `removeItem()` method.
+
+```js
+localStorage.removeItem('username');
+```
+
+To clear all data in `localStorage`, you can use the `clear()` method.
+
+```js
+localStorage.clear();
+```
+
+Now, let’s take a look at an example where we use `localStorage` to store the preferred theme of a user.
+
+```js
+// Store the user's theme preference
+localStorage.setItem('theme', 'dark');
+
+// Retrieve the stored theme preference
+const userTheme = localStorage.getItem('theme');
+console.log(userTheme); // 'dark'
+
+// Remove the theme preference
+localStorage.removeItem('theme');
+
+// Clear all localStorage data
+localStorage.clear();
+```
+
+In this example:
+
+- We first store a theme choice (`dark`) for the user.
+
+- We then retrieve that theme and output it to the console.
+
+- Finally, we demonstrate how to remove a specific item or clear all stored data.
+
+`localStorage` is very useful for storing small pieces of data that need to persist between sessions, but it's important to note that `localStorage` should not be used to store sensitive information, such as passwords, because it can pose security risks.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
index b86ad69243..94f7696ea0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
@@ -1,14 +1,86 @@
 ---
 id: 6733ff5814129c48b4fca88e
 title: What Is sessionStorage, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-sessionstorage-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In the previous lecture video, we learned about working with `localStorage` and were briefly introduced to `sessionStorage`.
+
+Recall, that `sessionStorage` is when the data is cleared as soon as the user closes the tab or window in which the web application is running. It’s ideal for situations where data only needs to persist for the length of a single session, such as maintaining form data during navigation or storing temporary state information during a checkout process.
+
+Much like `localStorage`, `sessionStorage` uses key-value pairs to store and retrieve data. The methods used with `sessionStorage` are also the same as `localStorage`, with the only real difference being how long the data is stored.
+
+Here are a few examples of working with the different methods:
+
+- `sessionStorage.setItem()`: Stores a key-value pair in `sessionStorage`.
+
+```js
+sessionStorage.setItem('cart', '3 items');
+```
+
+- `sessionStorage.getItem()`: Retrieves the value of a given key from `sessionStorage`.
+
+```js
+let cart = sessionStorage.getItem('cart');
+console.log(cart); // Outputs: '3 items'
+```
+
+- `sessionStorage.removeItem()`: Removes a specific item from `sessionStorage` using its key.
+
+```js
+sessionStorage.removeItem('cart');
+```
+
+- `sessionStorage.clear()`: Clears all data stored in `sessionStorage`.
+
+```js
+sessionStorage.clear();
+```
+
+Let’s look at an example where we store data in `sessionStorage` which only lasts as long as the browser tab or window is open:
+
+```js
+// Store data in sessionStorage
+sessionStorage.setItem('currentUser', 'JohnDoe');
+
+// Retrieve the stored data
+const user = sessionStorage.getItem('currentUser');
+console.log(user); // 'JohnDoe'
+
+// Remove a specific key from sessionStorage
+sessionStorage.removeItem('currentUser');
+
+// Clear all sessionStorage data
+sessionStorage.clear();
+```
+
+In this example, we:
+
+1. Store the current user’s name (`JohnDoe`) in `sessionStorage`.
+
+2. Retrieve and display it.
+
+3. Remove the item associated with the key `currentUser`.
+
+4. Clear all `sessionStorage` data.
+
+The key difference from `localStorage` is that as soon as the user closes the tab, all stored session data will be lost.
+
+`sessionStorage` is particularly useful in scenarios like:
+
+- Storing temporary data such as form entries during a multi-page form process.
+
+- Storing temporary selections or preferences that don’t need to persist across sessions.
+
+- Maintaining state on a single-page application that doesn’t need to be remembered once the tab is closed.
+
+`sessionStorage` ensures that once the user leaves the page, the session data is cleared, which is great for scenarios where you don’t want to hold onto information beyond the current session.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
index ebd5dca539..125dde804d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
@@ -1,14 +1,70 @@
 ---
 id: 6733ff6f02dde548ebe4a6d5
 title: What Are Cookies, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-cookies-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Cookies, also known as web cookies or browser cookies, are small pieces of data that a server sends to a user's web browser. These cookies are stored on the user's device and sent back to the server with subsequent requests.
+
+Cookies are essential in helping web applications maintain state and remember user information, which is especially important since HTTP is a stateless protocol.
+
+Cookies can store a variety of information such as user preferences, session data, or tracking information.
+
+Cookies are always stored as name-value pairs. This means each cookie has a name (key) and an associated value.
+
+For example, a cookie might store a user's session ID like this: `sessionId=abc123`. The key is `sessionId`, and the value is `abc123`. Each time the browser communicates with the server, the browser sends these cookies in the form of name-value pairs.
+
+When a user visits a website, the server can send one or more cookies to the user's browser by including a Set-Cookie header in the HTTP response. A header is a key-value pair that provides additional information about the HTTP request or response. You will learn more about HTTP requests and responses in future lectures.
+
+Once the cookies are set, the browser stores them and automatically includes them in the Cookie header with every subsequent request to the same domain. This allows the server to access the stored cookies and use them for things like maintaining user sessions or tracking preferences.
+
+Here’s an example of how a cookie is set in an HTTP response:
+
+```http
+Set-Cookie: sessionId=abc123; Expires=Wed, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
+```
+
+The browser will store the cookie, and in future requests to the same server, it will include the cookie in the `Cookie` header:
+
+```http
+Cookie: sessionId=abc123
+```
+
+The server can then read the cookie and use the stored session ID to retrieve information about the user, such as whether they are logged in.
+
+Here is a breakdown of the different types of cookies.
+
+- Session Cookies only last for the duration of the user's session on the website. Once the user closes the browser or tab, the session cookie is deleted. These cookies are typically used for tasks like keeping a user logged in during their visit.
+
+- Persistent Cookies have an expiration date and remain stored on the user's device until that date is reached. Persistent cookies are often used for remembering user preferences or login details across sessions.
+
+- Secure Cookies are only sent over HTTPS, ensuring that they cannot be intercepted by an attacker in transit.
+
+- HttpOnly Cookies cannot be accessed or modified by JavaScript running in the browser, making them more secure against cross-site scripting (XSS) attacks. cross-site scripting (XSS) attacks happen when an attacker injects malicious scripts into a web page that is viewed by other users. These scripts can then execute in the context of the victim's browser, potentially stealing cookies, session data, or performing other malicious actions without the user's knowledge or consent. By marking cookies as HttpOnly, they are protected from being accessed via JavaScript, reducing the risk of such attacks.
+
+You can create cookies via server responses using the `Set-Cookie` header or through JavaScript using `document.cookie`.
+
+Here's an example of setting a cookie using JavaScript:
+
+```js
+document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
+```
+
+This command sets a cookie named `username` with the value `"JohnDoe"` that will expire at the end of 2021. You can update an existing cookie by simply setting it again with a new value.
+
+To delete a cookie, you set its expiration date in the past:
+
+```js
+document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+```
+
+This will remove the `username` cookie from the browser.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
index ca5ce5c517..dfb09c49e7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
@@ -1,14 +1,34 @@
 ---
 id: 6733ff8d06376149474a0c0d
 title: What Is the Cache API, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-cache-api-and-how-does-that-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The Cache API is used to store network requests and responses, making web applications work more efficiently and even function offline. It is part of the broader Service Worker API and is crucial for creating Progressive Web Apps (PWAs) that can work under unreliable or slow network conditions.
+
+Before we continue with the Cache API, we first need to understand how service workers, PWAs, and network requests work on a basic level.
+
+A Network request is a request made by a web browser or application to a server to retrieve data or resources over the internet. For example, when you visit a website, your browser sends a network request to the web server to get the files (such as HTML, images, or videos) needed to display the page.
+
+A service worker is a special type of JavaScript file that runs in the background of a web application, separate from the main browser thread. It acts as a middleman between the web page and the network, allowing developers to intercept network requests, cache resources, and handle things like push notifications or background sync.
+
+A PWA, or Progressive Web App, is a type of web application that uses modern web technologies to provide a native app-like experience on the web. PWAs are designed to work reliably on any device, regardless of network conditions, and can be accessed through a browser or installed on a user's device like a traditional app.
+
+Now that we have a better understanding of service workers, PWAs, and network requests, we can dive deeper into the Cache API.
+
+The Cache API is a storage mechanism that stores `Request` and `Response` objects. When a request is made to a server, the application can store the response and later retrieve it from the cache instead of making a new network request. This reduces load times, saves bandwidth, and improves the overall user experience.
+
+The browser provides a storage area known as Cache Storage, where developers can save key-value pairs of network requests and their corresponding responses.
+
+With the Cache-Control header, developers can specify how long a cached resource should remain stored, as well as whether it should be revalidated or served directly from the cache.
+
+By using the Cache API, developers can build offline-first web applications, allowing a PWA, for example, to serve cached assets when the user is disconnected from the network.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
index a6ec2d038a..88ab457a3e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
@@ -1,14 +1,55 @@
 ---
 id: 6733ff9d2fb9c449af68ad99
 title: What Are Some Negative Patterns Associated with Client-Side Storage?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-some-negative-patterns-associated-with-client-side-storage
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Client-side storage allows websites to store data on a user's device. However, like many technologies, it can be misused.
+
+Let’s explore some negative patterns associated with client-side storage, focusing on cookies and their misuse for tracking and fingerprinting.
+
+Let's start with cookies.
+
+In an earlier lecture video, you learned that cookies are data stored on a user's device when they visit a web app. A common misuse of cookies is excessive tracking.
+
+Websites use cookies to track a user's interactions with a web app, creating a history of their digital activities. This is done for targeted advertising but can raise significant privacy concerns.
+
+For example, a shopping website might use a tracking cookie like this:
+
+```js
+document.cookie = "userID=123; path=/; expires=Thu, 18 Dec 2024 6:00:00 UTC";
+```
+
+This code sets a cookie named `userID` with a value of `123`. The cookie will be sent with every request to the website, allowing it to track the user's actions. While this might seem harmless, imagine hundreds of websites sharing this information – it could create a very detailed picture of your online life and choices.
+
+Another concerning practice is browser fingerprinting.
+
+This technique uses client-side information to create a unique "fingerprint" of a user's browser. Websites have the ability to gather information about your browser version, installed plugins, screen resolution, and other data to uniquely identify you.
+
+Here's a simple example of how a website can create a fingerprint of you:
+
+```js
+let fingerprintExample = navigator.userAgent + screen.width + screen.height;
+console.log(fingerprintExample);
+```
+
+This code combines your browser's user agent with your screen dimensions. While this is a basic example, real fingerprinting methods are much more complex and can be highly accurate in identifying users.
+
+Local Storage can also be misused as some websites use it to store sensitive information insecurely. For instance:
+
+```js
+localStorage.setItem('userPassword', 'someonesPasswordHere');
+```
+
+This code stores a user's password in Local Storage. This is a serious security risk as the data in Local Storage is not encrypted and can be accessed easily.
+
+In conclusion, while client-side storage offers many benefits, it's crucial to use it responsibly. As you continue your web development journey, always consider the privacy and security of your users' data on the client side.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
index 0cb2fd4f26..c4a0c18da7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
@@ -1,14 +1,46 @@
 ---
 id: 6733ffacd0ad1e49ec2af051
 title: How Can You Use Cookies to Store Arbitrary Data, Normally Controlled by HTTP Headers?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-use-cookies-to-store-arbitrary-data-normally-controlled-by-http-headers
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+As you learned in previous lectures, cookies are simple data that websites can store on a user's device.
+
+However, you can actually store more complex data structures in cookies. One common method is to use JSON to store objects or arrays. Here's an example:
+
+```js
+const userData = {
+  name: "John Doe",
+  age: 30,
+  role: "admin"
+};
+
+document.cookie = "userInfo=" + JSON.stringify(userData) + "; path=/";
+```
+
+In this example, we're creating an object with user data, converting it to a JSON string, and then storing it in a cookie. When we want to retrieve this data, we can parse the JSON string into an object using `JSON.parse()`.
+
+Now, you might be wondering about the “HTTP headers” aspect of our topic. Typically, cookies are set by the server using HTTP headers.
+
+For example, a server might send a header like this:
+
+```http
+Set-Cookie: username=John Doe; expires=Thu, 31 Dec 2024 6:00:00 IST; path=/
+```
+
+This header tells the browser to set a cookie.
+
+We can also set cookies directly in the browser using JavaScript. This is useful for storing data that doesn't need to be sent to the server immediately.
+
+Please note that cookies have a size limit of around 4KB, and storing too much data in them may slow down your web app.
+
+Storing large amounts of data in cookies can increase network traffic as cookies are sent with every HTTP request.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
index 5c8014fb7e..b9402a6abf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
@@ -1,14 +1,92 @@
 ---
 id: 6733ffb59c62ee4a23522efe
 title: What Is IndexedDB, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-indexeddb-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+IndexedDB is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently.
+
+Unlike other storage mechanisms like localStorage, which is limited to storing strings, IndexedDB can store JavaScript objects, files, and pretty much any other type of data. This makes it easy for web applications that need to work with large and complex data structures.
+
+Now, let's look at how IndexedDB works.
+
+The first step is to open a database. Here's an example:
+
+```js
+let request = indexedDB.open("Sample DB", 1);
+
+request.onerror = function(event) {
+  console.log("Error opening database");
+};
+
+request.onsuccess = function(event) {
+  let db = event.target.result;
+  console.log("Database opened successfully");
+};
+```
+
+In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The 'db' object we get in the success callback is what we'll use to interact with the database.
+
+If you check the browser dev tools application interface, you will see your `Sample DB` in the `IndexedDb` section has been opened. Once you have your database open, you can start working with object stores.
+
+Object stores in IndexedDB are similar to tables in traditional databases. They hold the actual data you want to store. Here's how to create an object store:
+
+```js
+request.onupgradeneeded = function(event) {
+  let db = event.target.result;
+  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
+};
+```
+
+This code creates an object store named `"customers"` with `"id"` as its key path. The key path is like a primary key in a traditional database - it's used to uniquely identify each record.
+
+To add data to our object store, we'd do something like this. The `db` in this example represents the IndexedDB database instance.
+
+```js
+let transaction = db.transaction(["customers"], "readwrite");
+let objectStore = transaction.objectStore("customers");
+let request = objectStore.add({ id: 1, name: "John Doe", email: "john@example.com" });
+
+request.onerror = function(event) {
+  console.log("Error adding data");
+};
+
+request.onsuccess = function(event) {
+  console.log("Data added successfully");
+};
+```
+
+This code adds a new customer to our `"customers"` object store. We start a transaction (which is how we group database operations), get a reference to our object store, and then add our data.
+
+Retrieving data works in a similar way. We start a transaction, get our object store, and then use methods like `get` to retrieve data:
+
+```js
+let transaction = db.transaction(["customers"]);
+let objectStore = transaction.objectStore("customers");
+let request = objectStore.get(1);
+
+request.onerror = function(event) {
+  console.log("Error retrieving data");
+};
+
+request.onsuccess = function(event) {
+  console.log("Customer:", request.result);
+};
+```
+
+This code retrieves the customer with `id` `1` from our `"customers"` object store.
+
+One of the key features of IndexedDB is that it's asynchronous.
+
+This means that when you interact with IndexedDB, operations don't block the main thread of the web application. This ensures that your web application remains responsive even when dealing with large amounts of data.
+
+While IndexedDB provides powerful capabilities, it has a steeper learning curve compared to other simpler storage API options which can be challenging for beginners. However, for applications that need to handle large amounts of structured data on the client-side, IndexedDB offers unparalleled capabilities.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
index d2079aea91..5a307fc8bd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
@@ -1,14 +1,30 @@
 ---
 id: 6733ffc7353af34a61ed683a
 title: What Are Cache and Service Workers, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-cache-service-workers-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Caching is the process of storing copies of files in a temporary storage location so they can be accessed more quickly.
+
+When you visit a website, your browser can save certain files (such as images, CSS, and JavaScript) locally. This means that the next time you visit the same site, it can load these files from your device instead of fetching them again from a server, making the site load faster.
+
+A Service Worker is a script that runs in the background, separate from your web page. It can intercept network requests, access the cache, and enable the web app to work offline. It is a key component of Progressive Web Apps.
+
+So, how do Cache and Service Workers work together in Progressive Web Apps?
+
+PWAs are web apps that can offer an app-like experience. They can work offline, send push notifications, and even be installed on the home screen of a mobile device or computer.
+
+When a user first visits a PWA, the Service Worker can cache important files.
+
+Users can continue to use the app offline, and when they come back online, any upcoming changes can be synced with the server.
+
+The combination of caching and Service Workers enables web apps to provide a fast and reliable experience even in poor network conditions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
index efbc82e4fd..1eb9879c22 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
@@ -2,7 +2,7 @@
 id: 672d45583fd75a504136fbbb
 title: How to Install Visual Studio Code onto Your Computer
 challengeType: 11
-videoId: hWa_PgsNSw0
+videoId: JuxdN8OWllk
 dashedName: how-to-install-visual-studio-code-onto-your-computer
 ---
 
@@ -86,15 +86,15 @@ The lecture describes several ways to install VSCode on Mac, but one common meth
 
 ## --text--
 
-On Linux, what command would you use to install VSCode using the Arch Linux package manager?
+What command would you use to install VSCode using Homebrew?
 
 ## --answers--
 
-`sudo apt-get install code`
+`sudo brew -i code`
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ---
 
@@ -102,19 +102,19 @@ The lecture provides a specific command for Arch Linux users.
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ---
 
-`sudo pacman -S code`
+`brew install --cask visual-studio-code`
 
 ---
 
-`sudo dnf install code`
+`homebrew install vscode`
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
index 556fcb7ff4..600de23b15 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
@@ -2,7 +2,7 @@
 id: 672d266034b5242126271995
 title: What Is ASCII, and How Does It Work with charCodeAt() and fromCharCode()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XMi4lKr0FRw
 dashedName: what-is-ascii-and-how-does-it-work-with-charcodeat-and-fromcharcode
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
index ec5398c2d2..20964ee3e9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
@@ -2,7 +2,7 @@
 id: 67326c0d7bef01c539120766
 title: How Can You Test if a String Contains a Substring?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XBva3_87hWg
 dashedName: how-can-you-test-if-a-string-contains-a-substring
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
index 3bc56fab66..a63b7b0b65 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
@@ -2,7 +2,7 @@
 id: 67326c15b3b2f0c5827927cc
 title: How Can You Extract a Substring from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xLKJvMJKYAU
 dashedName: how-can-you-extract-a-substring-from-a-string
 ---
 
@@ -18,7 +18,7 @@ What will the following code output?
 
 ```js
 let text = "JavaScript is awesome!";
-let result = text.slice(0, 10);
+let result = text.slice(0, 9);
 
 console.log(result);
 ```
@@ -97,7 +97,7 @@ What will the following code return?
 
 ```js
 let sentence = "Learning JavaScript is fun!";
-let extracted = sentence.slice(9, -4);
+let extracted = sentence.slice(9, -5);
 
 console.log(extracted);
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
index 573a12eb0e..27ac63c416 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
@@ -2,7 +2,7 @@
 id: 67326c1fdaf9c0c5ad1a2589
 title: How Can You Change the Casing for a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KOaGZ2IXzV0
 dashedName: how-can-you-change-the-casing-for-a-string
 ---
 
@@ -53,7 +53,7 @@ Think about how `toUpperCase()` affects the entire string.
 What will the following code output?
 
 ```js
-javascriptCopy codelet phrase = "JavaScript is Fun!";
+let phrase = "JavaScript is Fun!";
 console.log(phrase.toLowerCase());
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
index d4e7bd05cf..ca543e6e1f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
@@ -2,7 +2,7 @@
 id: 67326c29dcd98fc5ecc49779
 title: How Can You Replace Parts of a String with Another?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: '-Ft7Whs9xRY'
 dashedName: how-can-you-replace-parts-of-a-string-with-another
 ---
 
@@ -50,35 +50,42 @@ Think about what happens when there are multiple instances of the word you are t
 
 ## --text--
 
-How can you replace all instances of a word in a string?
+What will the following code output?
+
+```js
+let phrase = "freeCodeCamp is awesome!";
+let updatedPhrase = phrase.replace("freecodecamp", "fCC");
+
+console.log(updatedPhrase);
+```
 
 ## --answers--
 
-Use a `for` loop.
+`"fcc is awesome!"`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ---
 
-Use `replace()` with a case-sensitive string.
+`"fCC is awesome!"`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ---
 
-Use `replace()` with a global regular expression.
+`"freeCodeCamp is awesome!"`
 
 ---
 
-Use `replaceAll()` instead of `replace()`.
+`undefined`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
index 77e5f3679d..72f62596d9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
@@ -2,7 +2,7 @@
 id: 67326c3392068ec6184a0c95
 title: How Can You Repeat a String x Number of Times?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G78i7JW70hE
 dashedName: how-can-you-repeat-a-string-x-number-of-times
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
index 3e2c98fa43..dfbebc9e65 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
@@ -2,7 +2,7 @@
 id: 67326c3c3ab931c644cea05b
 title: How Can You Trim Whitespace from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: qVjDfh-K2SY
 dashedName: how-can-you-trim-whitespace-from-a-string
 ---
 
@@ -95,7 +95,9 @@ console.log(str.trimEnd());
 
 ## --answers--
 
-`"Code"`
+```js
+"Code"
+```
 
 ### --feedback--
 
@@ -103,11 +105,15 @@ Consider which part of the string is affected by `trimEnd()`.
 
 ---
 
-`" Code"`
+```js
+"   Code"
+```
 
 ---
 
-`"Code "`
+```js
+"Code   "
+```
 
 ### --feedback--
 
@@ -115,7 +121,9 @@ Consider which part of the string is affected by `trimEnd()`.
 
 ---
 
-`" Code "`
+```js
+" Code "
+```
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
index 3d3eaaed93..58f8257052 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
@@ -2,7 +2,7 @@
 id: 672aa8ac4631d1623ec5cd86
 title: What Is CSS Grid, and How Does It Differ from Flexbox?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: uh0EzmmlpwQ
 dashedName: what-is-css-grid
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
index bba9197b3c..6a3f64997f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
@@ -2,7 +2,7 @@
 id: 673226732b19aa1cacd0a75c
 title: How Can You Create Flexible Grids with the fr Unit?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: frGW2L836GU
 dashedName: how-can-you-create-flexible-grids-with-the-fr-unit
 ---
 
@@ -91,7 +91,7 @@ What happens when you use `grid-template-columns: 1fr 1fr 1fr 1fr;` in a CSS gri
 
 ## --answers--
 
-The container will have four columns, each taking up 10% of the container’s width.
+The container will have four columns, each taking up 10% of the container's width.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
index cb9240fab1..fa6512ecaa 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
@@ -2,7 +2,7 @@
 id: 6732267ecab2151ced471cd4
 title: How Can You Create Gaps Between Tracks in a Grid?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: f8jbUFfvZ_Q
 dashedName: how-can-you-create-gaps-between-tracks-in-a-grid
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
index 2b14792c8f..0a5ab5c32a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
@@ -2,7 +2,7 @@
 id: 6732268d05c3661d32a0fee8
 title: How Can You Repeat Track Listings in a Grid Layout?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: d2wi5br6o0E
 dashedName: how-can-you-repeat-track-listings-in-a-grid-layout
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
index 55dead81ed..bcaf3ee8ef 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
@@ -2,7 +2,7 @@
 id: 6732269a7aa2ca1d6b6574fe
 title: What Is the Difference Between an Implicit and Explicit Grid?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: QMqRqHE_t8k
 dashedName: what-is-the-difference-between-an-implicit-and-explicit-grid
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
index 73675c2b62..4f96da8225 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
@@ -2,7 +2,7 @@
 id: 673226a62eb2121da41a3d68
 title: What Is the minmax() Function and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: rpWiq2k2B_8
 dashedName: what-is-the-minmax-function-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
index afe98aad00..8f51dffeaa 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
@@ -2,7 +2,7 @@
 id: 673226afcd33991dd751937a
 title: How Do the grid-column and grid-row Properties Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ZKlcAue2j_U
 dashedName: how-do-the-grid-column-and-grid-row-properties-work
 ---
 
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 06d6182cc8..02c9ce264a 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
@@ -2,7 +2,7 @@
 id: 673226b97d4a731e0577ae93
 title: How Can You Position Items on the Grid Using the grid-template-areas Property?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: PV83v-6vxKw
 dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What do the `grid-column` and `grid-row` properties specify in a grid layout?
+How do you design a grid layout with the `grid-template-areas` property?
 
 ## --answers--
 
-The size of the grid container.
+With comma separated values like `1 / 4` to represent the different rows and columns of the layout.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ---
 
-The alignment of the entire grid.
+With comma separated values like `header` and `footer`.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ---
 
-The horizontal and vertical placement of grid items.
+With strings of space-separated values to represent the different rows and columns of the layout.
 
 ---
 
-The size of grid tracks.
+With space-separated values like `2fr 1fr 1fr`.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
index b7cf9657aa..5888765c6d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
@@ -2,7 +2,7 @@
 id: 672aa7e03c2e365e906e5733
 title: What Is Overflow in CSS, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: iqnkHaVCLww
 dashedName: what-is-overflow-in-css
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
index d97065c696..c892ba2327 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
@@ -2,7 +2,7 @@
 id: 672bcc8ccc976fd791610f43
 title: What Is the CSS Transform Property, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pC59ipGpaDk
 dashedName: what-is-the-css-transform-property
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
index 8ac6e6e23d..7b4f0292ae 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
@@ -2,7 +2,7 @@
 id: 672bcc9c4a6dd6d7dd3e6357
 title: What Is the CSS Box Model, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: oBIIFdfLGos
 dashedName: what-is-the-css-box-model
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
index 12c059731c..2892dd8fd7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
@@ -2,7 +2,7 @@
 id: 672bccae6e556cd81cef6af2
 title: What Is Margin Collapsing, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: MMWBC8duT_0
 dashedName: what-is-margin-collapsing
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
index 80888cea82..d1ba6e030a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
@@ -2,7 +2,7 @@
 id: 672bccc8ea33bad87abb3c56
 title: What Is the Difference Between content-box and border-box?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: eKqNs2XXG14
 dashedName: what-is-the-difference-between-content-box-and-border-box
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
index 0df4558a03..04b27c6b43 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
@@ -2,7 +2,7 @@
 id: 672bccdb8f1823d8c60f914c
 title: What Is a CSS Reset, and What Are Some Common Examples?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2VPFQpukQV8
 dashedName: what-is-a-css-reset
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
index c5ee4a0846..0f5889f3cc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
@@ -2,7 +2,7 @@
 id: 672bccebe1fc82d911c3f078
 title: What Is the CSS Filter Property, and What Are Common Examples?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9ta8m4T9KYc
 dashedName: what-is-the-css-filter-property
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
index 50cd496e23..8a53a50148 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
@@ -2,7 +2,7 @@
 id: 672aa8985acb7361e656f94c
 title: What Are CSS Custom Properties, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: rG9-26gM3eU
 dashedName: what-are-css-custom-properties
 ---
 
@@ -86,7 +86,7 @@ Think about the function used to reference custom properties in CSS.
 
 ## --text--
 
-What is a key advantage of using CSS custom properties over preprocessor variables?
+What is something you should be aware of when using CSS custom properties?
 
 ## --answers--
 
@@ -94,27 +94,27 @@ They can be used with older versions of CSS.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ---
 
-They can be manipulated using JavaScript at runtime.
+They might not be supported by older browsers.
 
 ---
 
-They are faster to process than preprocessor variables.
+They can lead to faster page speeds.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ---
 
-They can hold more complex values than preprocessor variables.
+They increase repetition in your stylesheets.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
index 3781b2687d..a97c67aeec 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
@@ -2,7 +2,7 @@
 id: 672cf3ca326da9f63683e236
 title: What Is the @property Rule, and How Does It Work with Fallbacks?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lFwXJzcJ9fg
 dashedName: what-is-the-at-property-rule
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
index 3e86207006..d9706a50d9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
@@ -1,14 +1,136 @@
 ---
 id: 6734e3ceee2da4b0301719b7
 title: How Do You Pass Props from Parent to Child Component in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-you-pass-props-from-parent-to-child-component-in-react
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In the previous lectures, we learned how to build small components in React like this:
+
+```js
+function Greeting() {
+  const developerName = "Jessica";
+  return <h1>Hi {developerName}!</h1>;
+}
+```
+
+We can choose to nest this component inside another parent component or the root component like this:
+
+```js
+function App() {
+  return <Greeting />;
+}
+
+function Greeting() {
+  const developerName = "Jessica";
+  return <h1>Hi {developerName}!</h1>;
+}
+```
+
+While this code will run fine and display the result of Hi Jessica! on the screen, it is not that flexible of a component.
+
+What if we wanted to display a different name like Naomi, Tom, or Oliver?
+
+This is where React props comes in.
+
+Props, which is short for properties, is the way for Parent components to pass data down to the child component.
+
+Props can be of any type: strings, numbers, booleans, objects, or arrays.
+
+Let’s update our example from earlier to now accept a `name` prop:
+
+```js
+function App() {
+  return <Greeting name="Jessica" />;
+}
+
+export default App;
+
+function Greeting(props) {
+  console.log(props);
+  return <h1>Hi {props.name}!</h1>;
+}
+```
+
+For the child component called `Greeting` we are now using `props.name` instead of hardcoding the name `"Jessica"`. We are also logging props to the console which is showing as an object.
+
+Then inside of the parent App component, we are passing the value to the name prop so it can be passed down to the child.
+
+The result will be the same on the screen like earlier, but now we have created a more flexible component.
+
+Now we have the ability to reuse the child component several times and pass in different names each time.
+
+```js
+function App() {
+  return (
+    <>
+      <Greeting name="Naomi" />
+      <Greeting name="Tom" />
+      <Greeting name="Jessica" />
+      <Greeting name="Oliver" />
+    </>
+  );
+}
+```
+
+You can also choose to use object destructuring in the props to make it more readable.
+
+Here's how you could rewrite the `Greeting` component:
+
+```js
+function Greeting({ name }) {
+  return <h1>Hi {name}!</h1>;
+}
+```
+
+This code achieves the same result but makes it clearer which props the component is expecting to receive.
+
+Sometimes, you can have a lot of properties that you have to pass as props. Instead of passing them one by one, you can use the spread operator (`...`), after converting them to an object.
+
+Here is an example of a new child component called `DeveloperCard`:
+
+```js
+function DeveloperCard({ name, age, country }) {
+  return (
+    <div className="developer-card">
+      <h1>Developer: {name}</h1>
+      <p>Age: {age}</p>
+      <p>Country: {country}</p>
+    </div>
+  );
+}
+```
+
+This `DeveloperCard` component accepts three props: `name`, `age`, and `country`.
+
+In the parent `App` component, we can use the spread syntax to pass all the properties from an object as individual props to the child component.
+
+```js
+function App() {
+  const developerObj = {
+    name: "Alice",
+    age: 30,
+    country: "USA",
+  };
+
+  return (
+    <div className="App">
+      <DeveloperCard {...developerObj} />
+    </div>
+  );
+}
+```
+
+This is particularly useful when working with arrays of objects and passing multiple sets of properties to child components. For example, you might have a list of developers where each object in the array has the same structure but represents a different person.
+
+You will learn more about how to render lists in React in future lectures.
+
+Using props in React makes your components more flexible and reusable, allowing you to build more complex UIs. However, it's important to note that props are immutable, meaning they cannot be changed once passed to a component. If you need to handle user input and modify data, you should use state instead. You'll learn more about managing state in future lectures.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
index 59701e4b40..25b6b6c3bf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
@@ -1,14 +1,71 @@
 ---
 id: 673500abfe36cd015b67b1b7
 title: How Does Conditional Rendering Work in React Components?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-does-conditional-rendering-work-in-react-components
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application.
+
+The most common approaches of using Conditional rendering includes using if statements, the ternary operator, and `logical AND (&&)` operator.
+
+The simplest form of conditional rendering uses an if statement.
+
+Here's an example:
+
+```js
+function Greeting({ isLoggedIn }) {
+  if (isLoggedIn) {
+    return <h1>Welcome back!</h1>;
+  }
+  return <h1>Please sign in</h1>;
+}
+```
+
+In this example, the `Greeting` component checks the `isLoggedIn` prop. If it's true, it returns a welcome message, otherwise, it prompts the user to sign in.
+
+Here is an example using the Greeting component inside of the parent App component.
+
+```js
+function App() {
+  return (
+    <div className="App">
+      <Greeting isLoggedIn={false} />
+    </div>
+  );
+}
+```
+
+For simpler conditions, the ternary operator (?) is often used directly within JSX. It allows for inline conditional rendering, which can make your code more concise:
+
+```js
+function Greeting({ isLoggedIn }) {
+  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
+}
+```
+
+This code achieves the same result as the previous example but in a more compact form. The ternary operator checks isLoggedIn and renders the appropriate message.
+
+Another common pattern for conditional rendering is using the `logical AND (&&)` operator. This is particularly useful when you want to render something or nothing based on a condition:
+
+```js
+function Notification({ message }) {
+  return (
+    <div>
+      {message && <p>{message}</p>}
+    </div>
+  );
+}
+```
+
+In this example, the paragraph element with the message is only rendered if the `message` prop is truthy. If `message` is falsy (meaning it is an empty string, `null`, or `undefined`), nothing is rendered to the screen.
+
+By mastering these techniques of conditional rendering, you can build more interactive and user-friendly applications that adapt to changing data and user interactions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
index 957731e786..bf14742e40 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
@@ -1,14 +1,80 @@
 ---
 id: 673500b41af8500191febedc
 title: How Do You Render Lists in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-you-render-lists-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map()` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI.
+
+Here is an example of a component called `FruitList` that displays a list of fruits:
+
+```js
+function FruitList() {
+  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
+  return (
+    <ul>
+      {fruits.map(fruit => <li>{fruit}</li>)}
+    </ul>
+  );
+}
+```
+
+In this example, the `map()` function iterates over each item in the fruits array. For each fruit, it creates a new `<li>` element containing the fruit's name. The newly created array of `<li>` elements is then displayed inside the `<ul>` parent tags.
+
+However, when rendering lists in React, it is important not to forget the key prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list.
+
+Let's modify our example to include keys:
+
+```js
+function FruitList() {
+  const fruits = ["Apple", "Banana", "Cherry", "Date"];
+  return (
+    <ul>
+      {fruits.map((fruit, index) => (
+        <li key={`${fruit}-${index}`}>{fruit}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+In this refactored example, we are creating a unique key for each list item by concatenating the fruit name with its index. This ensures that each list item has a distinct key, which helps React efficiently manage and update the list when items are added, removed, or reordered.
+
+React's also allows you to render more complex structures. For instance, you might have an array of objects representing users, each with multiple properties that you want to display:
+
+```js
+function UserList() {
+  const users = [
+    { id: "user-001-employee", name: "Alice", email: "alice@example.com" },
+    { id: "user-002-employee", name: "Bob", email: "bob@example.com" },
+    { id: "user-003-employee", name: "John", email: "john@example.com" },
+  ];
+  return (
+    <div>
+      {users.map((user) => (
+        <div key={user.id}>
+          <h3>{user.name}</h3>
+          <p>{user.email}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's id as the key, which is a good practice.
+
+In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map()` function.
+
+Always remember to provide a unique key for each list item to help React manage the updating and rendering roles.
+
+With these techniques, you can create flexible, efficient, and dynamic lists in your React applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
index 42fc4bdbd4..ac21642908 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
@@ -1,14 +1,81 @@
 ---
 id: 673500bfe1f41601c1ddb1a2
 title: How Do Inline Styles Work in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-inline-styles-work-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In React, inline styles are used to apply CSS styles directly to React elements within your JSX code instead of defining them in separate CSS files.
+
+React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camelCased versions of CSS property names, and the values are the strings of CSS values.
+
+Here is an example of how you can use inline styles for a `Button` component:
+
+```js
+function Button({ buttonText }) {
+  const defaultStyles = {
+    backgroundColor: "#007BFF",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    padding: "10px 20px",
+    fontSize: "16px",
+    fontWeight: "bold",
+    cursor: "pointer",
+    transition: "background-color 0.3s ease",
+  };
+
+  return <button style={defaultStyles}>{buttonText}</button>;
+}
+```
+
+In this example, we define a style object called defaultStyles. We then apply these styles to a button element using the style attribute. React takes care of applying these styles to the element when it renders.
+
+You can also choose to pass in an object directly to the style attribute. Here is what a revised example would look like:
+
+```js
+function Button({ buttonText }) {
+  return (
+    <button
+      style={{
+        backgroundColor: "#007BFF",
+        color: "white",
+      }}
+    >
+      {buttonText}
+    </button>
+  );
+}
+```
+
+Sometimes you might want to pass in an object directly if there are only a few properties like shown here. Otherwise, passing in a name to an object would be better like in the first example.
+
+It's important to note that while CSS property names are typically written in kebab-case (like font-size), in React's inline styles, we use camelCase (like fontSize). This is because the style object is a JavaScript object, and kebab-case names are not valid as object keys in JavaScript without using quotes.
+
+A great advantage of inline styles in React is that they support dynamic styling based on a component state or props. For example:
+
+```js
+function DynamicButton({ isActive }) {
+  const buttonStyles = {
+    backgroundColor: isActive ? "green" : "red",
+    color: "white",
+    padding: "10px 15px",
+    border: "none",
+    cursor: "pointer",
+  };
+
+  return <button style={buttonStyles}>Login</button>;
+}
+```
+
+In this example, the button's background color changes based on the isActive prop. This kind of dynamic styling can be powerful for creating interactive and responsive user interfaces.
+
+In summary, inline styles in React provide a powerful way to apply and manipulate styles directly within your components. They use JavaScript objects instead of CSS strings, require camelCased property names, and can easily incorporate dynamic values. They're an essential tool in a React developer's toolkit, especially for creating highly customized and interactive user interfaces.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
index 2dece399e2..f6409110e6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
@@ -2,7 +2,7 @@
 id: 672d264645e289208e562f10
 title: What Is Dynamic Typing in JavaScript, and How Does It Differ from Statically Typed Languages?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IOKsF08zioQ
 dashedName: what-is-dynamic-typing-in-javascript-and-how-does-it-differ-from-statically-typed-languages
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
index ad8edaae65..b3dd9cdb9c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
@@ -2,7 +2,7 @@
 id: 6732518a8627876f4fcd18a4
 title: How Does the typeof Operator Work, and What Is the typeof null Bug in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DDHu5VDlkPM
 dashedName: how-does-the-typeof-operator-work-and-what-is-the-typeof-null-bug-in-javascript
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What does the `typeof` operator return when used on a `string` in JavaScript?
+What does the `typeof` operator return when used on a string in JavaScript?
 
 ## --answers--
 
@@ -86,7 +86,7 @@ Recall the unexpected behavior when checking the type of `null`.
 
 ## --text--
 
-How does `typeof` behave when checking the type of a `number`?
+How does `typeof` behave when checking the type of a number?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
index 92714c7a4e..57287c577f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
@@ -2,7 +2,7 @@
 id: 6733aafb9c0802f66cc1e056
 title: How Does the JavaScript Data Object Work, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aFGXBwkmNqg
 dashedName: how-does-the-javascript-data-object-work-and-what-are-some-common-methods
 ---
 
@@ -54,11 +54,11 @@ If you use the `getMonth` method and it returns `4`, which month is being repres
 
 ## --answers--
 
-`April`
+`May`
 
 ---
 
-`May`
+`April`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
index d00bcaffc3..c803fed955 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
@@ -2,7 +2,7 @@
 id: 6733d608654c17868e01c0a2
 title: What Are the Different Ways to Format Dates?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 67I6H8Vce2E
 dashedName: what-are-the-different-ways-to-format-dates
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
index 8942cd8356..683f59ec45 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
@@ -38,7 +38,7 @@ Think about the file name that looks complicated.
 
 ---
 
-products.html
+`products.html`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --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 28f4518c0d..bbd535265b 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
@@ -2,7 +2,7 @@
 id: 672d269da46786225e3fe3fd
 title: What Is the Purpose of Functions, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sU2mIGNjBtc
 dashedName: what-is-the-purpose-of-functions-and-how-do-they-work
 ---
 
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 2ac2ecd8ce..8b8da846a9 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
@@ -2,13 +2,13 @@
 id: 673284d5e52ef81a2169b097
 title: What Are Arrow Functions, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EVrZqQ7Y3So
 dashedName: what-are-arrow-functions-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
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 87e98db0a0..8373bf7ebd 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
@@ -2,13 +2,13 @@
 id: 673284e7244c0c1a649121b9
 title: What Is Scope in Programming, and How Does Global, Local, and Block Scope Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: saSaw-VOFuo
 dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-scope-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
index 6c407d3ce4..1aae18e36b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
@@ -2,7 +2,7 @@
 id: 67329ffd75010f5ddeb4ea13
 title: What Is a Callback Function, and How Does It Work with the forEach Method?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ye6d69RVeqY
 dashedName: what-is-a-callback-function-and-how-does-it-work-with-the-foreach-method
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
index e922b881c1..fe5a9fbf34 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
@@ -2,7 +2,7 @@
 id: 67336296a3c1591da81856c2
 title: What Are Higher-Order Functions?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: dj9Pt4tODfA
 dashedName: what-are-higher-order-functions
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
index 816314c512..a19d36fb50 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
@@ -2,13 +2,13 @@
 id: 673362a34edda41dedf87623
 title: What Is the Map Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: CdSr7rv8pwo
 dashedName: what-is-the-map-method-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
index f859943167..c4b05e8119 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
@@ -2,7 +2,7 @@
 id: 673362b3f763ae1e38e17df7
 title: What Is the Filter Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EaVyNFI53Mk
 dashedName: what-is-the-filter-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
index be1d5e441f..bea6d82f98 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
@@ -2,7 +2,7 @@
 id: 673362be2f70c21e65bc5459
 title: What Is the Reduce Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: fxgwdO-Eii8
 dashedName: what-is-the-reduce-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
index 538b78c844..f721c1d624 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
@@ -2,7 +2,7 @@
 id: 673362cbb475e21eab726506
 title: What Is Method Chaining, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bsCkwxZ4sho
 dashedName: what-is-method-chaining-and-how-does-it-work
 ---
 
@@ -116,7 +116,7 @@ console.log(result);
 
 ## --answers--
 
-2
+`2`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
index 540d92a0f8..99550b28a5 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
@@ -2,7 +2,7 @@
 id: 673362d7f94d551edb532d24
 title: How Does the Sort Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: eA5HGl-qsdA
 dashedName: how-does-the-sort-method-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
index 6ec357a968..12db447450 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
@@ -2,7 +2,7 @@
 id: 673362e43d57b51f1ad2d466
 title: How Do the every() and some() Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ELHJGK4IyqU
 dashedName: how-do-the-every-and-some-methods-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
index ab1b8a6f1a..02f33dec43 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
@@ -86,36 +86,36 @@ A tool that checks the validity of HTML.
 
 ## --text--
 
-Which of these is not an example of an HTML validator?
+Which of these is an example of an HTML validator?
 
 ## --answers--
 
-W3.org HTML validator.
+W3.org HTML validator
 
-### --feedback--
+---
 
-Look out for the option that is not an HTML validator.
+CSS Lint
 
----
+### --feedback--
 
-JS World HTML Validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ---
 
-Prettier Code Formatter.
+JavaScript Debugger
 
 ### --feedback--
 
-Look out for the option that is not an HTML validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ---
 
-JSONFormatter.org HTML Validator.
+Photoshop
 
 ### --feedback--
 
-Look out for the option that is not an HTML validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ## --video-solution--
 
-2
+1
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
index 22712e9c17..950d3b1275 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
@@ -1,6 +1,6 @@
 ---
 id: 6716744f7245947a3dd60009
-videoId: D4PO-NUqmzg
+videoId: zf4bbN-hYOg
 title: What Are the Different Target Attribute Types, and How Do They Work?
 challengeType: 11
 dashedName: what-are-the-different-target-attribute-types
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
index 40e0a83659..7bc6e9ff7d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
@@ -1,6 +1,6 @@
 ---
 id: 671682dd88e461a8e2620f38
-videoId: hpEmssjWh-0
+videoId: bxr4p5Ik4js
 title: What Is the Difference Between Absolute and Relative Paths?
 challengeType: 11
 dashedName: what-is-the-difference-between-absolute-and-relative-paths
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
index f708e3445a..9327a2725c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
@@ -1,6 +1,6 @@
 ---
 id: 6716830dbaf95da9564f2e3b
-videoId: nVAaxZ34khk
+videoId: GTgzy4wPXcM
 title: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax?
 challengeType: 11
 dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-in-path-syntax
@@ -26,7 +26,7 @@ Which option is an absolute path?
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -34,7 +34,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -42,7 +42,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
index e02d8909a7..c2d2741e7a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
@@ -1,6 +1,6 @@
 ---
 id: 67168323932391a9ee0d3a9e
-videoId: O86-AxNc0nU
+videoId: ztu_9h2ZJrA
 title: What Are the Different Link States, and Why Are They Important?
 challengeType: 11
 dashedName: what-are-the-different-link-states
@@ -94,7 +94,7 @@ In what order should you style your links?
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -102,7 +102,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -110,7 +110,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
index 676a886137..816424d2dd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
@@ -2,7 +2,7 @@
 id: 67329f7f3d1bd75c17896c66
 title: How Do Loops and Iteration Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2h4RsvyUDH4
 dashedName: how-do-loops-and-iteration-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
index 26e85ea235..4f6e763e6d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
@@ -2,7 +2,7 @@
 id: 6732c04638420641dcca2e6e
 title: How Does the For...of Loop Work, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3EvkUpl4IQs
 dashedName: how-does-the-for-of-loop-work-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
index cbd715bf2a..4462c37abc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
@@ -2,7 +2,7 @@
 id: 6732c05595ca7d422b9e55ff
 title: What Is the For...in Loop, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: K0dZ8f9AZt4
 dashedName: what-is-the-for-in-loop-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
index 11eeb943ca..651015d2e4 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
@@ -2,7 +2,7 @@
 id: 6732c06654ea3442724284fe
 title: What Is a While Loop, and How Does It Differ from the Do...while Loop?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 93KL4Ou1eXU
 dashedName: what-is-a-while-loop-and-how-does-it-differ-from-the-do-while-loop
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
index 80429b20e1..9e1bd6c97d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
@@ -2,7 +2,7 @@
 id: 6732c07238355642a9781dfb
 title: What Are the Break and Continue Statements Used for in Loops?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: U3gATVuQTxQ
 dashedName: what-are-the-break-and-continue-statements-used-for-in-loops
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
index ede42b9287..9327c83582 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
@@ -2,7 +2,7 @@
 id: 6733ab269b378bf724c9ac71
 title: What Are Sets in JavaScript, and How Does It Differ from WeakSets?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4XFTr08_hog
 dashedName: what-are-sets-in-javascript-and-how-does-it-differ-from-weaksets
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
index f09c5a8158..977210422e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
@@ -2,7 +2,7 @@
 id: 6733dd694f91d61a5272b4ac
 title: What Is the Map Object, and How Does It Differ from WeakMaps?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2hHKZBPJQRY
 dashedName: what-is-the-map-object-and-how-does-it-differ-from-weakmaps
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
index ee6bf2b9f0..86d44f1b1d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
@@ -50,11 +50,11 @@ Using a mismatched size can create loading or display issues.
 
 ## --text--
 
-Which file type should you prefer?
+Which of the following is NOT a valid image file type?
 
 ## --answers--
 
-WEBP
+TS
 
 ---
 
@@ -62,7 +62,7 @@ PNG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
@@ -70,15 +70,15 @@ JPG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
-GIF
+WEBP
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
index 0c1cf5df63..1e02cee3fe 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
@@ -26,7 +26,7 @@ Permissive license
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -34,7 +34,7 @@ Public Domain
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Creative Commons
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ## --video-solution--
 
@@ -90,32 +90,32 @@ How can you find images that you are allowed to use?
 
 ## --answers--
 
-Search engine filters.
+Search for images on Google and use them freely.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-Dedicated websites like Pixabay.
-
-### --feedback--
-
-There are multiple options.
+Use websites like Pixabay or Unsplash.
 
 ---
 
-Creating your own image.
+Use any image from social media as long as you give credit.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-All of the above.
+You can use any image as long as it's not watermarked.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
 
 ## --video-solution--
 
-4
+2
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
index 5afb78dfe8..116fb99d96 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
@@ -22,7 +22,7 @@ An image which stores paths, lines, points, and curves.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -34,7 +34,7 @@ All images are raster images.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -42,7 +42,7 @@ An image which is easily scalable.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ## --video-solution--
 
@@ -62,7 +62,7 @@ An image which stores color data for each pixel.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -70,7 +70,7 @@ All images are vector images.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -78,7 +78,7 @@ An image which is not easily scalable.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ## --video-solution--
 
@@ -94,7 +94,7 @@ As pixels.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -102,7 +102,7 @@ As binary.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -110,7 +110,7 @@ As hexadecimal.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
index 04535ddc16..678424a3aa 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
@@ -22,7 +22,7 @@ What attribute allows the audio to start in a muted state?
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -30,7 +30,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -38,7 +38,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
index 72278f888a..28deeb7f56 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
@@ -2,7 +2,7 @@
 id: 672d26809d388621ad1ecd43
 title: How Does isNaN Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lxK56X8Rr1M
 dashedName: how-does-isnan-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
index cb6dd13339..ccae567b85 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
@@ -2,7 +2,7 @@
 id: 6732808f3221720adc833e81
 title: How Do the parseFloat() and parseInt() Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 5Q_BlR2NKYk
 dashedName: how-do-the-parsefloat-and-parseint-methods-work
 ---
 
@@ -74,7 +74,7 @@ Consider how `Number.parseInt()` handles leading whitespace and non-digit charac
 
 ---
 
-42
+`42`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
index 2daec965f3..b371fd65d2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
@@ -2,7 +2,7 @@
 id: 673280a1c29d0a0b17316e56
 title: What Is the toFixed() Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4GnMICoBC1Y
 dashedName: what-is-the-tofixed-method-and-how-does-it-work
 ---
 
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 099c339146..ca24f48370 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
@@ -2,7 +2,7 @@
 id: 672d266e014ef8216df987d2
 title: What Is the Number Type in JavaScript, and What Are the Different Types of Numbers Available?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ccHZ7e8z4SM
 dashedName: what-is-the-number-type-in-javascript-and-what-are-the-different-types-of-numbers-available
 ---
 
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 ea0aa4ac2f..a9f1a0d033 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
@@ -2,7 +2,7 @@
 id: 673271884bf678d8b9c64f56
 title: What Are the Different Arithmetic Operators in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: guUVaI-X7Gk
 dashedName: what-are-the-different-arithmetic-operators-in-javascript
 ---
 
@@ -14,107 +14,117 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-How can you check if a number is even using the `modulus` operator in JavaScript?
+Which of the following operators should you use to subtract one number from another?
 
 ## --answers--
 
-Use the `modulus` operator and check if the remainder is equal to `0` using strict equality (`===`).
+`+`
 
----
+### --feedback--
 
-Use the `modulus` operator and check if the remainder is greater than `1`.
+Think about the symbol typically used for subtraction.
 
-### --feedback--
+---
 
-Consider what remainder an even number gives when divided by `2`.
+`-`
 
 ---
 
-Use the `modulus` operator and ignore the remainder.
+`*`
 
 ### --feedback--
 
-Consider what remainder an even number gives when divided by `2`.
+Think about the symbol typically used for subtraction.
 
 ---
 
-Use the `modulus` operator and check if the remainder is equal to 1.
+`/`
 
 ### --feedback--
 
-Consider what remainder an even number gives when divided by `2`.
+Think about the symbol typically used for subtraction.
 
 ## --video-solution--
 
-1
+2
 
 ## --text--
 
-Which of these statements best describes operator precedence in JavaScript?
+What’s the output of the following code?
+
+```js
+const result = 4 / 0;
+console.log(result);
+```
 
 ## --answers--
 
-Addition and subtraction have the highest precedence.
+`Infinity`
 
-### --feedback--
+---
 
-Consider which operations are executed first in a mathematical expression.
+`4`
 
----
+### --feedback--
 
-Exponentiation has the highest precedence, followed by multiplication, division, and remainder.
+Recall the special value JavaScript returns when you divide by zero.
 
 ---
 
-Multiplication and division have lower precedence than addition and subtraction.
+`1`
 
 ### --feedback--
 
-Consider which operations are executed first in a mathematical expression.
+Recall the special value JavaScript returns when you divide by zero.
 
 ---
 
-All operators have the same precedence.
+`16`
 
 ### --feedback--
 
-Consider which operations are executed first in a mathematical expression.
+Recall the special value JavaScript returns when you divide by zero.
 
 ## --video-solution--
 
-2
+1
 
 ## --text--
 
-How do you use the subtraction operator in JavaScript to find the difference between two numbers?
+What’s the output of the following code?
+
+```js
+const remainder = 5 % 3;
+console.log(remainder);
+```
 
 ## --answers--
 
-Use the plus sign (`+`) to subtract numbers.
+`15`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ---
 
-Use the minus sign (`-`) to subtract a smaller number from a bigger number.
+`2`
 
 ---
 
-Use the multiplication sign (`*`) to perform subtraction.
+`3`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ---
 
-Use the division sign (`/`) to find the difference.
+`1.6666666666666667`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ## --video-solution--
 
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 8bd8a87d00..0dddc6cbb0 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
@@ -2,7 +2,7 @@
 id: 67327195e77b1bd90bdd49d7
 title: What Happens When You Try to Do Calculations with Numbers and Strings?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KPFskFoAzUA
 dashedName: what-happens-when-you-try-to-do-calculations-with-numbers-and-strings
 ---
 
@@ -14,35 +14,39 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What happens when you perform arithmetic operations with a boolean (`true` or `false`) in JavaScript?
+What happens when you run the following code?
+
+```js
+const result = 3 + "19";
+```
 
 ## --answers--
 
-JavaScript throws an error.
+JavaScript ignores the string and only performs the operation on the number.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ---
 
-JavaScript ignores the boolean and only performs the operation on numbers.
+JavaScript throws an error when you try to mix strings and numbers in arithmetic.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ---
 
-JavaScript treats `true` as `1` and `false` as `0` in arithmetic operations.
+JavaScript converts the number `3` into the string `"3"`, concatenates the two strings, and assigns the value `"319"` to `result`.
 
 ---
 
-JavaScript converts the boolean to a string before performing the operation.
+JavaScript converts the string `"19"` into the number `19`, performs the operation, and assigns the value `22` to `result`.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ## --video-solution--
 
@@ -50,71 +54,75 @@ Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ## --text--
 
-What happens when you perform arithmetic operations like subtraction, multiplication, or division with a string and a number in JavaScript?
+What happens when you run the following code?
+
+```js
+const result = "6" - 4;
+```
 
 ## --answers--
 
-JavaScript ignores the string and only performs the operation on the number.
+Conversion fails and JavaScript returns `NaN`.
 
 ### --feedback--
 
-Think about how JavaScript handles different data types in math operations.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
 ---
 
-JavaScript throws an error when you try to mix strings and numbers in arithmetic.
+JavaScript converts the number `4` into the string `"4"`, concatenates the two strings, and assigns the value `"64"` to `result`.
 
 ### --feedback--
 
-Think about how JavaScript handles different data types in math operations.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
 ---
 
-JavaScript converts the string into a number before performing the operation, a process called type coercion.
+The value `Infinity` is assigned to `result`.
 
----
+### --feedback--
 
-JavaScript converts the number into a string before performing the operation.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
-### --feedback--
+---
 
-Think about how JavaScript handles different data types in math operations.
+JavaScript converts the string `"6"` into the number `6`, performs the operation, and assigns the value `2` to `result`.
 
 ## --video-solution--
 
-3
+4
 
 ## --text--
 
-How does JavaScript handle arrays or objects in arithmetic operations?
+What happens when you perform arithmetic operations with a boolean (`true` or `false`) in JavaScript?
 
 ## --answers--
 
-It throws an error.
+JavaScript throws an error.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ---
 
-It performs the arithmetic operation normally without any conversion.
+JavaScript ignores the boolean and only performs the operation on numbers.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ---
 
-It converts the array or object to a string and then concatenates it with the number.
+JavaScript treats `true` as `1` and `false` as `0` in arithmetic operations.
 
 ---
 
-It ignores the array or object and only operates on the number.
+JavaScript converts the boolean to a string before performing the operation.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ## --video-solution--
 
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 fcaf6be9d2..1ee9d0a810 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
@@ -2,7 +2,7 @@
 id: 6732719e2e3ad4d947410b65
 title: How Does Operator Precedence Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pnXCNw4fCyU
 dashedName: how-does-operator-precedence-work
 ---
 
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 a704f909f3..24d3384157 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
@@ -2,7 +2,7 @@
 id: 673271a8998ddfd97578d095
 title: How Do the Increment and Decrement Operators Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: byGvO4RC26w
 dashedName: how-do-the-increment-and-decrement-operators-work
 ---
 
@@ -66,7 +66,7 @@ Prefix (`++value` or `--value`).
 
 ---
 
-Either prefix or postfix, it doesn’t matter.
+Either prefix or postfix, it doesn't matter.
 
 ### --feedback--
 
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 254a230c4b..c80280ece1 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
@@ -2,7 +2,7 @@
 id: 673271b4213033d9b661c70e
 title: What Are Compound Assignment Operators in JavaScript, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _OotACioDZs
 dashedName: what-are-compound-assignment-operators-in-javascript-and-how-do-they-work
 ---
 
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 0b701c7098..a75801d30b 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
@@ -2,7 +2,7 @@
 id: 673271c7581a27d9dd78f6d6
 title: What Are Booleans, and How Do They Work with Equality and Inequality Operators?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: PmbDO3GXcO4
 dashedName: what-are-booleans-and-how-do-they-work-with-equality-and-inequality-operators
 ---
 
@@ -110,7 +110,7 @@ Think about how JavaScript handles different types with regular equality.
 
 ---
 
-It throws an error if the types don’t match.
+It throws an error if the types don't match.
 
 ### --feedback--
 
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 35faec0329..015656c81e 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
@@ -2,7 +2,7 @@
 id: 673271dffbc34fda31da9515
 title: What Are Comparison Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1E_U3oP18sA
 dashedName: what-are-comparison-operators-and-how-do-they-work
 ---
 
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 4652149991..12b88aab00 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
@@ -2,7 +2,7 @@
 id: 673271e8e3d43bda89f723b3
 title: What Are Unary Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VTY8Y9qfvTs
 dashedName: what-are-unary-operators-and-how-do-they-work
 ---
 
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 b9e0fb151d..d43333545d 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
@@ -2,7 +2,7 @@
 id: 673271f39f124ddac28866d5
 title: What Are Bitwise Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Wga6bSebwFg
 dashedName: what-are-bitwise-operators-and-how-do-they-work
 ---
 
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 7c78e6ce54..525aa9fc34 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
@@ -2,7 +2,7 @@
 id: 673271fd11d063daf0cf8d20
 title: What Are Conditional Statements, and How Do If/Else If/Else Statements Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 6BZn4rKzpJ8
 dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statements-work
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What’s a compact way to write simple `if`/`else` statements?
+What's a compact way to write simple `if`/`else` statements?
 
 ## --answers--
 
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 215b6cbcee..7ecb9e7567 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
@@ -2,7 +2,7 @@
 id: 6732720e95f6a0db526a2e4d
 title: What Are Binary Logical Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bFo2p8aD9Y8
 dashedName: what-are-binary-logical-operators-and-how-do-they-work
 ---
 
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 78b4665618..aae68540df 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
@@ -2,7 +2,7 @@
 id: 67327217e70ee0db7913b255
 title: What Is the Math Object in JavaScript, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1VUy-I4sNKQ
 dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-methods
 ---
 
@@ -86,7 +86,7 @@ Think about how it chooses to round up or down based on the decimal value.
 
 ## --text--
 
-What’s the difference between `Math.min()` and `Math.max()`?
+What's the difference between `Math.min()` and `Math.max()`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
index 49f6d5682f..cc96327f7b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
@@ -2,7 +2,7 @@
 id: 67329f737126b75bcb949e13
 title: What Is an Object in JavaScript, and How Can You Access Properties from an Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JNFs7YHLRFQ
 dashedName: what-is-an-object-in-javascript-and-how-can-you-access-properties-from-an-object
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
index 333f83cc67..fa14e74eb0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
@@ -2,7 +2,7 @@
 id: 6732b721eb98f224868b44a6
 title: How Can You Remove Properties from an Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sz2K-rYNjSI
 dashedName: how-can-you-remove-properties-from-an-object
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
index a084a126cf..2e03b3f962 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
@@ -2,7 +2,7 @@
 id: 6732b72961f94324bd6390de
 title: How to Check If an Object Has a Property?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i1MpmDeRZ_0
 dashedName: how-to-check-if-an-object-has-a-property
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
index 0aa3e00632..401d654fbc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
@@ -2,7 +2,7 @@
 id: 6732b73509f71f24ef05e86e
 title: How Do You Work with Accessing Properties from Nested Objects and Arrays in Objects?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: f7uZdVLZuCA
 dashedName: how-do-you-work-with-accessing-properties-from-nested-objects-and-arrays-in-objects
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
index 292eae0920..5216609e44 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
@@ -2,7 +2,7 @@
 id: 6732b73d25cc01251b778043
 title: What Is the Difference Between Primitive and Non-Primitive Data Types?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: c-jyZdhWIYk
 dashedName: what-is-the-difference-between-primitive-and-non-primitive-data-types
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
index 2b10ff9d72..76679f6501 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
@@ -2,7 +2,7 @@
 id: 6732b749b8aad125523dcda5
 title: What Is the Difference Between Functions and Object Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Jufe8vG8TVo
 dashedName: what-is-the-difference-between-functions-and-object-methods
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
index 2b1deddd94..7391daa6b7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
@@ -2,7 +2,7 @@
 id: 6732b758194c97257d23fc72
 title: What Is the Object() Constructor, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: o-AsC8Z7Vng
 dashedName: what-is-the-object-constructor-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
index 679086182c..b372a2c458 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
@@ -2,7 +2,7 @@
 id: 6732b76c03f7d825c7fc74ee
 title: What Is the Optional Chaining Operator, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: s9EDuy0Djco
 dashedName: what-is-the-optional-chaining-operator-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
index bb70d7f5dc..4ddaf22bae 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
@@ -2,7 +2,7 @@
 id: 6732b77adf9de12617a2dbb3
 title: What Is Object Destructuring, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XMS8vSutlUc
 dashedName: what-is-object-destructuring-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
index ad76569333..062c850d52 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
@@ -2,7 +2,7 @@
 id: 6732b788046862264eeb1c39
 title: What Is JSON, and How Do You Access Values Using Bracket and Dot Notation?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 8x6vJarVy_o
 dashedName: what-is-json-and-how-do-you-access-values-using-bracket-and-dot-notation
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
index 4ab4b3c290..75a87253e8 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
@@ -2,7 +2,7 @@
 id: 6732b79c6aa77826855a3f11
 title: How Do JSON.parse() and JSON.stringify() Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gjnT8byXAc0
 dashedName: how-do-json-parse-and-json-stringify-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
index eaec498023..fdc907c950 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
@@ -2,7 +2,7 @@
 id: 6733aad43b3ebff588a26fb5
 title: What Are Regular Expressions, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: yyawAbHw9Mw
 dashedName: what-are-regular-expressions-and-what-are-some-common-methods
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
index 2d1fa9529f..78c2a2ef8c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
@@ -2,13 +2,13 @@
 id: 6733c5ba834ded4bb067e67c
 title: What Are Some Common Regular Expression Modifiers Used for Searching?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 0ZGj-WNbB98
 dashedName: what-are-some-common-regular-expression-modifiers-used-for-searching
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
index b0a3ae0b1b..f75efb200a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
@@ -2,13 +2,13 @@
 id: 6733c5c549775c4be710237c
 title: How Can You Match and Replace All Occurrences in a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HyuDs-jVJyw
 dashedName: how-can-you-match-and-replace-all-occurrences-in-a-string
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
index 01e94f5248..f2bd25ca44 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
@@ -1,14 +1,120 @@
 ---
 id: 6733c5d0048bb74c18431296
 title: What Are Character Classes, and What Are Some Common Examples?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-character-classes-and-what-are-some-common-examples
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about character classes in regular expressions, including some common examples.
+
+Character classes are a special syntax you can use to match sets or subsets of characters.
+
+The first character class you should learn is the wild card class.
+
+The wild card is represented by a period or dot (`.`), and matches any single character except line breaks. To allow the wildcard class to match line breaks, remember that you would need to use the `s` flag.
+
+A regular expression that matched the letter `A` followed by one single character might look like:
+
+```js
+const regex = /a./;
+```
+
+This can be helpful when you are looking for specific patterns in a string, but don't know what might be between those two patterns. But you can also use character classes to narrow down your matches.
+
+For example, what if you wanted to match a numerical character? You might have to write out every possible digit, separating them with the `|` or operator:
+
+```js
+const regex = /0|1|2|3|4|5|6|7|8|9/;
+```
+
+A character class exists for this exact pattern, and gives you a shorthand syntax for writing the same thing. In this case, the character class is written as a backslash (`\`)followed by a `d` character:
+
+```js
+const regex = /\d/;
+```
+
+This regular expression will match the exact same pattern as our previous expression: a single numerical character anywhere in the string.
+
+Now consider a regular expression which also needs to match any letter character `a` through `z`. You could write out each individual character separated by the or operator. Or you could use another character class.
+
+The `\w` class, which is a backslash followed by a `w`, represents any word character.
+
+```js
+const regex = /\w/;
+```
+
+A word character is defined as any letter, from `a` to `z`, or a number from `0` to `9`, or the underscore (`_`) character.
+
+The inclusion of the underscore might seem strange, but consider the naming conventions for variables – variable names can often include underscores, so `\w` is designed to match that as well.
+
+There is one more special character class to consider: the white-space class `\s`, represented by a backslash followed by an `s`. This character class will match any white space, including new lines, spaces, tabs, and special unicode space characters.
+
+These special character classes can be negated. To negate one of these character classes, instead of using a lowercase letter after the backslash, use the uppercase equivalent.
+
+```js
+const regex = /\D/;
+```
+
+This regular expression, for example, does not match a numerical character. Instead, it matches any single character that is not a numerical character.
+
+Negating the `\w` class would match any character that is not `a` to `z`, `0` to `9`, or an underscore, and negating the `\s` character class would match any character that is not a white-space.
+
+But what if you wanted to match more specific subsets of characters?
+
+Maybe you're a professor grading papers, and you need to make sure your grades are valid. A valid grade can be `A`, `B`, `C`, `D`, or `F`. You can use square brackets to construct your own character class:
+
+```js
+const regex = /[abcdf]/;
+```
+
+This regular expression will match a single character that is in the list "`a`, `b`, `c`, `d`, or `f`".
+
+What about checking only grades that pass? A passing grade would be an `A`, `B`, `C`, or `D`. You can modify your character class to stop matching "`f`" by removing that character from the list:
+
+```js
+const regex = /[abcd]/;
+```
+
+You may have noticed now that our character class consists only of consecutive characters. `A`, `B`, `C`, and `D` are all directly next to each other in the alphabet. For numbers, consecutive characters might be `4`, `5`, and `6`.
+
+When you have consecutive characters, you can create a range using the hyphen character.
+
+Using a range, we can turn our regular expression into a shorter syntax while matching the exact same pattern.
+
+```js
+const regex = /[a-d]/;
+```
+
+Remember that regular expressions are case-sensitive by default. This means our character class will only match the lowercase variants of `a`, `b`, `c`, and `d`. You could use the `i` flag to achieve this, but you can also bake it directly into your character class by including the uppercase variants:
+
+```js
+const regex = /[a-zA-Z]/;
+```
+
+You can also mix digits and numbers in your character class. For example, if you wanted the behavior of the `\w` class without the underscore, you could construct your own:
+
+```js
+const regex = /[a-zA-Z0-9]/;
+```
+
+Note that if you want your character class to match a literal hyphen, you need to place a hyphen at the beginning or end of the class.
+
+```js
+const regex = /[-a-zA-Z0-9]/;
+```
+
+And finally, you can include special character classes in your custom class. Maybe you want to include a hyphen in the set matched by `\w`:
+
+```js
+const regex = /[-\w]/;
+```
+
+Character classes are a powerful tool that gives you incredible control over your pattern matching.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
index eb2c447e81..73e040d0fd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
@@ -1,14 +1,76 @@
 ---
 id: 6733c5dc74176e4c496d09e6
 title: What Are Lookaheads and Lookbehind Assertions, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about lookahead and lookbehind assertions in regular expressions.
+
+Lookahead and lookbehind assertions allow you to match specific patterns based on the presence or lack of surrounding patterns. There are four variations of these assertions.
+
+First is the positive lookahead assertion. This assertion will match a pattern when the pattern is followed by another pattern.
+
+To construct a positive lookahead, you need to start with the pattern you want to match. Then, use parentheses to wrap the pattern you want to use as your condition. After the opening parenthesis, use `?=` to define that pattern as a positive lookahead.
+
+This pattern will only match the word `free` if it is followed by `code`.
+
+```js
+const regex = /free(?=code)/i;
+```
+
+Let's test the behavior of our pattern:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-1.png)
+
+Notice how only the string where `free` is immediately followed by `code` passes the test.
+
+But what if you want to match the presence of `free` when it is NOT followed by `code`? You can turn your positive lookahead into a negative lookahead, to invert the behavior. To do this, change your `?=` to `?!`:
+
+```js
+const regex = /free(?!code)/i;
+```
+
+Let's test this against our same strings:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-2.png)
+
+As expected, the results are reversed. The only string that fails is the first string, where `free` is immediately followed by `code`.
+
+Lookbehind assertions function similarly to lookahead assertions, except that instead of matching conditionally based on a following pattern, they match conditionally based on a preceding pattern. Let's take a look at a positive lookbehind.
+
+A positive lookbehind is denoted with `?<=` instead of `?=`. Let's make our regular expression match `code` when it is preceded by `free`:
+
+```js
+const regex = /(?<=free)code/i;
+```
+
+Just like with our positive lookahead, our positive lookbehind matches the first string because `code` is immediately preceded by `free`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-3.png)
+
+To match `code` when it is NOT preceded by `free`, we can use a negative lookbehind. A negative lookbehind is defined by replacing `?<=` with `?<!`:
+
+```js
+const regex = /(?<!free)code/i;
+```
+
+This would match any occurrence of `code` that is NOT immediately preceded by `free`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-4.png)
+
+Remember that `Regex.prototype.test` only confirms whether a string matches the regular expression. Let's use our negative lookbehind with `String.prototype.match` to see how assertions affect that:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-5.png)
+
+Notice how even though our regular expression uses a lookbehind to check for the presence of free, it does not match free. The only text included in the match is code.
+
+Lookaheads and lookbehinds are incredibly useful for conditionally matching text without impacting the returned value of your match.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
index 81911dc2bb..a74847861a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
@@ -1,14 +1,104 @@
 ---
 id: 6733c5e54e3a154c8078ed48
 title: What Are Regex Quantifiers, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-regex-quantifiers-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about quantifiers in regular expressions.
+
+Consider a scenario where you want to match a four-digit identification code. You know you can use the `\d` character class, so you might write that four times. And to avoid any extraneous characters, you'd include both the start and end anchors.
+
+```js
+const regex = /^\d\d\d\d$/;
+```
+
+And this does work – it will match four numerical characters. But rather than having to write out the same class multiple times, you can give it a quantifier.
+
+Quantifiers are defined by curly braces containing one or two numbers. Let's use a quantifier in our pattern:
+
+```js
+const regex = /^\d{4}$/;
+```
+
+Notice how our quantifier contains only the number `4`. This syntax means "match the previous character exactly four times". Let's see how that behaves:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-1.png)
+
+The pattern only matches the string with exactly four digits, because we have used the anchors and our quantifier only allows exactly four digits. But maybe the identification code only needs to be a minimum of four digits.
+
+To allow for four or more digits, add a comma after the number in your quantifier:
+
+```js
+const regex = /^\d{4,}$/;
+```
+
+Now, our syntax allows the pattern to match four or more digits. Let's test it:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-2.png)
+
+A seven-digit identifier is rather long. These identifiers should have a maximum of 6 digits, and a minimum of 4 digits. To achieve this, you can add a second number to your quantifier after the comma.
+
+```js
+const regex = /^\d{4,6}$/;
+```
+
+And now our pattern no longer matches the seven-digit identifier, because it is greater than our six-digit maximum.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-3.png)
+
+Note that you cannot use this syntax to set a maximum alone – you must always set a minimum. But if you set the minimum to `1`, you can effectively achieve the same result.
+
+We've received updated requirements from our users. Identifiers can now optionally start with a letter. We already know the character class for this, so let's add that to our regular expression.
+
+```js
+const regex = /^[a-zA-z]\d{4,6}$/;
+```
+
+But now we mandate the presence of a letter. How can we make it optional?
+
+You could use the quantifier syntax with `0` as the minimum and `1` as the maximum:
+
+```js
+const regex = /^[a-zA-Z]{0,1}\d{4,6}$/;
+```
+
+But there's actually a special shorthand quantifier for a single optional character – the question mark. Let's replace our quantifier with the question mark:
+
+```js
+const regex = /^[a-zA-Z]?\d{4,6}$/;
+```
+
+We should validate the result:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-4.png)
+
+Our pattern now allows for a single optional letter, followed by four to six digits.
+
+Unfortunately, we've just realized we read the requirements wrong. We need to allow for any number of letters before the numbers. We can use our quantifier with a `0` minimum and no defined maximum:
+
+```js
+const regex = /^[a-zA-Z]{0,}\d{4,6}$/;
+```
+
+But our pattern is getting long again. Thankfully, there's another short-hand for "match the previous character zero or more times" –  the asterisk symbol. Let's replace our quantifier with that in the pattern, and test it:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-5.png)
+
+Now we successfully match any identifier with zero or more letters followed by four to six numbers. But it turns out this is crashing our system – we actually have to require at least one letter.
+
+Again, we could use a quantifier with a minimum of one and no defined maximum, or we could use yet another special syntax – the plus symbol:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-6.png)
+
+Now the identifiers that do not start with at least one letter fail, regardless of how many numbers there are.
+
+You can use quantifiers to greatly enhance the brevity and readability of your regular expressions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
index d579b39149..177a6e602e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
@@ -1,14 +1,123 @@
 ---
 id: 6733c5f20cc9584cada942a4
 title: What Are Capturing Groups and Backreferences, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-capturing-groups-and-backreferences-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about capturing groups and back references in regular expressions.
+
+A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+
+Let's capture the `code` from our `freeCodeCamp` regular expression. To do that, we'll enclose `code` in parentheses and define it as a capture group.
+
+```js
+const regex = /free(code)camp/i;
+```
+
+To confirm the behavior, we can test it against a `freecodecamp` string:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-1.png)
+
+But this doesn't actually make use of our captured group. Instead, let's take a look at the result of using `match`:
+
+```js
+const regex = /free(code)camp/i;
+console.log("freecodecamp".match(regex));
+```
+
+Here we can see that our `match` array has a second element, which is the portion of the string which was captured by our capture group.
+
+Notice how the capture group matches the exact pattern `code`, where a character class would match a single character from the list `c`, `o`, `d`, and `e`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-2.png)
+
+But how can we actually use this? Well, capture groups are often used when replacing contents of a string. Let's set up some code to do that. We're going to turn `freecodecamp` into `paidcodeworld`.
+
+```js
+const regex = /free(code)camp/i;
+console.log("freecodecamp".replace(regex, "paidcodeworld"));
+```
+
+This works on its own, but what if we didn't know how many `o`'s were in "`code`"? If we need a quantifier for one or more `o`'s…
+
+```js
+const regex = /free(co+de)camp/i;
+console.log("freecoooooooodecamp".replace(regex, "paidcodeworld"));
+```
+
+We're getting `paidcodeworld` as our result. We want to preserve the number of `o`'s, so we need to reuse what was captured by the regular expression.
+
+This is where a backreference comes in. Instead of hardcoding the "`code`" portion of our replacement string, we can reference the captured group directly.
+
+In a replace call, you achieve a backreference by using a dollar sign (`$`) followed by the number of the capture group to use.
+
+In our case, that would be `$1`, since code is captured in the first capture group.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-3.png)
+
+We have now successfully preserved an unknown number of `o` characters when converting `freecodecamp` into `paidcodeworld`. But backreferences aren't just limited to the replace call. You can actually use them directly in a regular expression.
+
+This would allow you to match a previously captured pattern later on in the regular expression.
+
+Let's say we want to match `freecodecamp` twice, with the same number of `o`'s, but anywhere in the string.
+
+First, we need to separate them with our wildcard character, and allow any number of characters to match that wildcard:
+
+```js
+const regex = /free(co+de)camp.*free(co+de)camp/i;
+```
+
+This current expression won't ensure that the number of `o` characters is the same, however. To achieve that, we need to replace the second capture group with a reference to the first.
+
+Inside a regular expression, a backreference is denoted with a backslash followed by the number of the capture group:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-4.png)
+
+And with that, we can see that a string with the correct number of `o`'s matches, while a string with two different numbers of `o`'s does not.
+
+This syntax is great, but can quickly get confusing when you are referencing multiple capture groups. Thankfully, instead of using numbers, you can give your groups names.
+
+To define a named capture group, you add a question mark (`?`) followed by the name enclosed in less than and greater than signs to the beginning of the group. Let's name our capture group "`code`":
+
+```js
+const regex = /free(?<code>co+de)camp.*free\1camp/i;
+```
+
+Now we can update our backreference in the regular expression to refer to this group. A named back reference starts with a backslash followed by the letter `k` in JavaScript. Then you add the name, again enclosed in less than and greater than signs. Let's take a look at that:
+
+```js
+const regex = /free(?<code>co+de)camp.*free\k<code>camp/i;
+```
+
+Now if we check our `test` call, we can see that we still pass:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-5.png)
+
+To use our named capture group in a `replace` call, we'd insert a dollar sign into the string, followed by the name enclosed in less than and greater than signs:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-6.png)
+
+Finally, sometimes you want to create a group of characters, but don't need the captured result.
+
+Let's say we want to match either `freecodecamp` or `freecandycamp`. You could create two patterns separated by an OR assertion:
+
+```js
+const regex = /freecodecamp|freecandycamp/i;
+```
+
+But this can become quite lengthy for larger-scale regular expressions. Instead, you can create a non-capturing group around the characters that you need to OR:
+
+```js
+const regex = /free(?:code|candy)camp/i;
+```
+
+A non-capturing group does not store the `code|candy` match separately in memory. You can't backreference a non-capturing group. But it can be helpful for creating alternate patterns without sacrificing readability or performance.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
index a4a8ad2676..e095474bc9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
@@ -2,7 +2,7 @@
 id: 672d2654f78cbf20e0ba4501
 title: What Is Bracket Notation, and How Do You Access Characters from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VFYqtU7nzFo
 dashedName: what-is-bracket-notation-and-how-do-you-access-characters-from-a-string
 ---
 
@@ -14,35 +14,35 @@ Watch the video lecture and answer the questions below.
 
 ## --text--
 
-What is the index of the character `"b"` in the string `"JavaScript"`?
+What is the index of the character `"r"` in the string `"JavaScript"`?
 
 ## --answers--
 
-2
+`2`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ---
 
-4
+`4`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ---
 
-6
+`6`
 
 ---
 
-8
+`8`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
index e87598789a..d77b4ebf06 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
@@ -2,7 +2,7 @@
 id: 673263d58da27ea7809963bf
 title: What Are Template Literals, and What Is String Interpolation?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: kISWzkA7gKg
 dashedName: what-are-template-literals-and-what-is-string-interpolation
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
index 7f8e998bad..11b9eee8ca 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
@@ -2,7 +2,7 @@
 id: 673263df0eb568a7b450f2fc
 title: How Do You Create a Newline in Strings and Escape Strings?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gOLjFbJnTIM
 dashedName: how-do-you-create-a-newline-in-strings-and-escape-strings
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md
index e206886e65..d9f2af9f09 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md
+++ b/curriculum/challenges/chinese-traditional/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: nVAaxZ34khk
+videoId: k2QaBPHl_00
 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What does the inde`xOf method return if the substring is not found in the string?
+What does the `indexOf` method return if the substring is not found in the string?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
index 1b8a21ef05..f9a8aca0d7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
@@ -2,7 +2,7 @@
 id: 673263f4a5899da8124542fd
 title: What Is the Prompt Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lgAEO6_vNPQ
 dashedName: what-is-the-prompt-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
index 294d534ea7..1ebbeaf280 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
@@ -2,7 +2,7 @@
 id: 6732a0472f52015e511f8e58
 title: What Is an API, and What Are Web APIs?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VRF7NItXm2c
 dashedName: what-is-an-api-and-what-are-web-apis
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
index 16170eb501..0706815738 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
@@ -2,7 +2,7 @@
 id: 67336894ae148431a870694d
 title: What Is the DOM, and How Do You Access Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EKgxoZ9IzmQ
 dashedName: what-is-the-dom-and-how-do-you-access-elements
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
index 8ab10de1e3..b3ce6616d2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
@@ -2,7 +2,7 @@
 id: 6733689f9f31dd31e7d9c789
 title: How Do DOM Nodes Exist Relative to Each Other in the DOM Tree?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 5G2ZQrgrBYU
 dashedName: how-do-dom-nodes-exist-relative-to-each-other-in-the-dom-tree
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
index 6ec55e771b..4c895162b4 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
@@ -2,7 +2,7 @@
 id: 673368b1cf26253212a3cfb2
 title: What Is the querySelectorAll() Method, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: F4WZUBQL9Js
 dashedName: what-is-the-queryselectorall-method-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
index 265c328c08..4a54c53466 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
@@ -2,7 +2,7 @@
 id: 673368c0161e6b326a7e03f0
 title: How Do You Create New Nodes Using innerHTML() and createElement()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: WypY2jRcCe0
 dashedName: how-do-you-create-new-nodes-using-innerhtml-and-createelement
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
index 9e62c66aba..a6d1db635e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
@@ -2,7 +2,7 @@
 id: 673368ccf52205329b729378
 title: What Is the Difference Between innerText, textContent, and innerHTML?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: A94NbhbAows
 dashedName: what-is-the-difference-between-innertext-textcontent-and-innerhtml
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
index cbe6a12eeb..e351964522 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
@@ -2,7 +2,7 @@
 id: 673368d97e8ce232cdcd6b68
 title: How Do You Add and Remove Nodes from the DOM with appendChild() and removeChild()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 8xXQxXlvY8A
 dashedName: how-do-you-add-and-remove-nodes-from-the-dom-with-appendchild-and-removechild
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
index 74922f6a9b..74f45f28a3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
@@ -2,7 +2,7 @@
 id: 673368e7bd043f331919514d
 title: How Do the Navigator, Window, and Document Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: O0SWih5pv9U
 dashedName: how-do-the-navigator-window-and-document-work
 ---
 
@@ -86,7 +86,7 @@ This property helps you find out where the browser is currently navigating.
 
 ## --text--
 
-How can you access the document interface properties without explicitly using the document object?
+How can you access the `document` interface properties without explicitly using the `window` object?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
index 8cd8e5a377..7629627226 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
@@ -2,7 +2,7 @@
 id: 673368f272706633516e4873
 title: How Do You Add Attributes with setAttribute()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ciq88lYTHUc
 dashedName: how-do-you-add-attributes-with-setattribute
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
index 29685e3f0c..43297a9d9c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
@@ -2,7 +2,7 @@
 id: 673368fbe12a2b337645053d
 title: What Is the Event Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: UVBsIxxvgBg
 dashedName: what-is-the-event-object
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
index 9ee0cbff26..4edba2d484 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
@@ -2,7 +2,7 @@
 id: 673369067f824d33a90a0534
 title: How Does the addEventListener Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XxKBdnCPtoU
 dashedName: how-does-the-addeventlistener-method-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
index a1a328af6e..e9b250c03d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
@@ -2,7 +2,7 @@
 id: 673369101e5c4a33db0e8a02
 title: How Does the removeEventListener Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 59HUIkhJqnc
 dashedName: how-does-the-removeeventlistener-method-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
index 649e029b5a..5c6f0e783d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
@@ -2,7 +2,7 @@
 id: 6733691d88e3053414689276
 title: What Are Inline Event Handlers, and Why Is It Best Practice to Use addEventListener Instead?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JbTSvver-y8
 dashedName: what-are-inline-event-handlers-and-why-is-it-best-practice-to-use-addeventlistener-instead
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
index 96b1b97410..f7243586c2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
@@ -2,7 +2,7 @@
 id: 6733692ffe1da034469f7917
 title: How Do You Manipulate Styles Using Element.style and Element.classList?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i07QkMVN15o
 dashedName: how-do-you-manipulate-styles-using-elementstyle-and-elementclasslist
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which property would you use to directly change the color of an element’s text using JavaScript?
+Which property would you use to directly change the color of an element's text using JavaScript?
 
 ## --answers--
 
@@ -94,7 +94,7 @@ The menu will be permanently visible.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ---
 
@@ -102,7 +102,7 @@ The menu will be permanently hidden.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ---
 
@@ -114,7 +114,7 @@ The menu will display an error message.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
index 7a7f0eacd8..974cade79d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
@@ -2,7 +2,7 @@
 id: 6733693bfce9a43489a355db
 title: What Is the DOMContentLoaded Event, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sEsyYH_SAb8
 dashedName: what-is-the-domcontentloaded-event-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
index f91118e250..621c1e59e7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
@@ -2,7 +2,7 @@
 id: 6733694805a85d34ced08a9b
 title: How Do the setTimeout and setInterval Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: GSWSPc2SGTg
 dashedName: how-do-the-settimeout-and-setinterval-methods-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
index aac8cb2b93..5c5aef01fc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
@@ -2,7 +2,7 @@
 id: 67336956340e8a34fbd5d9f3
 title: What Is the requestAnimationFrame() API, and How Can It Be Used to Set Up an Animation Loop?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: mfnow4GWCo4
 dashedName: what-is-the-requestanimationframe-api-and-how-can-it-be-used-to-set-up-an-animation-loop
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
index d208cf6666..71deddcef0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
@@ -2,7 +2,7 @@
 id: 6733696567d2273540aa6033
 title: What Is the Web Animations API, and How Does It Relate to CSS Animation Properties?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pVVcaDEIzvs
 dashedName: what-is-the-web-animations-api-and-how-does-it-relate-to-css-animation-properties
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
index c9790ec773..35c21edee9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
@@ -2,7 +2,7 @@
 id: 6733697661182d357fc643d2
 title: What Is the Canvas API, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EbfxtG26HR0
 dashedName: what-is-the-canvas-api-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
index 68be5ca416..a347ece764 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
@@ -2,7 +2,7 @@
 id: 673369829e232835c2732656
 title: How Do You Open and Close Dialog Elements Using JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: W6gusPmPGo4
 dashedName: how-do-you-open-and-close-dialog-elements-using-javascript
 ---
 
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 f3cf1121c0..0f867d3ad9 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
@@ -237,23 +237,23 @@ Which selector is correct to target all siblings of an `img`?
 
 #### --text--
 
-What statement is TRUE about `block` elements?
+What statement is TRUE about block-level elements?
 
 #### --distractors--
 
-Blockline elements don't start on new lines.
+Block-level elements don't start on new lines.
 
 ---
 
-Blockline elements only takes up as much as it needs.
+Block-level elements only takes up as much as it needs.
 
 ---
 
-Blockline elements come with no margin.
+Block-level elements come with no margin.
 
 #### --answer--
 
-Blockline elements start on a new line with margin before and after the element.
+Block-level elements start on a new line with margin before and after the element.
 
 ### --question--
 
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 5f185147da..6102eaa31d 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
@@ -61,23 +61,23 @@ An element without child nodes or an end tag.
 
 #### --text--
 
-What is an inline level element?
+Which of the following is a correct value for the `id` attribute?
 
 #### --distractors--
 
-An element that takes up the entire horizontal space and always starts a new line.
+`id="main@content"`
 
 ---
 
-An element used to display images.
+`id="main content"`
 
 ---
 
-An element used to embedding videos on the page.
+`id="123content"`
 
 #### --answer--
 
-An element that only takes up the width and height of its inner content.
+`id="main-content"`
 
 ### --question--
 
@@ -369,23 +369,23 @@ Which of the following is an example of a boolean attribute?
 
 #### --text--
 
-What is a block level element?
+Which of the following is a correct syntax for the `img` element?
 
 #### --distractors--
 
-An element used to display tables.
+`<img src="image.jpg" alt="Description of the image"></img>`
 
 ---
 
-An element used to display modals.
+`<img source="image.jpg" desc="Description of the image"></img>`
 
 ---
 
-An element that only takes up the width and height of its inner content.
+`<img src="image.jpg" desc="Description of the image">`
 
 #### --answer--
 
-An element that takes up the entire horizontal space and always starts a new line.
+`<img src="image.jpg" alt="Description of the image">`
 
 ### --question--
 
@@ -525,23 +525,23 @@ HTML represents the content and structure for a web page.
 
 #### --text--
 
-What is the difference between inline and block level elements?
+Which image license works for the public domain?
 
 #### --distractors--
 
-Block-level elements are used to group images only, while inline elements group list items.
+JPG
 
 ---
 
-Inline elements are always larger in size compared to block-level elements.
+Creative Commons
 
 ---
 
-Block-level elements flow within the content of a line, while inline elements start on a new line.
+BSD
 
 #### --answer--
 
-Block-level elements occupy the full width available, while inline elements only occupy as much width as necessary.
+CC0
 
 ### --question--
 
@@ -679,23 +679,23 @@ Which element is used to add audio to your HTML document?
 
 #### --text--
 
-What does the `required` attribute do?
+Where is the content represented on the page placed in an HTML document?
 
 #### --distractors--
 
-It specifies the `width` for a form.
+In between the `head` and the `body` elements.
 
 ---
 
-It specifies the `color` of a form input.
+Within the `repr` element.
 
 ---
 
-It specifies the `type` for the input.
+Within the `script` element.
 
 #### --answer--
 
-It specifies that an input must be filled out before a form submission.
+Within the `body` element.
 
 ### --question--
 
@@ -855,23 +855,23 @@ Which of the following is the correct syntax for a paragraph element?
 
 #### --text--
 
-What does the `iframe` element stand for?
+What does the name of the `iframe` element stand for?
 
 #### --distractors--
 
-The `Inline Framing component`.
+Inline Framing
 
 ---
 
-The `Inner Frame element`.
+Inner Frame
 
 ---
 
-The `Inline video element`.
+Inline video
 
 #### --answer--
 
-The `Inline Frame element`.
+Inline Frame
 
 ### --question--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
index 4e2b1a0dfb..8e578e4f09 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
@@ -475,7 +475,7 @@ ol[type~="1"] { font-weight: bold; }
 
 #### --text--
 
-Suppose, on freeCodeCamp’s forum, each discussion has a `data-status` attribute that could be `"open"` or `"closed"`. You want to highlight all open discussions. How would you select these discussions?
+Suppose, on freeCodeCamp's forum, each discussion has a `data-status` attribute that could be `"open"` or `"closed"`. You want to highlight all open discussions. How would you select these discussions?
 
 #### --distractors--
 
@@ -535,7 +535,7 @@ textarea[maxlength] { border-color: darkred; }
 
 #### --text--
 
-Suppose, on freeCodeCamp’s course catalog, each course has a `data-completion` attribute representing the percentage completed. You want to style courses where this attribute ends with `"100"`, indicating full completion. Which selector would work?
+Suppose, on freeCodeCamp's course catalog, each course has a `data-completion` attribute representing the percentage completed. You want to style courses where this attribute ends with `"100"`, indicating full completion. Which selector would work?
 
 #### --distractors--
 
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 81c35bbb28..7558dd38a0 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
@@ -69,7 +69,7 @@ Which of the following is NOT a valid value for the `list-style-type` property?
 
 ---
 
-`lower-greek`
+`disc`
 
 ---
 
@@ -193,23 +193,23 @@ The background stays fixed while the content scrolls
 
 #### --text--
 
-Which of the following is NOT a valid `border-style` value?
+Which of the following is a valid `border-style` value?
 
 #### --distractors--
 
-`solid`
+`wave`
 
 ---
 
-`dotted`
+`triple`
 
 ---
 
-`groove`
+`zig zag`
 
 #### --answer--
 
-`triple`
+`dotted`
 
 ### --question--
 
@@ -237,23 +237,23 @@ Use the `:active` pseudo-class
 
 #### --text--
 
-Which property is used to define the width of a border?
+What is the correct CSS property to create an outline around an element, besides using the `border` property?
 
 #### --distractors--
 
-`border-size`
+`border-wide`
 
 ---
 
-`border-thickness`
+`box-shadow`
 
 ---
 
-`border-spacing`
+`border-img`
 
 #### --answer--
 
-`border-width`
+`outline`
 
 ### --question--
 
@@ -281,7 +281,7 @@ Which value for the `background-repeat` property ensures the image repeats horiz
 
 #### --text--
 
-What’s the purpose of the `border-radius` property?
+What's the purpose of the `border-radius` property?
 
 #### --distractors--
 
@@ -391,29 +391,29 @@ Which of these is NOT a valid border value?
 
 #### --text--
 
-What does the `border-collapse` property do when applied to table elements?
+How can you ensure that gradients used in web design are accessible?
 
 #### --distractors--
 
-It removes the table borders
+Use only two colors in the gradient
 
 ---
 
-It adds spacing between borders
+Use gradients only for decorative purposes
 
 ---
 
-It makes the border invisible
+Avoid using gradients in the background
 
 #### --answer--
 
-It merges adjacent table cell's borders into one
+Ensure sufficient contrast between the gradient and any text.
 
 ### --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 value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio?
 
 #### --distractors--
 
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 b020872416..0ee4e9ffcf 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
@@ -43,7 +43,7 @@ What does `100vw` cover in terms of screen width?
 
 #### --distractors--
 
-100% of the screen width answer
+100% of the screen width
 
 ---
 
@@ -149,7 +149,7 @@ On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixe
 
 #### --text--
 
-If the screen height is `800px`, what would `50vh` be?
+If the viewport height is `800px`, what would `50vh` be?
 
 #### --distractors--
 
@@ -175,19 +175,19 @@ What does setting an element's width to `100%` mean?
 
 #### --distractors--
 
-It takes up the full width of the document
+It takes up the full width of the document.
 
 ---
 
-It takes up the full width of the screen
+It takes up the full width of the screen.
 
 ---
 
-It takes up `100px`
+It takes up `100px`.
 
 #### --answer--
 
-It takes up the full width of its parent
+It takes up the full width of its parent.
 
 ### --question--
 
@@ -197,19 +197,19 @@ What happens with `calc(10px + 20%)` in CSS?
 
 #### --distractors--
 
-Adds `10px` to `10%` of the document width
+It adds `10px` to `10%` of the document width.
 
 ---
 
-Always equals `30px`
+It always equals `30px`.
 
 ---
 
-Adds `10px` to `20%` of the screen width
+It adds `10px` to `20%` of the screen width.
 
 #### --answer--
 
-Adds `10px` to `20%` of the parent's width
+It adds `10px` to `20%` of the parent's width.
 
 ### --question--
 
@@ -285,19 +285,19 @@ How does `calc(10vh + 50px)` work for height?
 
 #### --distractors--
 
-Adds `50px` to `10%` of the viewport height
+It adds `50px` to 10% of the viewport width.
 
 ---
 
-Adds `10px` to `50%` of the parent's height
+It adds `10px` to 50% of the parent's height.
 
 ---
 
-Adds `10vh` to `50%` of the document
+It adds `10vh` to 50% of the document width.
 
 #### --answer--
 
-Adds `50px` to `10%` of the viewport height
+It adds `50px` to 10% of the viewport height.
 
 ### --question--
 
@@ -351,19 +351,19 @@ What does `calc(50% + 20px)` do for width?
 
 #### --distractors--
 
-Adds `50%` of the screen width plus `20px`
+It adds `20px` to 50% of the screen width.
 
 ---
 
-Adds `50px` to the screen width
+It adds `50px` to the screen width.
 
 ---
 
-Adds `50%` of the height plus `20px`
+It adds `50%` of the height to `20px`.
 
 #### --answer--
 
-Adds `50%` of the parent's width plus `20px`
+It adds `50%` of the parent's width to `20px`.
 
 ### --question--
 
@@ -373,19 +373,19 @@ What's the key difference between `rem` and `em` in CSS?
 
 #### --distractors--
 
-`rem` is only used for fonts
+`rem` is only used for fonts.
 
 ---
 
-`rem` is for width, em is for fonts
+`rem` is for width, `em` is for fonts.
 
 ---
 
-`rem` is always smaller than `em`
+`rem` is always smaller than `em`.
 
 #### --answer--
 
-`rem` is based on the root font size, `em` is based on the parent's font size
+`rem` is based on the root font size, `em` is based on the parent's font size.
 
 ### --question--
 
@@ -395,19 +395,19 @@ How does `calc(100px + 10%)` work for width?
 
 #### --distractors--
 
-Adds `10%` of the screen width to `100px`
+It adds `10%` of the screen width to `100px`.
 
 ---
 
-Adds `10%` of the height to `100px`
+It adds `10%` of the height to `100px`.
 
 ---
 
-Adds `100px` to `10%` of the document
+It adds `100px` to `10%` of the document.
 
 #### --answer--
 
-Adds `10%` of the parent's width to `100px`
+It adds `10%` of the parent's width to `100px`.
 
 ### --question--
 
@@ -417,19 +417,19 @@ What does setting an element's width to auto do in CSS?
 
 #### --distractors--
 
-Sets the width to `100%`
+It sets the width to `100%`.
 
 ---
 
-Sets the width to `50%` of the viewport
+It sets the width to `50%` of the viewport.
 
 ---
 
-Sets the width to `0px`
+It sets the width to `0px`.
 
 #### --answer--
 
-Allows the browser to determine the width based on the content and container
+It allows the browser to determine the width based on the content and container.
 
 ### --question--
 
@@ -439,17 +439,17 @@ What happens when you use `calc(30vh - 10px)` for height?
 
 #### --distractors--
 
-Subtracts `10px` from the parent's height
+It subtracts `10px` from the parent's height.
 
 ---
 
-Subtracts `30px` from the screen height
+It subtracts `30px` from the screen height.
 
 ---
 
-Adds `30%` of the parent's height minus `10px`
+It adds `30%` of the parent's height minus `10px`.
 
 #### --answer--
 
-Subtracts `10px` from `30%` of the viewport height
+It subtracts `10px` from `30%` of the viewport height.
 
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 042848b722..6c8140bf6d 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
@@ -83,7 +83,7 @@ The space between individual letters
 
 #### --text--
 
-What’s the most common way to add Google Fonts to a website?
+What's the most common way to add Google Fonts to a website?
 
 #### --distractors--
 
@@ -209,7 +209,7 @@ 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--
 
@@ -329,11 +329,11 @@ 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
 
 ---
 
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 bcc7ed4e71..eab6ee36ca 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
@@ -285,7 +285,7 @@ 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
 
 ---
 
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 00c53dd4a5..e3ab555833 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
@@ -61,23 +61,23 @@ Scale
 
 #### --text--
 
-What design tool in Figma would you use to combine multiple elements together without flattening the layers of the elements?
+Which of the following sites would most likely benefit from using breadcrumbs?
 
 #### --distractors--
 
-Frames
+A single-page portfolio site.
 
 ---
 
-Blocks
+A complex e-commerce site with multiple categories and subcategories.
 
 ---
 
-Class
+A simple blog with only a few posts.
 
 #### --answer--
 
-Groups
+A complex e-commerce site with multiple categories and subcategories.
 
 ### --question--
 
@@ -193,23 +193,23 @@ Making the headline of the page larger than other text that comprise the body or
 
 #### --text--
 
-Which Figma tools allows users to specify a region on the screen they would like to export?
+What is a common goal of conducting exit interviews in user research?
 
 #### --distractors--
 
-Frames
+To increase the number of new users.
 
 ---
 
-Section
+To test new features with existing users
 
 ---
 
-Blocks
+To gather data for A/B testing.
 
 #### --answer--
 
-Slice
+To understand the factors causing user churn.
 
 ### --question--
 
@@ -281,45 +281,45 @@ Dark colors and muted light colors for contrast in dim lighting conditions
 
 #### --text--
 
-What is one good design practice when considering color palettes for a design?
+How can user research impact user requirements?
 
 #### --distractors--
 
-Using a variety of colors with strong saturation and contrast
+It has no impact on user requirements.
 
 ---
 
-Focus on vibrancy and saturation and place many non complementary hues
+It only affects non-functional requirements.
 
 ---
 
-Using many complementary colors together
+It only affects functional requirements.
 
 #### --answer--
 
-Limit colors and focus on using shades, tones, and tints of one color and add another hue three spaces away from that color
+It can help define and refine user requirements based on user feedback.
 
 ### --question--
 
 #### --text--
 
-What is one reason why the rule of thirds is important?
+Why is it important for a design brief to be reviewed and approved by all stakeholders before the project begins?
 
 #### --distractors--
 
-Creates symmetry in the composition by dividing it equally
+To ensure everyone is aware of the project's social media strategy.
 
 ---
 
-By dividing up the composition, it eliminates visual hierarchy
+To finalize the color palette and design elements.
 
 ---
 
-Objects at the edge of the composition get more focus
+To determine the project's marketing budget.
 
 #### --answer--
 
-Breaks the composition apart into 9 equal parts, where objects placed on the dividing lines provide focus and hierarchy to the composition
+To confirm that all stakeholders agree on the project's objectives and requirements.
 
 ### --question--
 
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 d3615d14e9..6a20dd01ac 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
@@ -395,7 +395,7 @@ 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
 
 ---
 
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 f89abcae04..bad816f377 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
@@ -157,7 +157,7 @@ When we work on an open-source repository, it becomes easy to detract from the p
 
 ---
 
-By using GitHub or any other repository management tool, it’s easy to develop robust ignorance of the project.
+By using GitHub or any other repository management tool, it's easy to develop robust ignorance of the project.
 
 ---
 
@@ -197,11 +197,11 @@ What is the correct way to contribute to other people's repositories?
 
 #### --distractors--
 
-`git add -> git commit -> git clone -> git push`
+`git add`, `git commit`, `git clone`, `git push`
 
 ---
 
-`git clone -> git commit -> git add -> git push`
+`git clone`, `git commit`, `git add`, `git push`
 
 ---
 
@@ -209,7 +209,7 @@ None of the options
 
 #### --answer--
 
-`git clone -> git add -> git commit -> git push`
+`git clone`, `git add`, `git commit`, `git push`
 
 ### --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 ae72f3b4c0..0b7b3e0703 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
@@ -173,7 +173,7 @@ To add tabs.
 
 #### --answer--
 
-To control keyboard navigation order and allow programmatic focus on elements that aren’t accessible via keyboard.
+To control keyboard navigation order and allow programmatic focus on elements that aren't accessible via keyboard.
 
 ### --question--
 
@@ -205,7 +205,7 @@ What is the difference between the attributes `aria-label` and `aria-labelledby`
 
 #### --distractors--
 
-The `aria-label`and `aria-labelledby` attributes serve the same purpose.
+The `aria-label` and `aria-labelledby` attributes serve the same purpose.
 
 ---
 
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 672d12ac25..9333d52145 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
@@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo
 
 #### --text--
 
-Which html element allows a two-dimensional table with columns and rows?
+Which of the following attributes is used to specify the URL where the form data should be sent?
 
 #### --distractors--
 
-`row`
+`capture`
 
 ---
 
-`matrix`
+`accept`
 
 ---
 
-`table` using attributes `r="3" c="4"`
+`lang`
 
 #### --answer--
 
-`table`
+`action`
 
 ### --question--
 
 #### --text--
 
-What elements are used to specify a row and a row header?
+Which two elements are used to specify a row and a row header in a table?
 
 #### --distractors--
 
@@ -105,49 +105,23 @@ It merges cells across multiple columns.
 
 #### --text--
 
-```html
-<table>
-    <tr>
-        <td colspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
-
-How to make the `td` above span across three rows only?
+What is the role of the `placeholder` attribute?
 
 #### --distractors--
 
-```html
-<table>
-    <tr>
-        <td row="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to send data to the server when the form is submitted
 
 ---
 
-```html
-<table>
-    <tr rowspan="3">
-        <td colspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to associate a `label` element with an `input` element
 
 ---
 
-It's not possible.
+used to specify that an input field is read-only to the user
 
 #### --answer--
 
-```html
-<table>
-    <tr>
-        <td rowspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to show a hint to the user
 
 ### --question--
 
@@ -157,69 +131,85 @@ What is the purpose of the `thead` element?
 
 #### --distractors--
 
-It can be used interchangeably with `th`.
+it is used to group the rows in an HTML table
 
 ---
 
-It defines a single header cell.
+it is used to group the columns in an HTML table
 
 ---
 
-It is essential for marking table headers
+it is used to group the footer content in an HTML table
 
 #### --answer--
 
-It groups table header rows.
+it is used to group the header content in an HTML table
 
 ### --question--
 
 #### --text--
 
-Can the `tfoot` element be placed before or after `tbody` element?
+Which of the following is an example of explicit form association between labels and inputs?
 
 #### --distractors--
 
-Neither before nor after.
+```html
+<label connect="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ---
 
-Only Before.
+```html
+<label associate="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ---
 
-Only After.
+```html
+<label explicit="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 #### --answer--
 
-Both before and after.
+```html
+<label for="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ### --question--
 
 #### --text--
 
-If the `tfoot` element is written before the `tbody` element then where will it be rendered?
+What is an HTML validator used for?
 
 #### --distractors--
 
-Before `tbody`.
+A validator is a tool that automatically formats your HTML code.
 
 ---
 
-It will show an error.
+A validator is a tool that applies styles to your HTML.
 
 ---
 
-Within the `tbody` element.
+A validator is a tool that makes your HTML code run faster.
 
 #### --answer--
 
-Always at the bottom of the table.
+A validator is a tool that checks the syntax of HTML code to ensure it is valid.
 
 ### --question--
 
 #### --text--
 
-What element is used to define a new cell in a table?
+Which element is used to define a new cell in a table?
 
 #### --distractors--
 
@@ -241,81 +231,67 @@ What element is used to define a new cell in a table?
 
 #### --text--
 
-What defines the cell of a header and improves accessibility?
+Which of the following is a tool that allows you to inspect and modify the HTML structure of a web page?
 
 #### --distractors--
 
-`colspan`
+pyCharm
 
 ---
 
-`style`
+Jest
 
 ---
 
-`table` with attribute `style = " "`
+ChatGPT
 
 #### --answer--
 
-`scope`
+DOM inspector
 
 ### --question--
 
 #### --text--
 
-What does the `<input>` tag do?
+Which of the following attributes is used to specify the maximum number of characters allowed in an input field?
 
 #### --distractors--
 
-It allows users to enter any type of data.
+`getMaxLength`
 
 ---
 
-It is a pop-up box that asks user to enter data.
+`max`
 
 ---
 
-It can be only used inside a form to enter user input.
+`maximumLen`
 
 #### --answer--
 
-It defines a single line text field by default.
+`maxlength`
 
 ### --question--
 
 #### --text--
 
-Which one of these uses `<input>` inside a form to properly submit data?
+Which of the following is used to specify that an input field is read-only?
 
 #### --distractors--
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username"></input>
-    <input type="submit" value="Submit"></input>
-</form>
-```
+`readInputOnly`
 
 ---
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username" type="submit" value="Submit">
-</form>
-```
+`read-only`
 
 ---
 
-All of the other choices are correct.
+`only-read`
 
 #### --answer--
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username">
-    <input type="submit" value="Submit">
-</form>
-```
+`readonly`
 
 ### --question--
 
@@ -329,11 +305,11 @@ Which attribute specifies that an input must be filled out before submitting the
 
 ---
 
-`imp`
+`obligatory`
 
 ---
 
-It is not possible via HTML only.
+`essential`
 
 #### --answer--
 
@@ -343,153 +319,185 @@ It is not possible via HTML only.
 
 #### --text--
 
-How can you hide an input from the user?
+What are Devtools used for?
 
 #### --distractors--
 
-`<hidden></hidden>`
+These tools are built directly into the browser and they are used to spot any linting issues in your code.
 
 ---
 
-`<input type="text" hidden>`
+These tools are built directly into the browser and are used to automatically format your code.
 
 ---
 
-It is not possible via HTML.
+These tools are built directly into the browser and are used to help you ensure 100% test coverage for your code.
 
 #### --answer--
 
-`<input type="hidden" name="inputName" value="inputValue">`
+These tools are built directly into the browser and are used to help you debug, profile, and analyze web pages.
 
 ### --question--
 
 #### --text--
 
-What does the `target` attribute of a form do?
+Which of the following is the correct way to disable an input?
 
 #### --distractors--
 
-It specifies the variable we intend to change.
+```html
+<input type="checkbox" disabling /> 
+```
 
 ---
 
-It specifies different ways to store the response of the form.
+```html
+<input type="checkbox" inputDisabled /> 
+```
 
 ---
 
-It specifies different keyword searches.
+```html
+<input type="checkbox" disabledInput /> 
+```
 
 #### --answer--
 
-It indicates where to display the response after submitting the form.
+```html
+<input type="checkbox" disabled /> 
+```
 
 ### --question--
 
 #### --text--
 
-Which of the following `type` attributes for the `input` element is correct??
+Which of the following is a valid value for the `type` attribute?
 
 #### --distractors--
 
-`<input type="search">`
+```html
+<input type="time">
+```
 
 ---
 
-`<input type="range" min="" max="">`
+```html
+<input type="action">
+```
 
 ---
 
-`<input type="email">`
+```html
+<input type="capture">
+```
 
 #### --answer--
 
-All of the other choices.
+```html
+<input type="email">
+```
 
 ### --question--
 
 #### --text--
 
-What does the `action` attribute do?
+Which of the following is the correct use of the `size` attribute?
 
 #### --distractors--
 
-It works as the `submit` attribute.
+```html
+<input id="fullName" type="text" size=".001" />
+```
 
 ---
 
-It is used to collect data from the user.
+```html
+<input id="fullName" type="text" size="large" />
+```
 
 ---
 
-It defines the next steps to be taken.
+```html
+<input id="fullName" type="text" size="10vh" />
+```
 
 #### --answer--
 
-It defines where the form's response is sent.
+```html
+<input id="fullName" type="text" size="10" />
+```
 
 ### --question--
 
 #### --text--
 
-How can you define the length of an input?
+Which of the following attributes is used to specify the minimum number of characters required in an input field?
 
 #### --distractors--
 
-It is not possible.
+`minlen`
 
 ---
 
-`<input length="15">`
+`Mlength`
 
 ---
 
-`<input len="15">`
+`minimumLen`
 
 #### --answer--
 
-`<input minlength="3" maxlength="15">`
+`minlength`
 
 ### --question--
 
 #### --text--
 
-How can you remove form validation?
+Which of the following button examples does **NOT** use a correct value for the `type` attribute?
 
 #### --distractors--
 
-`<input type="button" formnovalidate>`
+```html
+<button type="submit">Submit</button>
+```
 
 ---
 
-`<button type="button" formnovalidate></button>`
+```html
+<button type="button">Example Button</button>
+```
 
 ---
 
-`<input type="text" formnovalidate>`
+```html
+<button type="reset">Reset</button>
+```
 
 #### --answer--
 
-`<button type="submit" formnovalidate></button>`
+```html
+<button type="btn">Example Btn</button>
+```
 
 ### --question--
 
 #### --text--
 
-Which attribute is used to associate a label with an input?
+Which attribute is used to specify the value for a button?
 
 #### --distractors--
 
-`des`
+`buttonValue`
 
 ---
 
-`to`
+`val`
 
 ---
 
-`describe`
+`btnVal`
 
 #### --answer--
 
-`for`
+`value`
 
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 9cfe16961e..0dfe06296f 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
@@ -460,7 +460,7 @@ The subclass cannot create new instances.
 
 #### --answer--
 
-The superclass’s constructor will be used by default.
+The superclass's constructor will be used by default.
 
 ### --question--
 
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 1f529807fd..04ccf94347 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
@@ -117,7 +117,7 @@ const person = {
 
 #### --text--
 
-Which of the following property key can only be used with a bracket notation as opposed to dot notation?
+Which of the following property keys can only be used with a bracket notation as opposed to dot notation?
 
 #### --distractors--
 
@@ -425,19 +425,19 @@ Which of the following is true for an object sealed with `Object.seal`?
 
 #### --distractors--
 
-Values of existing properties cannot be changed
+Values of existing properties cannot be changed.
 
 ---
 
-Values of existing properties can be changed but doing this will unseal the object
+Values of existing properties can be changed but doing this will unseal the object.
 
 ---
 
-New properties can be added but existing properties can not be removed
+New properties can be added but existing properties can not be removed.
 
 #### --answer--
 
-New properties cannot be added and existing properties cannot be removed
+New properties cannot be added and existing properties cannot be removed.
 
 ### --question--
 
@@ -447,19 +447,19 @@ Which of the following is true for an object frozen with `Object.freeze`?
 
 #### --distractors--
 
-New properties can be added but existing properties can not be removed
+New properties can be added but existing properties can not be removed.
 
 ---
 
-New properties can be added but doing this will unfreeze the object
+New properties can be added but doing this will unfreeze the object.
 
 ---
 
-Values of existing properties can be changed but doing this will unfreeze the object
+Values of existing properties can be changed but doing this will unfreeze the object.
 
 #### --answer--
 
-Values of existing properties cannot be changed
+Values of existing properties cannot be changed.
 
 ### --question--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
index 7128948cae..3ba595809d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
@@ -89,7 +89,7 @@ An object containing information about the (sub)string the regular expression ma
 
 ---
 
-Null, the method `test` only validates if the given regular expression is valid.
+`null`, the method `test` only validates if the given regular expression is valid.
 
 #### --answer--
 
@@ -305,7 +305,7 @@ The lookbehind should be placed to the left of the main pattern of the regular e
 
 #### --text--
 
-Which quantifier matches preceding element zero or one times?
+Which quantifier matches the preceding element zero or one times?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
index f678caf28f..b8c343bfbe 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
@@ -21,19 +21,19 @@ What is the return value for the `includes()` method?
 
 #### --distractors--
 
-If the substring is found within the string, the method returns the string otherwise, it returns `undefined`.
+If the substring is found within the string, the method returns the string. Otherwise, it returns `undefined`.
 
 ---
 
-If the substring is found within the string, the method returns `true` otherwise, it returns and empty string.
+If the substring is found within the string, the method returns `true`. Otherwise, it returns an empty string.
 
 ---
 
-If the substring is found within the string, the method returns the string otherwise, it returns `null`.
+If the substring is found within the string, the method returns the string. Otherwise, it returns `null`.
 
 #### --answer--
 
-If the substring is found within the string, the method returns `true` otherwise, it returns `false`.
+If the substring is found within the string, the method returns `true`. Otherwise, it returns `false`.
 
 ### --question--
 
@@ -165,7 +165,7 @@ It displays a confirmation box with a message.
 
 #### --answer--
 
-It displays a dialog box that prompts the user for input.
+It displays a dialog box that waits for the user input.
 
 ### --question--
 
@@ -205,7 +205,7 @@ developer[2];
 
 #### --text--
 
-How can you obtain the ASCII index of a character in a string?
+How can you obtain the ASCII value of a character in a string?
 
 #### --distractors--
 
@@ -309,23 +309,23 @@ How can you check if the string `"JavaScript"` contains a specific substring?
 
 #### --text--
 
-Which method extracts a substring from the string `"JavaScript"`?
+Which of the following extracts the substring `"Script"` from the string `"JavaScript"`?
 
 #### --distractors--
 
-`"JavaScript".remove()`
+`"JavaScript".remove(3)`
 
 ---
 
-`"JavaScript".extract()`
+`"JavaScript".extract(4)`
 
 ---
 
-`"JavaScript".cut()`
+`"JavaScript".cut(3)`
 
 #### --answer--
 
-`"JavaScript".slice()`
+`"JavaScript".slice(4)`
 
 ### --question--
 
@@ -463,7 +463,7 @@ How do you remove whitespace from the beginning and end of a string?
 
 #### --text--
 
-Which of the following is the correct syntax for escaping strings?
+Which of the following is the correct syntax for escaping quotes?
 
 #### --distractors--
 
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 9d37ab0df0..26f2f65df7 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
@@ -51,7 +51,7 @@ Which of the following is NOT a JavaScript data type?
 
 ---
 
-`bigint`
+`bigInt`
 
 #### --answer--
 
@@ -87,19 +87,19 @@ Which of the following is a conventional variable name in JavaScript?
 
 #### --distractors--
 
-`let my_var;`
+`my_var;`
 
 ---
 
-`let my-var;`
+`my-var;`
 
 ---
 
-`let MyVar;`
+`MyVar;`
 
 #### --answer--
 
-`let myVar;`
+`myVar;`
 
 ### --question--
 
@@ -109,11 +109,11 @@ What is the difference between `let` and `const` variable declarations in JavaSc
 
 #### --distractors--
 
-`let` is block scoped, `const` is not.
+`const` cannot be re-assigned nor re-declared. `let` can be re-assigned and re-declared.
 
 ---
 
-`const` is block scoped, `let` is not.
+`const` can be re-assigned and re-declared. `let` cannot be re-assigned nor re-declared.
 
 ---
 
@@ -127,23 +127,28 @@ What is the difference between `let` and `const` variable declarations in JavaSc
 
 #### --text--
 
-What is the difference between local and global scope in JavaScript?
+What would be the outcome of the following code?
+
+```js
+let name = "Andy";
+name[0] = "M";
+```
 
 #### --distractors--
 
-Variables declared in local scope can be accessed from anywhere in the program.
+The value of `name` would be `"MAndy"`.
 
 ---
 
-Variables declared in global scope can only be accessed from inside a function.
+The value of `name` would be `"Mndy"`.
 
 ---
 
-Variables declared in global scope cannot be re-declared.
+The value of `name` would still be `"Andy"`.
 
 #### --answer--
 
-Variables declared in global scope can be accessed from anywhere in the program.
+It would throw an error.
 
 ### --question--
 
@@ -193,7 +198,7 @@ Adds the string `world` to the variable `hello`, and prints it out in the consol
 
 #### --answer--
 
-Creates a third empty string, copies the values of both strings to it, and finally reassigns the `hello` variable to the third string and prints it out in the console.
+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.
 
 ### --question--
 
@@ -375,32 +380,23 @@ Which of the following declares a variable in JavaScript that cannot be changed?
 
 #### --text--
 
-In the code below, which variable is in the global scope in JavaScript:
-
-```js
-let a = 0;
-
-if (a < 10) {
-  let b = 1;
-  return a + b;
-}
-```
+Which of the following is a valid variable name in JavaScript?
 
 #### --distractors--
 
-Variable `b` is in the global scope.
+`tart@n`
 
 ---
 
-Both variables `a` and `b` are in the global scope.
+`4cats`
 
 ---
 
-None of the variables are in the global scope.
+`!!dogs`
 
 #### --answer--
 
-Variable `a` is in the global scope, and can be accessed from anywhere in the program.
+`$number`
 
 ### --question--
 
@@ -428,79 +424,65 @@ Which of the following is NOT a valid string concatenation method in JavaScript?
 
 #### --text--
 
-What will be the output of the following code:
-
-```js
-let hello = "hello";
-if (true) {
-  let world = "world";
-}
-console.log(hello + " " + world);
-```
+Which of the following variable names uses camelCase correctly?
 
 #### --distractors--
 
-`hello world`
+`a_long_variable_name`
 
 ---
 
-`helloworld`
+`alongvariableName`
 
 ---
 
-`hello`
+`ALongVariableName`
 
 #### --answer--
 
-`ReferenceError: world is not defined`
+`aLongVariableName`
 
 ### --question--
 
 #### --text--
 
-What will be the output of the code below:
-
-```js
-const x = 0;
-while (x < 10) x++;
-console.log(x);
-```
+Which chatacter JavaScript uses to mark the end of a statement?
 
 #### --distractors--
 
-`10`
+`:`
 
 ---
 
-`0`
+`,`
 
 ---
 
-`1 2 3 4 5 6 7 8 9 10`
+`.`
 
 #### --answer--
 
-`TypeError: Assignment to constant variable.`
+`;`
 
 ### --question--
 
 #### --text--
 
-Given the string `freeCodeLamp`, which JavaScript string method can be used to turn it into `freeCodeCamp`?
+Which of the following is NOT a JavaScript data type?
 
 #### --distractors--
 
-`"freeCodeLamp"[8] = "C";`
+`Symbol`
 
 ---
 
-`"freeCodeLamp".charAt(8) = "C";`
+`Boolean`
 
 ---
 
-`"freeCodeLamp".indexOf("L") = "C";`
+`Null`
 
 #### --answer--
 
-`"freeCodeLamp".replace("L", "C");`
+`Float`
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
index 7579004a67..9ea0ef0e53 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
@@ -153,7 +153,7 @@ What is a typical use case of the `ruby` element?
 
 #### --distractors--
 
-It specifies the document’s character encoding.
+It specifies the document's character encoding.
 
 ---
 
@@ -201,7 +201,7 @@ It styles text with custom fonts.
 
 ---
 
-It specifies the document’s character encoding.
+It specifies the document's character encoding.
 
 ---
 
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 19470e6d1b..9e01e081b0 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
@@ -47,7 +47,7 @@ It makes the text input focusable with a keyboard.
 
 ---
 
-It hides the input’s placeholder text.
+It hides the input's placeholder text.
 
 ---
 
@@ -55,7 +55,7 @@ It removes the default browser styling for inputs.
 
 #### --answer--
 
-It ensures padding and borders are included in the element’s width and height.
+It ensures padding and borders are included in the element's width and height.
 
 ### --question--
 
@@ -77,7 +77,7 @@ It automatically adjusts the font size.
 
 #### --answer--
 
-It ensures the input doesn’t stretch too wide on larger screens.
+It ensures the input doesn't stretch too wide on larger screens.
 
 ### --question--
 
@@ -87,7 +87,7 @@ Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-It hides the input’s border.
+It hides the input's border.
 
 ---
 
@@ -289,7 +289,7 @@ When you want to fully customize the form control's style.
 
 ---
 
-When the browser’s default styles are hard to override.
+When the browser's default styles are hard to override.
 
 ---
 
@@ -417,7 +417,7 @@ What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-It improves the form’s overall accessibility.
+It improves the form's overall accessibility.
 
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
index 516dc86d30..e9e7d19999 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
@@ -13,12 +13,28 @@ Review the concepts below to prepare for the upcoming quiz.
 
 - **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
 - **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors.
+
+Here is the general syntax of a CSS rule:
+
+```css
+selector {
+    property: value;
+}
+```
+
 - **`meta name="viewport"` Element**: This `meta` element gives the browser instructions on how to control the page's dimensions and scaling on different devices, particularly on mobile phones and tablets.
 - **Default Browser Styles**: Each HTML element will have default browser styles applied to them. This usually includes items like default margins and paddings.
 
 ## Inline, Internal, and External CSS
 
 - **Inline CSS**: These styles are written directly within an HTML element using the `style` attribute. Most of the time you will not be using inline CSS due to separation of concerns.
+
+Here is an example of inline CSS:
+
+```html
+<p style="color: red;">This is a red paragraph.</p>
+```
+
 - **Internal CSS**: These styles are written within the `<style>` tags inside the `<head>` section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
 - **External CSS**: These styles are written in a separate CSS file and linked to the HTML document using the `<link>` element in the `<head>` section. For most projects, you will use an external CSS file over internal or inline CSS.
 
@@ -68,7 +84,7 @@ ul li {
 }
 ```
 
-- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follow the `h2` element.
+- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
 
 ```html
 <h2>I am a sub heading</h2>
@@ -113,6 +129,8 @@ ul ~ p {
 
 - **`margin` Property**: This property is used to apply space outside the element, between the element's border and the surrounding elements.
 - **`padding` Property**: This property is used to apply space inside the element, between the content and its border.
+- **`margin` Shorthand**: The `margin` property can be set using the shorthand syntax, which allows you to set the margin for all four sides of an element at once. The values are applied in the order `top`, `right`, `bottom`, `left`.
+- **`padding` Shorthand**: The `padding` property can also be set using the shorthand syntax, which allows you to set the padding for all four sides of an element at once. The values are applied in the order `top`, `right`, `bottom`, `left`.
 
 ## CSS Specificity
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
index 07d30165b2..874ee70ae2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
@@ -12,7 +12,9 @@ Review the concepts below to prepare for the upcoming quiz.
 ## HTML Basics
 
 - **Role of HTML**: Foundation of web structure.
-- **Block-level elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold over HTML elements.
+- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `<h1></h1>`, `<p></p>`).
+- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold over HTML elements.
+- **Void Elements**: Do not have a closing tag (e.g., `<img>`).
 - **Attributes**: Adding metadata and behavior to elements.
 
 ## Identifiers and Grouping
@@ -28,12 +30,12 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Boilerplate and Encoding
 
-- **HTML boilerplate**: Basic structure of a webpage.
+- **HTML boilerplate**: Basic structure of a webpage, which includes the `DOCTYPE`, `html`, `head`, and `body` elements. It should be used as the starting point for an HTML document.
 - **UTF-8 character encoding**: Ensuring universal character display.
 
 ## SEO and Social Sharing
 
-- **Meta tags (`description`)**: How it impacts SEO.
+- **Meta tags (`description`)**: Providing a short description for the web page and impacting SEO.
 - **Open Graph tags**: Enhancing social media sharing.
 
 ## Media Elements and Optimization
@@ -54,7 +56,6 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Absolute vs. relative paths**: Navigating directories.
 - **Path syntax**: Understanding `/`, `./`, `../` for file navigation.
 - **Link states**: Managing different link interactions (hover, active).
-- **Inline vs. block-level links**: Layout and behavior differences.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
index a2beaedae0..6c425c284b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
@@ -16,7 +16,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Best Practices With CSS and Accessibility
 
-- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
+- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won't be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
 - **`visibility: hidden;`**: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.
 - **`.sr-only` CSS class**: This is a common technique used to visually hide content while keeping it accessible to screen readers.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
index 17aab21604..24c85a1f04 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
@@ -1,6 +1,6 @@
 ---
 id: 671a88d636cebc5fbd407b78
-title: CSS Backgrounds and Borders Review
+title: Lists, Links, CSS Background and Borders Review
 challengeType: 24
 dashedName: review-css-backgrounds-and-borders
 ---
@@ -16,6 +16,12 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`list-style-position` Property**: This property is used to set the position for the list marker. The only two acceptable values are inside and outside.
 - **`list-style-image` Property**: This property is used to use an image for the list item marker. A common use case is to use the `url` function with a value set to a valid image location.
 
+## Spacing list items using `margin`
+
+- Apart from `line-height`, margins can also be used in CSS to enhance the spacing and readability of list items.
+- Margins create space outside each `<li>` element, allowing control over the gap between list items.
+- `margin-bottom` is used to create space below each list item. For example, `margin-bottom: 10px;` will create a 10-pixel gap below each list item.
+
 ## Styling Links
 
 - **`pseudo-class`**: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the `:hover`, `:visited` and `:focus` states.
@@ -27,10 +33,10 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Working with Backgrounds and Borders
 
-- **`background-size` Property**: This property is used to set the background size for an element.
-- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. You can also specify that there should be no repeat by using the `no-repeat` property.
-- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword value.
-- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place.
+- **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element.
+- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat` meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` property.
+- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword values like `top`, `bottom`, `left`, `right`, and `center`.
+- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are `scroll` (default), where the background image scrolls with the content, and `fixed`, where the background image stays in the same position on the screen.
 - **`background-image` Property**: This property is used to set the background image of an element. You can set multiple background images at the same time and use either the `url`, `radial-gradient` or `linear-gradient` functions as values.
 - **`background` Property**: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: `background: no-repeat url("example-url-goes-here");`
 - **Good Contrast for Background and Foreground Colors**: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
@@ -43,6 +49,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`border-left` Property**: This property is used to set the styles for the left border of an element. `border-left: 4px dotted orange;` sets a 4-pixel-wide dotted orange border on the left side of the element.
 - **`border` Property**: This is the shorthand property for setting the width, style, and color of an element's border. `border: 1px solid black;` sets a 1-pixel-wide solid black border.
 - **`border-radius` Property**: This property is used to create rounded corners for an element's border.
+- **`border-style` Property**: This property is used to set the style of an element's border. Some accepted values include `solid`, `dashed`, `dotted`, and `double`.
 
 ## Gradients
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
index f96930b45c..a14acbae2c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
@@ -16,7 +16,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## The `flex-direction` Property
 
-- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser's default language (left to right or right to left).
 - **`flex-direction: row-reverse;`**: This reverses the items in the row.
 - **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
 - **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
@@ -24,7 +24,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## The `flex-wrap` Property
 
 - **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
-- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won't be wrapped onto a new line, even if their width exceed the container's width.
 - **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
 - **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
 - **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
index 41467db42f..5fb9d6edf0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
@@ -34,7 +34,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
index 3d30ed302e..ca255cbb7d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
@@ -35,7 +35,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 - **Descendant Combinator**: This combinator is used to target elements that are descendants of a specified parent element. The following example will target all `li` items inside `ul` elements.
 - **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. The following example will target all `p` elements that are direct children of the `container` class.
-- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follow the `h2` element.
+- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
 
 - **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent.
 
@@ -157,7 +157,7 @@ Review the concepts below to prepare for the upcoming exam.
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited.
@@ -285,7 +285,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## The `flex-direction` Property
 
-- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser's default language (left to right or right to left).
 - **`flex-direction: row-reverse;`**: This reverses the items in the row.
 - **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
 - **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
@@ -293,7 +293,7 @@ Review the concepts below to prepare for the upcoming exam.
 ## The `flex-wrap` Property
 
 - **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
-- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won't be wrapped onto a new line, even if their width exceed the container's width.
 - **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
 - **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
 - **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
@@ -373,7 +373,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## Best Practices With CSS and Accessibility
 
-- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
+- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won't be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
 - **`visibility: hidden;`**: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.
 - **`.sr-only` CSS class**: This is a common technique used to visually hide content while keeping it accessible to screen readers.
 - **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
index d0820b9388..5bf0e7b4f4 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
@@ -36,7 +36,7 @@ const developerObj = {
 developerObj.map()
 ```
 
-- **RangeError**: These errors happen when your code tries to use a value that’s outside the range of what JavaScript can handle.
+- **RangeError**: These errors happen when your code tries to use a value that's outside the range of what JavaScript can handle.
 
 ```js
 const arr = [];
@@ -58,7 +58,7 @@ function validateNumber(input) {
 
 ## `try...catch...finally`
 
-- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It’s commonly used for cleanup tasks, such as closing files or releasing resources.
+- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It's commonly used for cleanup tasks, such as closing files or releasing resources.
 
 ```js
 function processInput(input) {
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
index 021d0ab750..bce084bcbb 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
@@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
 - **Browser APIs**: These APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.
 - **Third-Party APIs**: These are not built into the browser by default. You have to retrieve their code in some way. Usually, they will have detailed documentation explaining how to use their services. An example is the Google Maps API, which you can use to display interactive maps on your website.
-- **DOM**: The DOM stands for Document Object Model. It’s a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It’s the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
+- **DOM**: The DOM stands for Document Object Model. It's a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It's the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
 - **`navigator` Interface**: This provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used.
 - **`window` Interface**: This represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
index 023f056019..9c220360ea 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Validating Forms with JavaScript
 
-- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user’s provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
+- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
 - **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
 
 ```js
@@ -63,7 +63,7 @@ button.addEventListener('click',(event) => {
 ## Submitting Forms
 
 - **Definition**: There are three ways a form can be submitted. The first is when the user clicks a button in the form which has the `type` attribute set to `submit`. The second is when the user presses the `Enter` key on any editable `input` field in the form. The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the `form` element.
-- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page’s URL.
+- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page's URL.
 
 ```js
 <form action="https://freecodecamp.org">
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
index c8acd9c2f3..1d5d0cda92 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
@@ -15,11 +15,11 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Assistive Technology for Accessibility
 
-- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
-- **Large text or braille keyboards**: used by people with visual impairments to access the web.
-- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
-- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
-- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
+- **Screen readers**: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
+- **Large text or braille keyboards**: Used by people with visual impairments to access the web.
+- **Screen magnifiers**: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
+- **Alternative pointing devices**: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
+- **Voice recognition**: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
 
 ## Accessibility Auditing Tools
 
@@ -27,26 +27,26 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Accessibility Best Practices
 
-- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using screen readers and other assistive technologies understand the content of your website.
-- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using screen readers and other assistive technologies understand the structure of the table.
-- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using screen readers and other assistive technologies understand the purpose of the input.
-- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using screen readers and other assistive technologies understand the content of the image.
-- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using screen readers and other assistive technologies understand the purpose of the link.
+- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using assistive technologies understand the content of your website.
+- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using assistive technologies understand the structure of the table.
+- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using assistive technologies understand the purpose of the input.
+- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using assistive technologies understand the content of the image.
+- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using assistive technologies understand the purpose of the link.
 - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
-- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
-- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
+- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
+- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
 
 ## WAI-ARIA, Roles, and Attributes
 
-- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
-- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps people using screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
+- **Aria roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps people using assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
 - **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
 - **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
-- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
-- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
-- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using screen readers and other assistive technologies understand the content of the website.
-- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps people using screen readers and other assistive technologies understand the relationship between the elements.
-- **`aria-describedby` attribute**: used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
+- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.
+- **`aria-live` attribute**: Used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
+- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using assistive technologies understand the content of the website.
+- **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps people using assistive technologies understand the relationship between the elements.
+- **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-html/671a883163d5ab5d47145880.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-html/671a883163d5ab5d47145880.md
index fac86631c6..441b546c86 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-html/671a883163d5ab5d47145880.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-html/671a883163d5ab5d47145880.md
@@ -11,8 +11,10 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## HTML Basics
 
-- **Role of HTML**: HTML represents the content and structure of a webpage.
-- **`div` Element**: The `div` element is a block-level element used for grouping content.
+- **Role of HTML**: Foundation of web structure.
+- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `<h1></h1>`, `<p></p>`).
+- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
+- **Void Elements**: Do not have a closing tag (e.g., `<img>`).
 - **Attributes**: Adding metadata and behavior to elements.
 
 ## Identifiers and Grouping
@@ -28,12 +30,12 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Boilerplate and Encoding
 
-- **HTML boilerplate**: This boilerplate includes the `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements. It should be used as the starting point for an HTML document.
+- **HTML boilerplate**: Basic structure of a webpage, which includes the `DOCTYPE`, `html`, `head`, and `body` elements. It should be used as the starting point for an HTML document.
 - **UTF-8 character encoding**: Ensuring universal character display.
 
 ## SEO and Social Sharing
 
-- **Meta tags (`description`)**: Describing page content.
+- **Meta tags (`description`)**: Providing a short description for the web page and impacting SEO.
 - **Open Graph tags**: Enhancing social media sharing.
 
 ## Media Elements and Optimization
@@ -45,8 +47,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Multimedia Integration
 
-- **HTML audio and video elements**: The `audio` element is used to embed audio content in a webpage, while the `video` element is used to embed video content.
-- **Embedding with `<iframe>`**: If you want to embed content from another site, like YouTube, you can use the `iframe` element.
+- **HTML audio and video elements**: Embedding multimedia.
+- **Embedding with `<iframe>`**: Integrating external video content.
 
 ## Paths and Link Behavior
 
@@ -54,7 +56,6 @@ Review the concepts below to prepare for the upcoming prep exam.
 - **Absolute vs. relative paths**: Navigating directories.
 - **Path syntax**: Understanding `/`, `./`, `../` for file navigation.
 - **Link states**: Managing different link interactions (hover, active).
-- **Inline vs. block-level links**: Links by default are inline elements. You can turn a link into a block-level link by placing it inside a block-level element like a paragraph element.
 
 ## Importance of Semantic HTML
 
@@ -64,62 +65,62 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Semantic HTML Elements
 
-- **Emphasis (`em`) element**: marks text that has stress emphasis.
-- **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
-- **Strong Importance (`strong`) element**: marks text that has strong importance.
-- **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content.
-- **Description List (`dl`) element**: used to represent a list of term-description groupings.
-- **Description Term (`dt`) element**: used to represent the term being defined.
-- **Description Details (`dd`) element**: used to represent the description of the term.
-- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source.
-- **Inline Quotation (`q`) element**: used to represent a short inline quotation.
-- **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym.
-- **Contact Address (`address`) element**: used to represent the contact information.
-- **(Date) Time (`time`) element**: used to represent a date and/or time.
-- **Superscript (`sup`) element**: used to represent superscript text.
-- **Subscript (`sub`) element**: used to represent subscript text.
-- **Inline Code (`code`) element**: used to represent a fragment of computer code.
-- **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-- **Ruby Annotation (`ruby`) element**: used to represent the text of a ruby annotation.
-- **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
+- **Emphasis (`em`) element**: Marks text that has stress emphasis.
+- **Idiomatic Text (`i`) element**: Used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
+- **Strong Importance (`strong`) element**: Marks text that has strong importance.
+- **Bring Attention To (`b`) element**: Used to bring attention to text that is not important for the meaning of the content.
+- **Description List (`dl`) element**: Used to represent a list of term-description groupings.
+- **Description Term (`dt`) element**: Used to represent the term being defined.
+- **Description Details (`dd`) element**: Used to represent the description of the term.
+- **Block Quotation (`blockquote`) element**: Used to represent a section that is quoted from another source.
+- **Inline Quotation (`q`) element**: Used to represent a short inline quotation.
+- **Abbreviation (`abbr`) element**: Used to represent an abbreviation or acronym.
+- **Contact Address (`address`) element**: Used to represent the contact information.
+- **(Date) Time (`time`) element**: Used to represent a date and/or time.
+- **Superscript (`sup`) element**: Used to represent superscript text.
+- **Subscript (`sub`) element**: Used to represent subscript text.
+- **Inline Code (`code`) element**: Used to represent a fragment of computer code.
+- **Unarticulated Annotation (`u`) element**: Used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+- **Ruby Annotation (`ruby`) element**: Used to represent the text of a ruby annotation.
+- **Strikethrough (`s`) element**: Used to represent content that is no longer accurate or relevant.
 
 ## HTML form elements and attributes
 
-- **`form` element**: used to create an HTML form for user input.
-- **`action` attribute**: used to specify the URL where the form data should be sent.
-- **`input` element**: used to create an input field for user input.
-- **`type` attribute**: used to specify the type of input field. Ex. text, password, email, etc.
-- **`label` element**: used to create a label for an input field.
-- **`for` attribute**: used to specify which input field the label is for.
-- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
-- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
-- **`placeholder` attribute**: used to specify a short hint that describes the expected value of an input field.
-- **`button` element**: used to create a clickable button. Ex. submit, reset, button.
-- **`value` attribute**: used to specify the value of the button.
-- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
-- **`size` attribute**: used to specify the width of an input field.
-- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
-- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
-- **`disabled` attribute**: used to specify that an input field should be disabled.
-- **`readonly` attribute**: used to specify that an input field is read-only.
-- **Focused state**: this is the state of an input field when it is selected by the user.
+- **`form` element**: Used to create an HTML form for user input.
+- **`action` attribute**: Used to specify the URL where the form data should be sent.
+- **`input` element**: Used to create an input field for user input.
+- **`type` attribute**: Used to specify the type of input field. Ex. text, password, email, etc.
+- **`label` element**: Used to create a label for an input field.
+- **`for` attribute**: Used to specify which input field the label is for.
+- **Implicit form association**: Inputs can be associated with labels by wrapping the input field inside the `label` element.
+- **Explicit form association**: Inputs can be associated with labels by using the `for` attribute on the `label` element.
+- **`placeholder` attribute**: Used to specify a short hint that describes the expected value of an input field.
+- **`button` element**: Used to create a clickable button. Ex. submit, reset, button.
+- **`value` attribute**: Used to specify the value of the button.
+- **`required` attribute**: Used to specify that an input field must be filled out before submitting the form.
+- **`size` attribute**: Used to specify the width of an input field.
+- **`minlength` attribute**: Used to specify the minimum number of characters required in an input field.
+- **`maxlength` attribute**: Used to specify the maximum number of characters allowed in an input field.
+- **`disabled` attribute**: Used to specify that an input field should be disabled.
+- **`readonly` attribute**: Used to specify that an input field is read-only.
+- **Focused state**: This is the state of an input field when it is selected by the user.
 
 ## HTML Table elements and attributes
 
-- **Table element**: used to create an HTML table.
-- **Table Head (`thead`) element**: used to group the header content in an HTML table.
-- **Table Row (`tr`) element**: used to create a row in an HTML table.
-- **Table Header (`th`) element**: used to create a header cell in an HTML table.
-- **`colspan` attribute**: used to specify the number of columns a header cell should span.
-- **Table body (`tbody`) element**: used to group the body content in an HTML table.
-- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
-- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
+- **Table element**: Used to create an HTML table.
+- **Table Head (`thead`) element**: Used to group the header content in an HTML table.
+- **Table Row (`tr`) element**: Used to create a row in an HTML table.
+- **Table Header (`th`) element**: Used to create a header cell in an HTML table.
+- **`colspan` attribute**: Used to specify the number of columns a header cell should span.
+- **Table body (`tbody`) element**: Used to group the body content in an HTML table.
+- **Table Data Cell (`td`) element**: Used to create a data cell in an HTML table.
+- **Table Foot (`tfoot`) element**: Used to group the footer content in an HTML table.
 
 ## HTML Tools
 
-- **HTML validator**: a tool that checks the syntax of HTML code to ensure it is valid.
-- **DOM inspector**: a tool that allows you to inspect and modify the HTML structure of a web page.
-- **Devtools**: a set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
+- **HTML validator**: A tool that checks the syntax of HTML code to ensure it is valid.
+- **DOM inspector**: A tool that allows you to inspect and modify the HTML structure of a web page.
+- **Devtools**: A set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
 
 ## Introduction to Accessibility
 
@@ -127,11 +128,11 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Assistive Technology for Accessibility
 
-- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
-- **Large text or braille keyboards**: used by people with visual impairments to access the web.
-- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
-- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
-- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
+- **Screen readers**: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
+- **Large text or braille keyboards**: Used by people with visual impairments to access the web.
+- **Screen magnifiers**: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
+- **Alternative pointing devices**: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
+- **Voice recognition**: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
 
 ## Accessibility Auditing Tools
 
@@ -139,26 +140,26 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Accessibility Best Practices
 
-- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps screen readers and other assistive technologies understand the content of your website.
-- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps screen readers and other assistive technologies understand the structure of the table.
-- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps screen readers and other assistive technologies understand the purpose of the input.
-- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps screen readers and other assistive technologies understand the content of the image.
-- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps screen readers and other assistive technologies understand the content of the link.
+- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps assistive technologies understand the content of your website.
+- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps assistive technologies understand the structure of the table.
+- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps assistive technologies understand the purpose of the input.
+- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps assistive technologies understand the content of the image.
+- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps assistive technologies understand the purpose of the link.
 - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
-- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
-- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
+- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
+- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
 
 ## WAI-ARIA, Roles, and Attributes
 
-- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
-- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
-- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
-- **`aria-hidden` attribute**: Used to hide an element from assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
-- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
-- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
-- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help screen readers and other assistive technologies understand the content of the website.
-- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps screen readers and other assistive technologies understand the relationship between the elements.
-- **`aria-describedby` attribute**: used to associate an element with another element that describes it. This helps screen readers and other assistive technologies understand the purpose of the element.
+- **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
+- **Aria roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
+- **`aria-hidden` attribute**: Used to hide an element from assistive technologies such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
+- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.
+- **`aria-live` attribute**: Used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
+- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help assistive technologies understand the content of the website.
+- **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps assistive technologies understand the relationship between the elements.
+- **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This helps assistive technologies understand the purpose of the element.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
index e84ae23c5c..8c3f6af11a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
@@ -76,7 +76,7 @@ console.log(second); // "banana"
 console.log(third); // "orange"
 ```
 
-- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven’t been destructured into a new array.
+- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven't been destructured into a new array.
 
 ```js
 const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
index 425c938655..0ba5228a9d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
@@ -36,9 +36,9 @@ function pauseAudio() {
 ## Different Audio and Video Formats
 
 - **MIME type**: A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type. The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
-- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user’s current environment.
+- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user's current environment.
 - **MP3**: This is a type of digital file format used to store music, audio, or sound. It's a compressed version of a sound recording that makes the file size smaller, so it's easier to store and share. An MP3 file has the MIME type audio/mp3
-- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it’s a video file or audio-only.
+- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it's a video file or audio-only.
 
 ## codecs
 
@@ -50,7 +50,7 @@ function pauseAudio() {
 
 ## Media Capture and Streams API
 
-- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user’s hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
+- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
 
 ```js
 window.navigator.mediaDevices.getUserMedia({
@@ -72,7 +72,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Screen Capture API
 
-- **Definition**: The Screen Capture API is used to record a user’s screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+- **Definition**: The Screen Capture API is used to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
 
 ## MediaStream Recording API
 
@@ -80,7 +80,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Media Source Extensions API
 
-- **topic**: The Media Source Extensions API is what allows you to directly pass a user’s webcam feed to a video element with the `srcObject` property.
+- **topic**: The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property.
 
 ## Web Audio API
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
index 497f523801..bac65e3eef 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
@@ -38,7 +38,7 @@ selectEl.addEventListener("change", (e) => {
 
 ## Event Bubbling
 
-- **Definition**: Event bubbling, or propagation, refers to how an event “bubbles up” to parent objects when triggered.
+- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
 
 ## Event Delegation
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
index 6af2aefde7..2852de734d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
@@ -152,7 +152,7 @@ const num = 4;
 console.log(-num); // -4
 ```
 
-- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it’s `false`, it becomes `true`. 
+- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`. 
 
 ## Bitwise Operators
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
index 9b25149e70..d401947daf 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Regular Expressions and Common Methods
 
-- **Definition**: Regular Expressions, or Regex, are used to create a “pattern”, which you can then use to check against a string, extract text, and more.
+- **Definition**: Regular Expressions, or Regex, are used to create a "pattern", which you can then use to check against a string, extract text, and more.
 
 ```js
 const regex = /freeCodeCamp/;
@@ -65,7 +65,7 @@ for (let match of iterator) {
 
 ## Regular Expression Modifiers
 
-- **Definition**: Modifiers, often referred to as “flags”, modify the behavior of a regular expression.
+- **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression.
 - **`i` Flag**: This flag makes a regex ignore case.
 
 ```js
@@ -82,7 +82,7 @@ console.log(regex.test("freeCodeCamp")); // true
 console.log(regex.test("freeCodeCamp is great")); // false
 ```
 
-- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says “match the start of the string”. The `$` anchor, at the end of the regular expression, says “match the end of the string”.
+- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string".
 
 ```js
 const start = /^freeCodeCamp/i;
@@ -194,7 +194,7 @@ const regex = /^\d{4}$/;
 
 ## Capturing Groups and Backreferences
 
-- **Capturing Groups**: A capturing group allows you to “capture” a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+- **Capturing Groups**: A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
 
 ```js
 const regex = /free(code)camp/i;
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
index 562fab5a8f..b1519c457b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
@@ -62,7 +62,7 @@ console.log(char);  // A
 ## Other Common String Methods
 
 - **The `indexOf` Method**: This method is used to search for a substring within a string. If the substring is found, `indexOf` returns the index (or position) of the first occurrence of that substring. If the substring is not found, `indexOf` returns -1, which indicates that the search was unsuccessful.
-- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.
+- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true. Otherwise, it returns false.
 - **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
 - **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
 - **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
index a43eadb8af..27b76f9cce 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
@@ -15,7 +15,7 @@ While HTML and CSS provide website structure, JavaScript brings interactivity to
 
 ## Data Types in JavaScript
 
-Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else.
+Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
 
 - **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
 - **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
@@ -80,7 +80,7 @@ const cityName = 'New York';
 cityName = 'Los Angeles'; // TypeError: Assignment to constant variable.
 ```
 
-- Variables declared using `const` find uses in declaring constants, that are not allowed to change through out the code, such as `PI` or `MAX_SIZE`.
+- Variables declared using `const` find uses in declaring constants, that are not allowed to change throughout the code, such as `PI` or `MAX_SIZE`.
 
 ## Variable Naming Conventions
 
@@ -201,7 +201,7 @@ let isLoggedin = true;
 console.log(typeof isLoggedin); // boolean
 ```
 
-- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
+- However, there's a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
 
 ```js
 let user = null;
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
index a7e99d583a..3343a69ca7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
@@ -16,7 +16,7 @@ While HTML and CSS provide website structure, JavaScript brings interactivity to
 
 ## Data Types in JavaScript
 
-Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else.
+Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
 
 - **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
 - **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
@@ -202,7 +202,7 @@ let isLoggedin = true;
 console.log(typeof isLoggedin); // boolean
 ```
 
-- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
+- However, there's a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
 
 ```js
 let user = null;
@@ -262,7 +262,7 @@ console.log(char);  // A
 ## Other Common String Methods
 
 - **The `indexOf` Method**: This method is used to search for a substring within a string. If the substring is found, `indexOf` returns the index (or position) of the first occurrence of that substring. If the substring is not found, `indexOf` returns -1, which indicates that the search was unsuccessful.
-- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.
+- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true. Otherwise, it returns false.
 - **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
 - **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
 - **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
@@ -416,7 +416,7 @@ const num = 4;
 console.log(-num); // -4
 ```
 
-- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it’s `false`, it becomes `true`. 
+- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`. 
 
 ## Bitwise Operators
 
@@ -669,7 +669,7 @@ console.log(second); // "banana"
 console.log(third); // "orange"
 ```
 
-- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven’t been destructured into a new array.
+- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven't been destructured into a new array.
 
 ```js
 const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
@@ -1381,7 +1381,7 @@ console.log(hasSomeEvenNumbers); // true
 - **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
 - **Browser APIs**: These APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.
 - **Third-Party APIs**: These are not built into the browser by default. You have to retrieve their code in some way. Usually, they will have detailed documentation explaining how to use their services. An example is the Google Maps API, which you can use to display interactive maps on your website.
-- **DOM**: The DOM stands for Document Object Model. It’s a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It’s the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
+- **DOM**: The DOM stands for Document Object Model. It's a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It's the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
 - **`navigator` Interface**: This provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used.
 - **`window` Interface**: This represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs.
 
@@ -1746,7 +1746,7 @@ selectEl.addEventListener("change", (e) => {
 
 ## Event Bubbling
 
-- **Definition**: Event bubbling, or propagation, refers to how an event “bubbles up” to parent objects when triggered.
+- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
 
 ## Event Delegation
 
@@ -1779,7 +1779,7 @@ const developerObj = {
 developerObj.map()
 ```
 
-- **RangeError**: These errors happen when your code tries to use a value that’s outside the range of what JavaScript can handle.
+- **RangeError**: These errors happen when your code tries to use a value that's outside the range of what JavaScript can handle.
 
 ```js
 const arr = [];
@@ -1801,7 +1801,7 @@ function validateNumber(input) {
 
 ## `try...catch...finally`
 
-- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It’s commonly used for cleanup tasks, such as closing files or releasing resources.
+- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It's commonly used for cleanup tasks, such as closing files or releasing resources.
 
 ```js
 function processInput(input) {
@@ -1848,7 +1848,7 @@ console.dir(document);
 
 ## Regular Expressions and Common Methods
 
-- **Definition**: Regular Expressions, or Regex, are used to create a “pattern”, which you can then use to check against a string, extract text, and more.
+- **Definition**: Regular Expressions, or Regex, are used to create a "pattern", which you can then use to check against a string, extract text, and more.
 
 ```js
 const regex = /freeCodeCamp/;
@@ -1902,7 +1902,7 @@ for (let match of iterator) {
 
 ## Regular Expression Modifiers
 
-- **Definition**: Modifiers, often referred to as “flags”, modify the behavior of a regular expression.
+- **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression.
 - **`i` Flag**: This flag makes a regex ignore case.
 
 ```js
@@ -1919,7 +1919,7 @@ console.log(regex.test("freeCodeCamp")); // true
 console.log(regex.test("freeCodeCamp is great")); // false
 ```
 
-- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says “match the start of the string”. The `$` anchor, at the end of the regular expression, says “match the end of the string”.
+- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string".
 
 ```js
 const start = /^freeCodeCamp/i;
@@ -2031,7 +2031,7 @@ const regex = /^\d{4}$/;
 
 ## Capturing Groups and Backreferences
 
-- **Capturing Groups**: A capturing group allows you to “capture” a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+- **Capturing Groups**: A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
 
 ```js
 const regex = /free(code)camp/i;
@@ -2046,7 +2046,7 @@ console.log("freecoooooooodecamp".replace(regex, "paid$1world"));
 
 ## Validating Forms with JavaScript
 
-- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user’s provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
+- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
 - **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
 
 ```js
@@ -2098,7 +2098,7 @@ button.addEventListener('click',(event) => {
 ## Submitting Forms
 
 - **Definition**: There are three ways a form can be submitted. The first is when the user clicks a button in the form which has the `type` attribute set to `submit`. The second is when the user presses the `Enter` key on any editable `input` field in the form. The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the `form` element.
-- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page’s URL.
+- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page's URL.
 
 ```js
 <form action="https://freecodecamp.org">
@@ -2219,9 +2219,9 @@ function pauseAudio() {
 ## Different Audio and Video Formats
 
 - **MIME type**: A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type. The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
-- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user’s current environment.
+- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user's current environment.
 - **MP3**: This is a type of digital file format used to store music, audio, or sound. It's a compressed version of a sound recording that makes the file size smaller, so it's easier to store and share. An MP3 file has the MIME type audio/mp3
-- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it’s a video file or audio-only.
+- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it's a video file or audio-only.
 
 ## codecs
 
@@ -2233,7 +2233,7 @@ function pauseAudio() {
 
 ## Media Capture and Streams API
 
-- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user’s hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
+- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
 
 ```js
 window.navigator.mediaDevices.getUserMedia({
@@ -2255,7 +2255,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Screen Capture API
 
-- **Definition**: The Screen Capture API is used to record a user’s screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+- **Definition**: The Screen Capture API is used to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
 
 ## MediaStream Recording API
 
@@ -2263,7 +2263,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Media Source Extensions API
 
-- **topic**: The Media Source Extensions API is what allows you to directly pass a user’s webcam feed to a video element with the `srcObject` property.
+- **topic**: The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property.
 
 ## Web Audio API
 
@@ -2335,9 +2335,9 @@ console.log(map); // Map(3) { 'flower' => 'rose', 'fruit' => 'apple', 'vegetable
 ## Create, Read, Update, Delete (CRUD)
 
 - **Create**: This refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
-- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you're performing a read operation to fetch and display data stored in the database.
 - **Update**: This involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
-- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you're performing a delete operation.
 
 ## HTTP Methods
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
index b8d05c1f1f..57a3a0c8e2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
@@ -16,9 +16,9 @@ Review the concepts below to prepare for the upcoming quiz.
 ## Create, Read, Update, Delete (CRUD)
 
 - **Create**: This refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
-- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you're performing a read operation to fetch and display data stored in the database.
 - **Update**: This involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
-- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you're performing a delete operation.
 
 ## HTTP Methods
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
index 9b2c7e68ff..8ccd73190c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
@@ -138,7 +138,7 @@ function Child(props) {
 }
 ```
 
-You can pass multiple props using the spread operator `(...)`, after converting them to an object. Here’s an example:
+You can pass multiple props using the spread operator `(...)`, after converting them to an object. Here's an example:
 
 ```jsx
 // Parent component
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/chinese-traditional/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
index 8ee1918a05..22f275bcb5 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
@@ -17,6 +17,10 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Semantic HTML Elements
 
+- **Header element**: used to define the header of a document or section.
+- **Main element**: used to contain the main content of the web page.
+- **Navigation Section (`nav`) element**: represents a section with navigation links.
+- **Figure element**: used to contain illustrations and diagrams.
 - **Emphasis (`em`) element**: marks text that has stress emphasis.
 - **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
 - **Strong Importance (`strong`) element**: marks text that has strong importance.
@@ -24,16 +28,18 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Description List (`dl`) element**: used to represent a list of term-description groupings.
 - **Description Term (`dt`) element**: used to represent the term being defined.
 - **Description Details (`dd`) element**: used to represent the description of the term.
-- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source.
+- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source. This element has a `cite` attribute. The value of the `cite` attribute is the URL of the source.
 - **Inline Quotation (`q`) element**: used to represent a short inline quotation.
 - **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym.
 - **Contact Address (`address`) element**: used to represent the contact information.
-- **(Date) Time (`time`) element**: used to represent a date and/or time.
+- **(Date) Time (`time`) element**: used to represent a date and/or time. The `datetime` attribute is used to translate dates and times into a machine-readable format.
+- **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`.
 - **Superscript (`sup`) element**: used to represent superscript text.
 - **Subscript (`sub`) element**: used to represent subscript text.
 - **Inline Code (`code`) element**: used to represent a fragment of computer code.
+- **Preformatted Text (`pre`) element**: represents preformatted text
 - **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-- **Ruby Annotation (`ruby`) element**: used to represent the text of a ruby annotation.
+- **Ruby Annotation (`ruby`) element**: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography.
 - **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
 
 # --assignment--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
index e98c8f7b4b..b840457eda 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -7,7 +7,7 @@ dashedName: step-29
 
 # --description--
 
-It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
+It's looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
index 65223d73bb..6ab42100a2 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
@@ -65,7 +65,7 @@ You should assign the `#output` element to `output`.
 ```js
 // assert.deepEqual(output, document.getElementById('output')); cannot be used,
 // as browser defines `output` variable on it own for `#output`.
-assert.match(code, /const\s+output\s*=\s*document.getElementById\(('|")output\1\)/);
+assert.match(code, /const\s+output\s*=\s*document\.getElementById\(('|")output\1\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
index e0db1f9357..b74f722f58 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
@@ -13,66 +13,205 @@ Using the same interpolation syntax, add a second `p` element with the text `con
 
 You should add a second `p` element to your template literal.
 
+
 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```
 
 Your second `p` element should be on a new line.
 
+
 ```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
 
-Your second `p` element should come after your existing `p` element.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
 ```
 
 Your second `p` element should have the text `${consumedCalories} Calories Consumed`.
 
 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```
 
 You should add a third `p` element to your template literal.
 
 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```
 
-Your third `p` element should be on a new line.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-Your third `p` element should come after your second existing `p` element.
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.lengthOf(output.children,5);
 ```
 
 Your third `p` element should have the text `${exerciseCalories} Calories Burned`.
 
 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
-```
 
-# --seed--
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-## --after-user-code--
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
 
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
 ```
 
+# --seed--
+
 ## --seed-contents--
 
 ```html
@@ -270,7 +409,7 @@ function addEntry() {
   targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }
 
---fcc-editable-region--
+
 function calculateCalories(e) {
   e.preventDefault();
   isError = false;
@@ -292,6 +431,7 @@ function calculateCalories(e) {
     return;
   }
 
+--fcc-editable-region--
   const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
   const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
   const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
index 203947b61e..936462caf7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
@@ -18,13 +18,13 @@ Open up the console to see the result. In the next step, you will learn more abo
 You should have a `console.log` below your `isInvalidInput` function.
 
 ```js
-assert.match(code, /console.log\(/);
+assert.match(code, /console\.log\(/);
 ```
 
 Your console statement should have the value of `isInvalidInput("1e3")`.
 
 ```js
-assert.match(code, /console.log\(isInvalidInput\(('|")1e3\s*\1\);?\)/);
+assert.match(code, /console\.log\(isInvalidInput\(('|")1e3\s*\1\);?\)/);
 
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
index b1f808ba93..08a71268db 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
@@ -31,13 +31,13 @@ Open up the console to see the result. You will learn more about what this resul
 You should have a `console.log` below your `isInvalidInput` function.
 
 ```js
-assert.match(code, /console.log\(/);
+assert.match(code, /console\.log\(/);
 ```
 
 Your console statement should have the value of `isInvalidInput("10")`.
 
 ```js
-assert.match(code, /console.log\(isInvalidInput\(('|")10\s*\1\);?\)/);
+assert.match(code, /console\.log\(isInvalidInput\(('|")10\s*\1\);?\)/);
 
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
index cc6ce6d01e..d9080dfe2d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
@@ -18,7 +18,7 @@ Now that you have finished testing your `isInvalidInput` function, you can remov
 You should remove your `console.log(isInvalidInput("10"));`.
 
 ```js
-assert.notMatch(code, /console.log\(isInvalidInput\("10"\)\);?/g)
+assert.notMatch(code, /console\.log\(isInvalidInput\("10"\)\);?/g)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
index a0ab3e1edc..f77a0e679a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
@@ -12,7 +12,7 @@ You have been provided with a basic boilerplate. Begin by adding a `link` elemen
 
 # --hints--
 
-Your should have a `link` element.
+You should have a `link` element.
 
 ```js
 assert.exists(document.querySelector("head>link"));
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
index 28446c8578..910f201646 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
@@ -14,49 +14,49 @@ Using a class selector, give the `.cat-right-ear` element `height` and `width` p
 You should have a `.cat-right-ear` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '100px')
 ```
 
 Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '100px')
 ```
 
 Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor, 'white')
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid blue')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid blue')
 ```
 
 Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid red')
 ```
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
index b37aa9386b..ef3f32fb5e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
@@ -16,25 +16,25 @@ Using a class selector, give the `.cat-right-ear` element a left and right borde
 You should have a `.cat-right-ear` selector.
 
 ```js 
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '70px solid rgb(94, 94, 94)')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
index 26922a2a3c..c71c0d6eda 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
@@ -19,50 +19,50 @@ Remove the `background-color` property, and you should see a triangle.
 You should have a `.cat-right-ear` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '0px')
 ```
 
 Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '0px')
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid transparent')
 ```
 
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 Your `.cat-right-ear` selector should not have a `background-color` property.
 
 ```js
-assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
index c1e8b49834..2d15027842 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -49,9 +49,11 @@ assert.equal(document.querySelector('h1').innerText.toLowerCase(), 'catphotoapp'
 You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions.
 
 ```js
-assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 1);
-assert.equal(document.querySelectorAll('link').length, 0);
+if(__checkForBrowserExtensions){
+  assert.isAtMost(document.querySelectorAll('script').length, 2);
+  assert.equal(document.querySelectorAll('style').length, 1);
+  assert.equal(document.querySelectorAll('link').length, 0);
+}
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index b8e42b9307..6751691733 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -15,7 +15,7 @@ Here is an example linking to `https://www.freecodecamp.org`:
 <a href="https://www.freecodecamp.org"></a>
 ```
 
-Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview.
+Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won't show up in the preview.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index b25a8cbdd9..e2018d6612 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -28,7 +28,8 @@ assert.match(code, /<\/ul>/);
 The `ul` element should be above the second `section` element's closing tag.
 
 ```js
-const secondSectionLastElemNode = $('main > section')[1].lastElementChild;
+const secondSectionLastElemNode =
+  document.querySelectorAll('main > section')[1].lastElementChild;
 assert.equal(secondSectionLastElemNode.nodeName, 'UL');
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
index fc6529131a..c13f28167a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
@@ -7,7 +7,7 @@ dashedName: step-11
 
 # --description--
 
-To give the markers different colors, you’ll need to add a unique class to each one. You can add multiple classes to an element by listing them in the `class` attribute and separating them with a space. For example, the following code adds both the `animal` and `dog` classes to a `div` element:
+To give the markers different colors, you'll need to add a unique class to each one. You can add multiple classes to an element by listing them in the `class` attribute and separating them with a space. For example, the following code adds both the `animal` and `dog` classes to a `div` element:
 
 ```html
 <div class="animal dog">
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
index 75f886d201..fd00f7b450 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
@@ -7,7 +7,7 @@ dashedName: step-26
 
 # --description--
 
-Now that you've practiced with secondary colors, let’s review how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary color with a nearby secondary color.
+Now that you've practiced with secondary colors, let's review how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary color with a nearby secondary color.
 
 To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule by setting red to its maximum value (`255`) and green to `127`.
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
index c01ff418d3..b1b5000288 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
@@ -7,7 +7,7 @@ dashedName: step-49
 
 # --description--
 
-Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function.
+Color-stops allow you to fine-tune where colors are placed along the gradient line. They are used in the `linear-gradient` function to specify where a color ends and the transition to the next color begins. Either a percentage or a length value can be used to define the color-stop position.
 
 For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space:
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
index 68c7140938..a3b21beb34 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
@@ -7,13 +7,13 @@ dashedName: step-15
 
 # --description--
 
-Add a new selector that targets the pseudoelement `::before` of the `h1` element,
+You can add an emoji in front of the title using the pseudo-element `::before` of the `h1` element.
 
-Use the `content` property to put the emoji 🥳 in front of the title: give it a value of `"🥳 "` (note there is a space after the emoji).
+Create an `h1::before` selector, give it a `content` property and set its value to `"🥳 "` (note there is a space after the emoji).
 
 # --hints--
 
-You should have a `h1::before` selector.
+You should have an `h1::before` selector.
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle("h1::before"));
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
index d0d04e7815..62eb6a5184 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
@@ -7,11 +7,13 @@ dashedName: step-16
 
 # --description--
 
-Now you can do something similar to add the emoji also after the title: create a `h1::after` selector, give it a `content` property and set the value to `" 🥳"` (note there is a space before the emoji).
+Now you can do something similar to add the emoji also after the title.
+
+Create a selector that targets the pseudo-element `::after` of the `h1` element. Give it a `content` property and set its value to `" 🥳"` (note there is a space before the emoji).
 
 # --hints--
 
-You should have a `h1::after` selector.
+You should have an `h1::after` selector.
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle("h1::after"));
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
index eb5e116fdb..5ddd0eb989 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
@@ -24,7 +24,7 @@ You should have a `.card-links a` selector.
 assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a"));
 ```
 
-The `.card-links a` selector should have a `text-decoration` property set to `note`.
+The `.card-links a` selector should have a `text-decoration` property set to `none`.
 
 ```js
 assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("text-decoration"), "none");
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
index 44af452c62..3d015651c6 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
@@ -27,7 +27,7 @@ Your `label` element should have a `for` attribute set to `"age"`.
 assert.isNotNull(document.querySelector('label[for="age"]'));
 ```
 
-You `label` element should have the text `Age (optional):`.
+Your `label` element should have the text `Age (optional):`.
 
 ```js
 assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age (optional):");
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
index 1dfbc1497d..3d446000e1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
@@ -66,7 +66,7 @@ Your object should have a `pages` property.
 assert.property(library[0], "pages")
 ```
 
-The value of yoour `pages` property should be a number.
+The value of your `pages` property should be a number.
 
 ```js
 assert.isNumber(library[0]?.pages)
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
index ac6bae6794..cc598c8c5c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
@@ -11,7 +11,7 @@ The rest of the objects representing the books have been filled in for you. You
 
 Now, you should start working on getting several common parts of the books.
 
-Start by displaying all the books. Create a `displayBooks` function with a `catalog` parameter. The function should return a string that contains the `title`, `author`, and `pages` of all the books in the `library` array.
+Start by displaying all the books. Create a `displayBooks` function with a parameter accepting an array with book objects. The function should return a string that contains the `title`, `author`, and `pages` of all the books in the array passed to function.
 
 # --hints--
 
@@ -21,10 +21,10 @@ You should create a `displayBooks` function.
 assert.isFunction(displayBooks)
 ```
 
-Your `displayBooks` function should have a `catalog` parameter.
+Your `displayBooks` function should have one parameter.
 
 ```js
-assert.match(displayBooks.toString(), /catalog/)
+assert.lengthOf(displayBooks, 1)
 ```
 
 Your `displayBooks` function should use a higher order function. Ex. (`filter`, `map`, `reduce`)
@@ -39,24 +39,42 @@ Your `displayBooks` function should return a string.
 assert.isString(displayBooks(library))
 ```
 
-Your `displayBooks` function should have each book title, author and pages in it.
+Your `displayBooks` function should return each book title, author and number of pages, for all books in the array passed to it.
 
 ```js
+const libraryBooks = displayBooks(library);
 library.forEach((book) => {
-  assert.include(displayBooks(library), book.title);
-  assert.include(displayBooks(library), book.author);
-  assert.include(displayBooks(library), book.pages.toString());
+  assert.include(libraryBooks, book.title);
+  assert.include(libraryBooks, book.author);
+  assert.include(libraryBooks, book.pages.toString());
 });
-```
-
-Your `displayBooks` function should contain the total of `8` books avaialble in the library.
-
-```js
-function getNumOfBooks(catalog) {
-  return catalog.map(book => `${book.title} by ${book.author}`);
-}
 
-assert.lengthOf(getNumOfBooks(library), 8);
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+];
+const _differentBooks = displayBooks(_differentLibrary);
+_differentLibrary.forEach((book) => {
+  assert.include(_differentBooks, book.title);
+  assert.include(_differentBooks, book.author);
+  assert.include(_differentBooks, book.pages.toString());
+});
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
index 4c5530c6d5..29ead98bb3 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
@@ -9,7 +9,7 @@ dashedName: step-5
 
 To display the book summaries, you can use the `about` property of each book.
 
-Create a `getBookSummaries` function with a `catalog` parameter. The `getBookSummaries` function should return an array containing all the `about` property value of each book.
+Create a `getBookSummaries` function with a single parameter, accepting an array with book objects. The `getBookSummaries` function should return an array containing all the `about` property value of each book.
 
 # --hints--
 
@@ -19,10 +19,10 @@ You should create a `getBookSummaries` function.
 assert.isFunction(getBookSummaries)
 ```
 
-Your `getBookSummaries` function should have a `catalog` parameter.
+Your `getBookSummaries` function should have one parameter.
 
 ```js
-assert.match(getBookSummaries.toString(), /catalog/)
+assert.lengthOf(getBookSummaries, 1)
 ```
 
 Your `getBookSummaries` function should return an array.
@@ -37,17 +37,59 @@ Your `getBookSummaries` function should use a higher order function. Ex. (`filte
 assert.match(getBookSummaries.toString(), /filter|map|reduce|forEach/);
 ```
 
-Your `getBookSummaries` function should contain the total of `8` books avaialble in the library.
+Your `getBookSummaries` function should return an array with the same length as the array passed to it.
 
 ```js
 assert.lengthOf(getBookSummaries(library), 8);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+];
+assert.lengthOf(getBookSummaries(_differentLibrary), 3);
 ```
 
-Your `getBookSummaries` function should have the `about` property of each book in the library.
+Your `getBookSummaries` function should return an array with the `about` property of each book from the array passed to it.
 
 ```js
+const summaries = getBookSummaries(library);
 library.forEach((book) => {
-  assert.include(getBookSummaries(library), book.about);
+  assert.include(summaries, book.about);
+});
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+];
+const differentSummaries = getBookSummaries(_differentLibrary);
+_differentLibrary.forEach((book) => {
+  assert.include(differentSummaries, book.about);
 });
 ```
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
index 21f88904bf..da8f4aa2b4 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
@@ -9,7 +9,7 @@ dashedName: step-6
 
 Another useful thing to do is to get the books by their author.
 
-Create a `getBooksByAuthor` function with a `catalog` and `author` parameters.
+Create a `getBooksByAuthor` function with two parameters - an array with book objects and a string with the author.
 
 The function must return an array that contains the books by a particular author.
 
@@ -21,10 +21,10 @@ You should create a `getBooksByAuthor` function.
 assert.isFunction(getBooksByAuthor)
 ```
 
-Your `getBooksByAuthor` function should have a `catalog` and `author` parameters.
+Your `getBooksByAuthor` function should have two parameters.
 
 ```js
-assert.match(getBooksByAuthor.toString(), /catalog,\s*author|author,\s*catalog/)
+assert.lengthOf(getBooksByAuthor, 2)
 ```
 
 Your `getBooksByAuthor` function should return an array.
@@ -57,6 +57,29 @@ assert.lengthOf(pbdBook, 1);
 assert.lengthOf(johnGordon, 1);
 assert.lengthOf(jamesClearBook, 1);
 assert.lengthOf(JDAndSDBook, 1);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author B',
+    about: 'About C',
+    pages: 304,
+  },
+];
+assert.lengthOf(getBooksByAuthor(_differentLibrary, 'Author B'), 2);
+assert.lengthOf(getBooksByAuthor(_differentLibrary, 'Author A'), 1);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
index 3b201fdda8..4825c1b615 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Finally, create a `getTotalPages` function with a `catalog` parameter. The function should return the total number of all the pages of the books in the `library` array.
+Finally, create a `getTotalPages` function with a single parameter, accepting an array with book objects. The function should return the total number of pages in the books from the array passed to the function.
 
 # --hints--
 
@@ -18,10 +18,10 @@ You should create a `getTotalPages` function.
 assert.isFunction(getTotalPages)
 ```
 
-Your `getTotalPages` function should have a `catalog` parameter.
+Your `getTotalPages` function should have one parameter.
 
 ```js
-assert.match(getTotalPages.toString(), /catalog/)
+assert.lengthOf(getTotalPages, 1)
 ```
 
 Your `getTotalPages` function should return a number.
@@ -30,10 +30,32 @@ Your `getTotalPages` function should return a number.
 assert.isNumber(getTotalPages(library))
 ```
 
-Your `getTotalPages` function should return the number `2512`.
+Your `getTotalPages` function should return the total number of pages in the books from the array passed to it.
 
 ```js
-assert.equal(getTotalPages(library), 2512);
+assert.strictEqual(getTotalPages(library), 2512);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+]
+assert.strictEqual(getTotalPages(_differentLibrary), 944);
 ```
 
 Your `getTotalPages` function should use a higher order function. Ex. (`filter`, `map`, `reduce`).
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 463572d28b..dd07bbd931 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -9,9 +9,9 @@ dashedName: step-3
 
 To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
-Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
+Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than or equal to `minCreditScoreForDuplex`.
 
-If that condition is true, then the applicant is eligible for a duplex loan and the other loans. So, inside the check, return the string `"You qualify for a car, duplex and Condo loan."`
+If that condition is true, then the applicant is eligible for a duplex loan and the other loans. So, inside the check, return the string `"You qualify for a duplex, condo, and car loan."`
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
new file mode 100644
index 0000000000..adb3c8b8cf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
@@ -0,0 +1,604 @@
+---
+id: 67471d60ce8e6268fe9e12f6
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop you will create a music player app capable of playing, pausing, and skipping songs from a playlist.
+
+The HTML and CSS of this project have been provided for you, so you can focus on the JavaScript.
+
+Start by accessing the `#playlist-songs`, `#play`, and `#pause` elements and assign them to the variables `playlistSongs`, `playButton` and `pauseButton`, respectively.
+
+
+# --hints--
+
+You should have a variable called `playlistSongs`.
+
+```js
+assert.isDefined(playlistSongs);
+```
+
+You should assign the `#playlist-songs` element to the variable `playlistSongs`.
+
+```js
+assert.equal(playlistSongs, document.getElementById('playlist-songs'));
+```
+
+You should have a variable called `playButton`.
+
+```js
+assert.isDefined(playButton);
+```
+
+You should assign the `#play` element to the variable `playButton`.
+
+```js
+assert.equal(playButton, document.getElementById('play'));
+```
+
+You should have a variable called `pauseButton`.
+
+```js
+assert.isDefined(pauseButton);
+```
+
+You should assign the `#pause` element to the variable `pauseButton`.
+
+```js
+assert.equal(pauseButton, document.getElementById('pause'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
new file mode 100644
index 0000000000..30f83c65df
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
@@ -0,0 +1,591 @@
+---
+id: 6747237371f13173c9f6c27e
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Access the `#next` and `#previous` elements from the HTML file.
+
+Assign them to variables named `nextButton`, and `previousButton`, respectively.
+
+# --hints--
+
+You should have a variable called `nextButton`.
+
+```js
+assert.isDefined(nextButton);
+```
+
+You should assign the `#next` element to the variable `nextButton`.
+
+```js
+assert.equal(nextButton, document.getElementById('next'));
+```
+
+You should have a variable called `previousButton`.
+
+```js
+assert.isDefined(previousButton);
+```
+
+You should assign the `#previous` element to the variable `previousButton`.
+
+```js
+assert.equal(previousButton, document.getElementById('previous'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+--fcc-editable-region--
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
new file mode 100644
index 0000000000..94809445c6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
@@ -0,0 +1,585 @@
+---
+id: 674724ff8af92f7733e6d980
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, create an ampty array named `allSongs` to store all the songs.
+
+# --hints--
+
+You should have a variable called `allSongs`.
+
+```js
+assert.isDefined(allSongs)
+```
+
+You should assign an array to your `allSongs` variable.
+
+```js
+assert.isArray(allSongs)
+```
+
+Your array should be empty.
+
+```js
+assert.isEmpty(allSongs)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
new file mode 100644
index 0000000000..03f55f6703
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
@@ -0,0 +1,619 @@
+---
+id: 6747257cdf5412781e138bb2
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Inside the `allSongs` array, create an object with the following properties and values:
+
+```js
+id: 0,
+title: "Scratching The Surface",
+artist: "Quincy Larson",
+duration: "4:25",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have one value.
+
+```js
+assert.equal(allSongs.length, 1);
+```
+
+Your `allSongs` array should have an object as its first value.
+
+```js
+assert.isObject(allSongs[0]);
+```
+
+Your `allSongs` array should have an object with an `id` property set to the number `0`.
+
+```js
+assert.strictEqual(allSongs[0].id, 0);
+```
+
+Your `allSongs` array should have an object with a `title` property set to the string `"Scratching The Surface"`.
+
+```js
+assert.equal(allSongs[0].title, "Scratching The Surface");
+```
+
+Your `allSongs` array should have an object with an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[0].artist, "Quincy Larson");
+```
+
+Your `allSongs` array should have an object with a `duration` property set to the string `"4:25"`.
+
+```js
+assert.equal(allSongs[0].duration, "4:25");
+```
+
+Your `allSongs` array should have an object with a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"`.
+
+```js
+assert.equal(allSongs[0].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+const allSongs = [
+
+]
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
new file mode 100644
index 0000000000..5660a8dedd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
@@ -0,0 +1,626 @@
+---
+id: 6747274264e8a5799fb3e0b5
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a second object with the following keys and values:
+
+```js
+id: 1,
+title: "Can't Stay Down",
+artist: "Quincy Larson",
+duration: "4:15",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have two values.
+
+```js
+assert.equal(allSongs.length, 2);
+```
+
+Your `allSongs` array should have an object as its second value.
+
+```js
+assert.isObject(allSongs[1]);
+```
+
+The second object in your `allSongs` array should have an `id` property set to the number `1`.
+
+```js
+assert.strictEqual(allSongs[1].id, 1);
+```
+
+The second object in your `allSongs` array should have a `title` property set to the string `"Can't Stay Down"`.
+
+```js
+assert.equal(allSongs[1].title, "Can't Stay Down");
+```
+
+The second object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[1].artist, "Quincy Larson");
+```
+
+The second object in your `allSongs` array should have a `duration` property set to the string `"4:15"`.
+
+```js
+assert.equal(allSongs[1].duration, "4:15");
+```
+
+The second object in your `allSongs` array should have a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`.
+
+```js
+assert.equal(allSongs[1].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
new file mode 100644
index 0000000000..d4725a42a5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
@@ -0,0 +1,629 @@
+---
+id: 674728eda5829d7b4c360643
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a third object with the following properties and values:
+
+```js
+id: 2,
+title: "Still Learning",
+artist: "Quincy Larson",
+duration: "3:51",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have an object as its third value.
+
+```js
+assert.isObject(allSongs[2]);
+```
+
+The third object in your `allSongs` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(allSongs[2].id, 2);
+```
+
+The third object in your `allSongs` array should have a `title` property set to the string `"Still Learning"`.
+
+```js
+assert.equal(allSongs[2].title, "Still Learning");
+```
+
+The third object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[2].artist, "Quincy Larson");
+```
+
+The third object in your `allSongs` array should have a `duration` property set to the string `"3:51"`.
+
+```js
+assert.equal(allSongs[2].duration, "3:51");
+```
+
+The third object in your `allSongs` array should have a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`.
+
+```js
+assert.equal(allSongs[2].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
new file mode 100644
index 0000000000..d2ac453312
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
@@ -0,0 +1,656 @@
+---
+id: 6747299cbed5107c6a00d64c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The rest of the songs has been added to the `allSongs` array for you.
+
+In the previous lecture video, you learned about the <dfn>Web Audio API</dfn> and how to use it to play songs. All modern browsers support the Web Audio API, which lets you generate and process audio in web applications.
+
+Create a variable named `audio` and set it equal to `new Audio()`. This will create a new HTML5 `audio` element.
+
+# --hints--
+
+You should have a variable named `audio`.
+
+```js
+assert.isDefined(audio);
+```
+
+You should assign a new instance of the `Audio` object to the variable named `audio`.
+
+```js
+assert.instanceOf(audio, Audio)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
new file mode 100644
index 0000000000..c2fa6984fa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
@@ -0,0 +1,656 @@
+---
+id: 67472ab9f570797dbb01568a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Your music player should keep track of the songs, the current song playing, and the time of the current song. To do this, you will need to create an object to store this information.
+
+Start by declaring a new variable called `userData` and assign it an empty object.
+
+# --hints--
+
+You should have a variable named `userData`.
+
+```js
+assert.isDefined(userData);
+```
+
+You should assign an empty object to your `userData` variable.
+
+```js
+assert.deepEqual(userData, {});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
new file mode 100644
index 0000000000..11e4adee44
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
@@ -0,0 +1,664 @@
+---
+id: 67472eef7b4b7ba77b50929b
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+In your `userData` object, create a `songs` property and set its value to the `allSongs` array.
+
+Then, to handle the current song's information and track its playback time, create a `currentSong` and `songCurrentTime` properties. Set the values to `null` and `0`, respectively.
+
+# --hints--
+
+Your `userData` object should have a `songs` key set to the `allSongs` array.
+
+```js
+assert.propertyVal(userData, "songs", allSongs);
+```
+
+Your `userData` object should have a `currentSong` key set to `null`.
+
+```js
+assert.propertyVal(userData, "currentSong", null);
+```
+
+Your `userData` object should have a `songCurrentTime` key set to `0`.
+
+```js
+assert.propertyVal(userData, "songCurrentTime", 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+--fcc-editable-region--
+const userData = {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
new file mode 100644
index 0000000000..0cde6737d9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
@@ -0,0 +1,661 @@
+---
+id: 67473042e8751eac62fafc82
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+It's time to begin implementing the functionality for playing the displayed songs.
+
+Define a `playSong` function that takes an single parameter which will represent the unique identifier of the song you want to play.
+
+# --hints--
+
+You should have an empty function named `playSong`.
+
+```js
+assert.isFunction(playSong);
+```
+
+Your `playSong` function should take a single parameter.
+
+```js
+assert.lengthOf(playSong, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
new file mode 100644
index 0000000000..c2cb8ceec2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
@@ -0,0 +1,709 @@
+---
+id: 674735e3b28351b8b8f05807
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+The `find()` method retrieves the first element within an array that fulfills the conditions specified in the provided callback function. If no element satisfies the condition, the method returns `undefined`.
+
+In the example below, the `find()` method is used to find the first number greater than 25:
+
+```js
+const numbers = [10, 20, 30, 40, 50];
+
+// Find the first number greater than 25
+const foundNumber = numbers.find((number) => number > 25);
+console.log(foundNumber); // Output: 30
+```
+
+Within your `playSong` function, use the `find()` method on the `userData.songs` array to search for a song which has an `id` strictly equal to the `id` passed into the `playSong` function. Assign the `find` call to a variable named `song`.
+
+# --hints--
+
+Your `playSong` function should call the `find` method on `userData.songs`.
+
+```js
+let flag = false;
+const temp = userData.songs.find;
+userData.songs.find = foo => {flag = true};
+try {
+  playSong(0);
+  assert.isTrue(flag);
+} finally {
+  userData.songs.find = temp;
+}
+```
+
+Your `find` call should return a song whose `id` is strictly equal to the `id` passed into the `playSong` function.
+
+```js
+const testArr = [
+  {id: 0},
+  {id: 1},
+  {id: 2},
+]
+let callback;
+const testFind = id => testArr.find(callback);
+const temp = userData.songs.find;
+userData.songs.find = foo => {callback = foo};
+try {
+  playSong(0);
+  assert.deepEqual(testFind(0), {id: 0});
+  playSong(1);
+  assert.deepEqual(testFind(1), {id: 1});
+  playSong(2);
+  assert.deepEqual(testFind(2), {id: 2});
+  playSong(3);
+  assert.isUndefined(testFind(3));
+  playSong("0");
+  assert.isUndefined(testFind("0"));
+} finally {
+  userData.songs.find = temp;
+}
+```
+
+You should assign your `find` call to a variable named `song`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(const|let)\s+song\s*=\s*userData\s*\.\s*songs\s*\.\s*find\s*\(.+\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
new file mode 100644
index 0000000000..cd1ecd5530
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
@@ -0,0 +1,676 @@
+---
+id: 674757668684f9deaa6ac3c0
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Still inside the `playSong` function, set the `audio.src` property equal to `song.src`. This tells the audio element where to find the audio data for the selected song.
+
+Also, set the `audio.title` property equal to `song.title`. This tells the audio element what to display as the title of the song.
+
+# --hints--
+
+You should set the `audio.src` property equal to `song.src` inside your `playSong` function.
+
+```js
+const temp = audio;
+try {
+  playSong(2);
+  assert.equal(audio.src, "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3");
+} finally {
+  audio = temp;
+}
+```
+
+You should set the `audio.title` property equal to `song.title` inside your `playSong` function.
+
+```js
+const temp = audio;
+try {
+  playSong(2);
+  assert.equal(audio.title, "Still Learning");
+} finally {
+  audio = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
new file mode 100644
index 0000000000..1a6d3945d3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
@@ -0,0 +1,690 @@
+---
+id: 674836ba82e9057dfee1849c
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Next, use the `classList` property and the `add()` method to add the `playing` class to the `playButton` element. This will look for the class `playing` in the CSS file and add it to the `playButton` element.
+
+Then, set `userData.currentSong` to `song`, and to finally play the song, use the `play()` method on the `audio` variable. `play()` is a method from the web audio API for playing an mp3 file.
+
+# --hints--
+
+You should add the `playing` class to the `playButton` element within your `playSong` function.
+
+```js
+playButton.classList.remove("playing");
+playSong(0);
+assert.isTrue(playButton.classList.contains("playing"));
+```
+
+You should set `userData.currentSong` to `song` within your `playSong` function.
+
+```js
+userData.currentSong = null;
+playSong(0);
+assert.deepEqual(userData.currentSong, {id: 0, title: "Scratching The Surface", artist: "Quincy Larson", duration: "4:25", src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"});
+```
+
+You should call the `play()` method on the `audio` variable within your `playSong` function.
+
+```js
+let flag = false;
+const temp = audio.play;
+audio.play = () => {flag = true};
+try {
+  playSong(0);
+  assert.isTrue(flag);
+} finally {
+  audio.play = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+--fcc-editable-region--
+
+--fcc-editable-region--  
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
new file mode 100644
index 0000000000..b473bbbd8c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
@@ -0,0 +1,687 @@
+---
+id: 674850b437668dd08edddbe2
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In previous steps you built out the functionality for playing a song. Now you need to add the functionality to the play button.
+
+Use the `addEventListener()` method on `playButton` and pass in a `"click"` event for the first argument. For now, use a callback that calls `playSong(0)` as the second argument.
+
+Then, test it by clicking the play button.
+
+
+# --hints--
+
+You should add an event listener for the `click` event to the `playButton` and pass a callback function that calls `playSong(0)` as the second argument to the `addEventListener` method.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
new file mode 100644
index 0000000000..4c491a7de2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
@@ -0,0 +1,698 @@
+---
+id: 6748567229cc8fe3f706de02
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Now you need to work on pausing the currently playing song.
+
+Define a `pauseSong` function that takes no parameters. Within your new function, to store the current time of the song when it is paused, set the `songCurrentTime` of the `userData` object to the `currentTime` of the `audio` variable.
+
+
+# --hints--
+
+You should have a `pauseSong` function.
+
+```js
+assert.isFunction(pauseSong);
+```
+
+Yor `pauseSong` function should set the `songCurrentTime` of the `userData` object to the `currentTime` of the `audio` variable.
+
+```js
+userData.songCurrentTime = 0;
+audio.currentTime = 10;
+pauseSong()
+assert.equal(userData.songCurrentTime, 10);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
new file mode 100644
index 0000000000..365b3f5e13
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
@@ -0,0 +1,707 @@
+---
+id: 6748bab9827a356c39559214
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Use `classList` and `remove()` method to remove the `playing` class from the `playButton`, since the song will be paused at this point.
+
+To finally pause the song, use the `pause()` method on the `audio` variable. `pause()` is a method of the Web Audio API for pausing music files.
+
+# --hints--
+
+Your `pauseSong` function should remove the `playing` class from the `playButton`.
+
+```js
+playButton.classList.add("playing");
+pauseSong();
+assert.isFalse(playButton.classList.contains("playing"));
+```
+
+Your `pauseSong` function should call the `pause()` method on `audio`.
+
+```js
+let flag;
+const temp = audio.pause;
+audio.pause = () => {flag = true};
+try {
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+  audio.pause = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
new file mode 100644
index 0000000000..9e2345c817
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
@@ -0,0 +1,671 @@
+---
+id: 674dda6c6ae8bb538678e125
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Before playing the song, you need to make sure it starts from the beginning. This can be achieved by the use of the `currentTime` property on the `audio` object.
+
+Add an `if` statement to check if no current song is playing by verifying that `userData.currentSong` is falsy. Inside `if` block, set the `currentTime` property of the `audio` object to `0`.
+
+# --hints--
+
+Your `playSong` function should set the `currentTime` property of the `audio` object to `0` when no current song is playing.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+audio.currentTime = 10;
+userData.currentSong = null;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 0);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
new file mode 100644
index 0000000000..dc4ea3f5a2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
@@ -0,0 +1,693 @@
+---
+id: 674de4ee2039496c30a31b71
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
+
+Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData.songCurrentTime`.
+
+# --hints--
+
+Your `playSong` function should set the `currentTime` property of the `audio` object to the value stored in `userData.songCurrentTime` when there's a current song playing.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+const temp3 = userData.songCurrentTime;
+audio.currentTime = 10;
+userData.currentSong = allSongs[2];
+userData.songCurrentTime = 15;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 15);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+  userData.songCurrentTime = temp3;
+}
+```
+
+You should not modify the existing `if` statement and its content.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+audio.currentTime = 10;
+userData.currentSong = null;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 0);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } 
+
+--fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
new file mode 100644
index 0000000000..a0e5c54bd9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
@@ -0,0 +1,708 @@
+---
+id: 674e2e4e04eb381ccfe92e15
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now it is time to test out the pause button.
+
+Add a `"click"` event listener to the `pauseButton` element, then pass in `pauseSong` as the second argument of the event listener. This is the function the event listener will run.
+
+Test out your app by first clicking on the play button followed by the pause button. You should see that everything is working as expected.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `pauseButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `pauseSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*pauseSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
new file mode 100644
index 0000000000..5512907279
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
@@ -0,0 +1,719 @@
+---
+id: 674e305b7bda7c1f4f37a930
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Before you start working on playing the next and previous song, you need to get the index of each song in the `songs` property of `userData`. To do that you can use the `indexOf()` array method, which returns the first index at which a given element can be found in the array, or `-1` if the element is not present.
+
+```js
+const animals = ["dog", "cat", "horse"];
+animals.indexOf("cat") // 1
+```
+
+Create a function named `getCurrentSongIndex` that returns the index at which `userData.currentSong` can be found in `userData.songs` and `-1` when the current song is `null`.
+
+# --hints--
+
+You should have a function named `getCurrentSongIndex`.
+
+```js
+assert.isFunction(getCurrentSongIndex);
+```
+
+Your `getCurrentSongIndex` function should return the index at which `userData.currentSong` can be found in `userData.songs`.
+
+```js
+userData.currentSong = allSongs[2]
+assert.strictEqual(getCurrentSongIndex(), 2);
+
+userData.currentSong = allSongs[4]
+assert.strictEqual(getCurrentSongIndex(), 4);
+```
+
+Your `getCurrentSongIndex` function should return `-1` when `userData.currentSong` is `null`.
+
+```js
+userData.currentSong = null
+assert.strictEqual(getCurrentSongIndex(), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
new file mode 100644
index 0000000000..f505ac3ea7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
@@ -0,0 +1,692 @@
+---
+id: 674e316e3892d32108ad2bb9
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Anytime you click the play button, the first song of your playlist will always play. To fix this, within the arrow function of the event listener, replace `playSong(0)` with an `if` statement that checks if `userData.currentSong` is `null`.
+
+Inside the `if` block, call the `playSong` function with the `id` of the first song in the `userData.songs` array.
+
+# --hints--
+
+You should modify the callback of the event listener to call the `playSong` function with the `id` of the first song in the `userData.songs` array when `userData.currentSong` is `null`.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = allSongs[3];
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+
+  userData.currentSong = null;
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+playButton.addEventListener("click", () => {
+  playSong(0);
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
new file mode 100644
index 0000000000..f2d054e966
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
@@ -0,0 +1,712 @@
+---
+id: 674e34c42ee8f1237e4623cc
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Add an `else` block. Inside the `else` block, call the `playSong` function with the `id` of the currently playing song as an argument.
+
+This ensures that the currently playing song will continue to play when the play button is clicked.
+
+# --hints--
+
+When the `playButton` is clicked and `userData.currentSong` is not `null`, you should call the `playSong` function with the `id` of the currently playing song.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = allSongs[3];
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [3]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+You should still call the `playSong` function with the `id` of the first song in your playlist when the `playButton` is clicked and `userData.currentSong` is `null`,
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = null;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+playButton.addEventListener("click", () => {
+    if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  }
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
new file mode 100644
index 0000000000..ca606f0d40
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
@@ -0,0 +1,729 @@
+---
+id: 674f489bf617af2bea9b92b5
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now, create a function named `getNextSong`. Make it return the song that can be found at `getCurrentSongIndex()` plus one in `userData.songs`, or `undefined` if the current song is the last one in the playlist.
+
+# --hints--
+
+You should have a function named `getNextSong`.
+
+```js
+assert.isFunction(getNextSong);
+```
+
+Your `getNextSong` function should call `getCurrentSongIndex`.
+
+```js
+let flag;
+const temp = getCurrentSongIndex;
+getCurrentSongIndex = () => {flag = true};
+try {
+  getNextSong();
+  assert.isTrue(flag);
+} finally {
+  getCurrentSongIndex = temp;
+}
+```
+
+Your `getNextSong` function should return the song next to the current song.
+
+```js
+userData.currentSong = allSongs[2]
+assert.equal(getNextSong(), allSongs[3]);
+
+userData.currentSong = allSongs[4]
+assert.equal(getNextSong(), allSongs[5]);
+```
+
+Your `getNextSong` function should return `undefined` when the current song is the last one in the playlist.
+
+```js
+userData.currentSong = allSongs[9]
+assert.isUndefined(getNextSong());
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
new file mode 100644
index 0000000000..73a63b1ce9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
@@ -0,0 +1,729 @@
+---
+id: 674f50cce486fb404751a29c
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Now that you know how to find the next song to play, create a function named `playNextSong`. Inside the `playNextSong` function, create an `if` statement to check if the `currentSong` of `userData` is strictly equal to `null`. This will check if there's no current song playing in the `userData` object.
+
+If the condition is true, call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+# --hints--
+
+You should have a function named `playNextSong`.
+
+```js
+assert.isFunction(playNextSong);
+```
+
+When the `currentSong` of `userData` is strictly equal to `null`, your `playNextSong` function should call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  userData.currentSong = allSongs[2];
+  playNextSong();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  userData.currentSong = undefined;
+  playNextSong();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  userData.currentSong = null;
+  playNextSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
new file mode 100644
index 0000000000..4ea90ee238
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
@@ -0,0 +1,787 @@
+---
+id: 674f534fa181f64a789ffcf9
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+If `userData.currentSong` is not `null` you need to find the next song to play. Remember that you can use `getNextSong` for that.
+
+Complete your `playNextSong` function so that can play the next song in the playlist. If the current song is the last one, set `userData.currentSong` to `null`, `userData.songCurrentTime` to zero and call the `pauseSong` function.
+
+# --hints--
+
+When the `currentSong` of `userData` is truthy and not the last song of the playlist, the `playNextSong` function should play the song next to the current song.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[3];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+  userData.currentSong = allSongs[4];
+  playNextSong();
+  assert.deepEqual(testArr, [4, 5]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should set `userData.currentSong` to `null`.
+
+```js
+const temp = userData.currentSong;
+userData.currentSong = allSongs[9];
+try {  
+  playNextSong();
+  assert.isNull(userData.currentSong);
+} finally {
+  userData.currentSong = temp;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should set `userData.songCurrentTime` to `0`.
+
+```js
+const temp = userData.songCurrentTime;
+userData.songCurrentTime = 10;
+try {
+  userData.currentSong = allSongs[9];
+  playNextSong();
+  assert.strictEqual(userData.songCurrentTime, 0);
+} finally {
+  userData.songCurrentTime = temp;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should call the `pauseSong` function.
+
+```js
+let flag;
+const temp = pauseSong;
+pauseSong = () => {flag = true};
+try {
+  userData.currentSong = allSongs[9];
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+  pauseSong = temp;
+}
+```
+
+When the `currentSong` of `userData` is equal to `null`, your `playNextSong` function should still call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  userData.currentSong = null;
+  playNextSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  }
+
+}
+--fcc-editable-region--
+
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
new file mode 100644
index 0000000000..ab71844ed4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
@@ -0,0 +1,729 @@
+---
+id: 67503cecd563135d4f27b38e
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now it is time to test out the `playNextSong` function.
+
+Add a `"click"` event listener to the `nextButton` element, then pass in `playNextSong` as the second argument of your event listener. This is the function the event listener will run.
+
+Test out your app by first clicking on the play button followed by the next button. You should see that everything is working as expected.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `nextButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `playNextSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*playNextSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
new file mode 100644
index 0000000000..c5a4503eb2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
@@ -0,0 +1,746 @@
+---
+id: 675057ce9acd418619127da4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Now, create a function named `getPreviousSong`. Make it return the song that can be found at `getCurrentSongIndex()` minus one in `userData.songs`, or `undefined` if the current song is the first one in the playlist.
+
+# --hints--
+
+You should have a function named `getPreviousSong`.
+
+```js
+assert.isFunction(getPreviousSong);
+```
+
+Your `getPreviousSong` function should call `getCurrentSongIndex`.
+
+```js
+let flag;
+const temp = getCurrentSongIndex;
+getCurrentSongIndex = () => {flag = true};
+try {
+  getPreviousSong();
+  assert.isTrue(flag);
+} finally {
+  getCurrentSongIndex = temp;
+}
+```
+
+Your `getPreviousSong` function should return the song before the current song.
+
+```js
+userData.currentSong = allSongs[4]
+assert.equal(getPreviousSong(), allSongs[3]);
+
+userData.currentSong = allSongs[3]
+assert.equal(getPreviousSong(), allSongs[2]);
+```
+
+Your `getPreviousSong` function should return `undefined` when the current song is the first one in the playlist.
+
+```js
+userData.currentSong = allSongs[0]
+assert.isUndefined(getPreviousSong());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
new file mode 100644
index 0000000000..c787318a4e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
@@ -0,0 +1,770 @@
+---
+id: 67505d3a32d45997d2af4c0f
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Create a function named `playPreviousSong`. Inside your new function, use the value returned by the `getPreviousSong` function to find the song to play. When `getPreviousSong()` is `undefined`, play the first song in your playlist. Otherwise, play the song before the current song playing.
+
+# --hints--
+
+You should have a function named `playPreviousSong`.
+
+```js
+assert.isFunction(playPreviousSong);
+```
+
+The `playPreviousSong` function should play the song before the current song playing in the playlist.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[4];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playPreviousSong();
+  assert.isTrue(flag);
+  userData.currentSong = allSongs[3];
+  flag = false;
+  playPreviousSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [3, 2]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+When `getPreviousSong()` is `undefined`, the `playPreviousSong` function should play the first song in the playlist.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[0];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playPreviousSong();
+  assert.isTrue(flag);
+  userData.currentSong = null;
+  flag = false;
+  playPreviousSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0, 0]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
new file mode 100644
index 0000000000..d6c824ef5f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
@@ -0,0 +1,738 @@
+---
+id: 675069b67b8267b36fa550b3
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Add a `"click"` event listener to the `previousButton` element, then pass in `playPreviousSong` as the second argument.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `previousButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `playPreviousSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*playPreviousSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
new file mode 100644
index 0000000000..a7da8200c2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
@@ -0,0 +1,727 @@
+---
+id: 6750712ee950facad5edc203
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+If you play a bit with your player you'll notice a few bugs. First, when you play a song, pause it and then press either the previous button or next button, the song won't start from the beginning.
+
+To start fixing that, add second parameter named `start` to your `playSong` function. Give it the default value of `true`.
+
+# --hints--
+
+Your `playSong` function should have a second parameter named `start` with the default value of `true`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+playSong\s*=\s*\(\s*id\s*,\s*start\s*\=\s*true\s*\)\s*=>\s*\{/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+--fcc-editable-region--
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
new file mode 100644
index 0000000000..ab14226258
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
@@ -0,0 +1,727 @@
+---
+id: 67516a431252ed30832fa7c6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Now, use the **OR** operator to add the `start` parameter as a second condition to the `if` statement after `userData.currentSong === null`.
+
+
+# --hints--
+
+You should use the **OR** operator to add the `start` parameter as a second condition to the `if` statement after `userData.currentSong === null`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /if\s+\(\s*userData\s*\.\s*currentSong\s*===\s*null\s+\|\|\s+start(\s*\=\s*true\s*)?\)\s*\{/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+  if (userData.currentSong === null) {
+--fcc-editable-region--
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
new file mode 100644
index 0000000000..11d12b14ce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
@@ -0,0 +1,726 @@
+---
+id: 67516ca9b7fe6636208c5ab5
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, pass `false` as the second argument to the `playSong(userData.currentSong.id)` function call. Then, test that everything works as expected by playing a song, pausing it and then pressing either the previous button or the next button.
+
+# --hints--
+
+You should pass `false` as the second argument to the `playSong(userData.currentSong.id)` function call.
+
+```js
+assert.match(__helpers.removeJSComments(code), /playSong\s*\(\s*userData\s*\.\s*currentSong\s*\.\s*id\s*,\s*false\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+--fcc-editable-region--
+    playSong(userData.currentSong.id);
+--fcc-editable-region--
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
new file mode 100644
index 0000000000..701d0ca5c9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
@@ -0,0 +1,743 @@
+---
+id: 67516e888477083c31614dc7
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+If you check closely, you'd see the currently playing song is not highlighted in the playlist, so you don't really know which song is playing. You can fix this by creating a function to highlight any song that is being played.
+
+Create a function named `highlightCurrentSong`. Inside the function, check that a `.playlist-song` element with `aria-current="true"` exists. If so, use the `removeAttribute` method to remove the `aria-current` attribute from it.
+
+# --hints--
+
+You should have a function named `highlightCurrentSong`.
+
+```js
+assert.isFunction(highlightCurrentSong)
+```
+
+Your `highlightCurrentSong` function should use the `removeAttribute` method to remove the `aria-current` attribute from the `.playlist-song` element with `aria-current="true"` if that element exists.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+assert.doesNotThrow(highlightCurrentSong);
+songs[3].setAttribute("aria-current", "true");
+highlightCurrentSong();
+songs.forEach(song => {assert.isNull(song.getAttribute("aria-current"))});
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
new file mode 100644
index 0000000000..30824527a3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
@@ -0,0 +1,754 @@
+---
+id: 67517ef2fae05b65108212db
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+You need to get the `id` of the currently playing song. For this, you can use `userData.currentSong?.id`.
+
+Use `getElementById()` to select the currently playing song: pass a template literal to prefix the `id` with `song-`. Assign it to a variable named `songToHighlight`.
+
+# --hints--
+
+You should not modify the existing `highlightCurrentSong` function and its content.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+assert.doesNotThrow(highlightCurrentSong);
+songs[3].setAttribute("aria-current", "true");
+highlightCurrentSong();
+songs.forEach(song => {assert.isNull(song.getAttribute("aria-current"))});
+```
+
+You should use `document.getElementById()` and pass in `` `song-${userData.currentSong?.id}` ``.
+
+```js
+assert.match(__helpers.removeJSComments(code), /document\.getElementById\(\s*`song-\$\{userData\.currentSong\?\.id\}`\s*\)\s*;?\s*\}\s*;?/)
+```
+
+You should assign your `getElementById()` to a `songToHighlight` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(const|let)\s+songToHighlight\s*=\s*document\.getElementById\(\s*`song-\$\{userData\.currentSong\?\.id\}`\s*\)\s*;?\s*\}\s*;?/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+--fcc-editable-region--
+
+--fcc-editable-region--  
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
new file mode 100644
index 0000000000..64a2fda8d9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
@@ -0,0 +1,747 @@
+---
+id: 6751d5d32e58d065652e26a5
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now, you need to add the `aria-current` attribute to the currently playing song.
+
+Check if `songToHighlight` exists. If so, use the `setAttribute` method on `songToHighlight` and pass in `"aria-current"` and `"true"` as the first and second arguments.
+
+# --hints--
+
+`highlightCurrentSong` should add the `aria-current` attribute to the currently playing song and remove the attribute from the previously played song.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+userData.currentSong = null;
+assert.doesNotThrow(highlightCurrentSong);
+userData.currentSong = allSongs[9];
+highlightCurrentSong();
+for (let i = 0; i < 9; i++) {
+  assert.isNull(Array.from(songs)[i].getAttribute("aria-current"));
+}
+assert.strictEqual(songs[9].getAttribute("aria-current"), "true");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+--fcc-editable-region--
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+--fcc-editable-region--
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
new file mode 100644
index 0000000000..72d1b2f02f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
@@ -0,0 +1,749 @@
+---
+id: 6751e1c117350b7d3f356e1b
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Inside the `playSong` function, call the `highlightCurrentSong` function.
+
+After that, play around with the control buttons to see how the `highlightCurrentSong` function works.
+
+# --hints--
+
+You should call `highlightCurrentSong` inside the `playSong` function.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+userData.currentSong = allSongs[9];
+playSong(9);
+pauseSong();
+for (let i = 0; i < 9; i++) {
+  assert.isNull(Array.from(songs)[i].getAttribute("aria-current"));
+}
+assert.strictEqual(songs[9].getAttribute("aria-current"), "true");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+--fcc-editable-region--
+
+--fcc-editable-region--
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
new file mode 100644
index 0000000000..b5f61b7194
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
@@ -0,0 +1,768 @@
+---
+id: 6752c62efa90554c01415e7b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Create a function named `setPlayerDisplay`. Inside the function, set the `textContent` of `playingSong` to the current song's title, if defined. Otherwise, set it to an empty string.
+
+Below that, set the `textContent` of `songArtist` to the current song's artist, if defined. Otherwise, set it to empty string.
+
+
+# --hints--
+
+You should have a function named `setPlayerDisplay`.
+
+```js
+assert.isFunction(setPlayerDisplay);
+```
+
+Your `setPlayerDisplay` function should set the `textContent` of `playingSong` to the current song's title, if defined, or to an empty string.
+
+```js
+userData.currentSong = null;
+setPlayerDisplay();
+assert.isEmpty(document.querySelector("#player-song-title").textContent);
+userData.currentSong = allSongs[3];
+setPlayerDisplay();
+assert.equal(document.querySelector("#player-song-title").textContent, "Cruising for a Musing");
+```
+
+Your `setPlayerDisplay` function should set the `textContent` of `songArtist` to the current song's artist, if defined, or to an empty string.
+
+```js
+userData.currentSong = null;
+setPlayerDisplay();
+assert.isEmpty(document.querySelector("#player-song-artist").textContent);
+userData.currentSong = allSongs[3];
+setPlayerDisplay();
+assert.equal(document.querySelector("#player-song-artist").textContent, "Quincy Larson");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
new file mode 100644
index 0000000000..05a1c97013
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
@@ -0,0 +1,760 @@
+---
+id: 6752ecd811c96d5dc33ae853
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+To ensure the player's display updates whenever a new song begins playing, call the `setPlayerDisplay()` function within the `playSong()` function.
+
+Now you should see the song title and the artist show up in the display.
+
+# --hints--
+
+You should call `setPlayerDisplay` within your `playSong` function.
+
+```js
+let flag;
+const temp = setPlayerDisplay;
+setPlayerDisplay = () => {flag = true}
+try {
+  playSong(3);
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayerDisplay = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+--fcc-editable-region--
+
+--fcc-editable-region--
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
new file mode 100644
index 0000000000..3feaeff1a8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
@@ -0,0 +1,769 @@
+---
+id: 6752edba757ff96404faf9e9
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+To make the application more accessible, it is important that the play button describes the current song or the first song in the playlist.
+
+Create a function named `setPlayButtonAccessibleText`. Inside the function, set the `aria-label` attribute of the play button to `Play` followed by a space and the current song's title. If `userData.currentSong` is `null`, set it to `Play`.
+
+# --hints--
+
+You should have a function named `setPlayButtonAccessibleText`.
+
+```js
+assert.isFunction(setPlayButtonAccessibleText);
+```
+
+Your `setPlayButtonAccessibleText` function should set the `aria-label` attribute of the play button to `Play` followed by a space and the current song's title.
+
+```js
+userData.currentSong = allSongs[3];
+setPlayButtonAccessibleText();
+assert.equal(playButton.getAttribute("aria-label"), "Play Cruising for a Musing");
+```
+
+ When `userData.currentSong` is `null`, `setPlayButtonAccessibleText` should set the `aria-label` attribute of the play button to `Play` followed by a space and title of the first song in your playlist.
+
+ ```js
+userData.currentSong = null;
+setPlayButtonAccessibleText();
+assert.equal(playButton.getAttribute("aria-label"), "Play");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
new file mode 100644
index 0000000000..3605b56ff4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
@@ -0,0 +1,764 @@
+---
+id: 675304e7937e62902e08a3ab
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Now, call the `setPlayButtonAccessibleText` function inside the `playSong` function.
+
+# --hints--
+
+You should call the `setPlayButtonAccessibleText` function inside the `playSong` function.
+
+```js
+let flag;
+const temp = setPlayButtonAccessibleText;
+setPlayButtonAccessibleText = () => {flag = true}
+try {
+  playSong(3);
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayButtonAccessibleText = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+--fcc-editable-region--
+
+--fcc-editable-region--
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
new file mode 100644
index 0000000000..323329e819
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
@@ -0,0 +1,1442 @@
+---
+id: 675309b2795c2a9ae03b8812
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Notice that the album art in the HTML and songs in the `userData.songs` array have changed. We've swapped out the original songs for shorter ones that you can use to test your app.
+
+All the core functionalities are now in place. The only issue now is that the next song does not automatically play when the currently playing song ends.
+
+To fix that, you can set up an event listener which will detect when the currently playing song ends. The `"ended"` event listener is appropriate for this. It is fired when the playback of a media reaches the end.
+
+Add an event listener to the `audio` element which listens for the `"ended"` event and pass in a a reference to the `playNextSong` function. With that the music player project is complete!
+
+# --hints--
+
+You should chain the `addEventListener()` method to your `audio` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(/)
+```
+
+The event listener you used on on your `audio` variable should listen for an `"ended"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(\s*('|")ended\1/)
+```
+
+You should pass in a reference to `playNextSong` to your `"ended"` event listener.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(\s*('|")ended\1\s*,\s*playNextSong\s*\)\s*;?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/digital-drift.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Hello World</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:23</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">In the Zone</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:11</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Camper Cat</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:21</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Electronic</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:15</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Sailing Away</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:22</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Hello World",
+    artist: "Rafael",
+    duration: "0:23",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/hello-world.mp3",
+  },
+  {
+    id: 1,
+    title: "In the Zone",
+    artist: "Rafael",
+    duration: "0:11",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/in-the-zone.mp3",
+  },
+  {
+    id: 2,
+    title: "Camper Cat",
+    artist: "Rafael",
+    duration: "0:21",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/camper-cat.mp3",
+  },
+  {
+    id: 3,
+    title: "Electronic",
+    artist: "Rafael",
+    duration: "0:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/electronic.mp3",
+  },
+  {
+    id: 4,
+    title: "Sailing Away",
+    artist: "Rafael",
+    duration: "0:22",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    setPlayerDisplay();
+    highlightCurrentSong();
+    setPlayButtonAccessibleText();
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  } 
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  }
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    setPlayerDisplay();
+    highlightCurrentSong();
+    setPlayButtonAccessibleText();
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+
+audio.addEventListener("ended", playNextSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
new file mode 100644
index 0000000000..9632fefd63
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
@@ -0,0 +1,795 @@
+---
+id: 67532282ab9b95d7083617ee
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Inside the `playNextSong` function, call the `setPlayerDisplay`, `highlightCurrentSong`, and `setPlayButtonAccessibleText` functions to correctly update the player when the playlist ends.
+
+# --hints--
+
+You should call `setPlayerDisplay` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = setPlayerDisplay;
+setPlayerDisplay = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayerDisplay = temp;
+}
+```
+
+You should call `highlightCurrentSong` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = highlightCurrentSong;
+highlightCurrentSong = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ highlightCurrentSong = temp;
+}
+```
+
+You should call `setPlayButtonAccessibleText` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = setPlayButtonAccessibleText;
+setPlayButtonAccessibleText = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayButtonAccessibleText = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+--fcc-editable-region--
+
+--fcc-editable-region--
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
new file mode 100644
index 0000000000..e9772447ea
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
@@ -0,0 +1,736 @@
+---
+id: 675340b809683f45cae96539
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+If you press the previous button when no song is playing, the first song will play. To fix this, add an `if` statement at the beginning of the `playPreviousSong` function. Check if the current song is `null` and stop the function execution with a `return` statement.
+
+# --hints--
+
+You should add an `if` statement that checks if `userData.currentSong === null` and stops the function execution with a `return` statement inside your `playPreviousSong` function.
+
+```js
+let flag;
+userData.currentSong = null;
+const temp = playSong;
+playSong = id => {flag = true};
+try {
+  playPreviousSong();
+  assert.isUndefined(flag);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
new file mode 100644
index 0000000000..e0ac27e084
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
@@ -0,0 +1,760 @@
+---
+id: 6757f2b25418da4f73e29eb6
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Next, you need to display the current song title and artist in the player display.
+
+As a first step, access the `#player-song-title` and `#player-song-artist` elements, responsible for displaying the song title and artist, and store them into the variables `playingSong` and `songArtist`, respectively.
+
+# --hints--
+
+You should have a variable named `playingSong`.
+
+```js
+assert.isDefined(playingSong);
+```
+
+Your `playingSong` variable should have the value of the `#player-song-title` element.
+
+```js
+assert.equal(playingSong, document.getElementById("player-song-title"));
+```
+
+You should have a variable named `songArtist`.
+
+```js
+assert.isDefined(songArtist);
+```
+
+
+Your `songArtist` variable should have the value of the `#player-song-artist` element.
+
+```js
+assert.equal(songArtist, document.getElementById("player-song-artist"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+
+--fcc-editable-region--
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  highlightCurrentSong();
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
new file mode 100644
index 0000000000..a01f4515e4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
@@ -0,0 +1,690 @@
+---
+id: 6758a61fc7e949923716ec41
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Now, use the `querySelectorAll` method to target the `.playlist-song` elements and store them in a variable named `songs`.
+
+Then, call the `forEach` method on `songs`. Pass in a callback function that uses `song` as the parameter to the method. Leave the curly braces empty for now.
+
+# --hints--
+
+You should have a variable named `songs`.
+
+```js
+assert.isDefined(songs);
+```
+
+You should assign the collection of all `.playlist-song` elements to your `songs` variable.
+
+```js
+assert.deepEqual(songs, document.querySelectorAll(".playlist-song"));
+```
+
+You should call the `forEach` method on `songs` and pass in a callback that uses `song` as the parameter to the method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /songs\s*\.\s*forEach\s*\(\s*(\(\s*song\s*\)|song)\s*=>\s*\{\s*\}\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
new file mode 100644
index 0000000000..3043f819af
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
@@ -0,0 +1,696 @@
+---
+id: 67594f37fa0c684835f1b064
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+When you click a song of your playlist you want to play that song. For that you'll need to add an event listener for the `click` event on each `button` element which is a child of a `song` element.
+
+Complete the callback of your `forEach` to do that. Inside the `addEventListener` callback, call `playSong(n)`, where `n` is the song id that you can get from the `id` attribute of `song`.
+
+Note that each `song` has an `id` attribute of `song-n`: you'll need to get the `n` part and convert it into a number before passing it to `playSong()`.
+
+
+# --hints--
+
+You should add an event listener for the `click` event on each `button` element which is a child of a `.playlist-song` element and call `playSong` with the `id` of the corresponding song.
+
+```js
+const testArr = [];
+const temp = playSong;
+playSong = id => {testArr.push(id)};
+const buttons = document.querySelectorAll(".playlist-song-info");
+try {
+  buttons.forEach((btn, i) => {
+    btn.dispatchEvent(new Event("click"));
+    assert.strictEqual(testArr[i], i);
+  })
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+
+const songs = document.querySelectorAll(".playlist-song");
+--fcc-editable-region--
+songs.forEach((song) => {
+
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
index d4471a3172..63a7d506ec 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
@@ -1,7 +1,7 @@
 ---
 id: 673339d96c56d36e963e888e
 title: Step 1
-challengeType: 0
+challengeType: 1
 dashedName: step-1
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
index 434eb4d4ac..421376dfb1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
@@ -1,7 +1,7 @@
 ---
 id: 6733b5632fb854bc6c58dc0d
 title: Step 2
-challengeType: 0
+challengeType: 1
 dashedName: step-2
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
index e05e5e890d..202f4abcdc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
@@ -1,7 +1,7 @@
 ---
 id: 6733b5e6f210c1bd1afdf8b3
 title: Step 3
-challengeType: 0
+challengeType: 1
 dashedName: step-3
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
index 6a4c5cdab3..9231de5784 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
@@ -1,7 +1,7 @@
 ---
 id: 67349ba230cff237c0f2bdf2
 title: Step 4
-challengeType: 0
+challengeType: 1
 dashedName: step-4
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
index c95db6fd0a..b791a99086 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
@@ -1,7 +1,7 @@
 ---
 id: 67349d6e726b2c3c7f7301e8
 title: Step 5
-challengeType: 0
+challengeType: 1
 dashedName: step-5
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
index 8374f8dbda..b5bef1024f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a13a29acdf47f2b8e161
 title: Step 6
-challengeType: 0
+challengeType: 1
 dashedName: step-6
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
index 9ae42c3995..70c34de803 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a2385c52c54d916a8b86
 title: Step 7
-challengeType: 0
+challengeType: 1
 dashedName: step-7
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
index 31b5014cb3..ec4acf3588 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
@@ -1,13 +1,13 @@
 ---
 id: 6734a606e5968a5a19b77171
 title: Step 8
-challengeType: 0
+challengeType: 1
 dashedName: step-8
 ---
 
 # --description--
 
-Keep adding the remaing plants to your catalog as you did in the previous steps.
+Keep adding the remaining plants to your catalog as you did in the previous steps.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
index 3ca78bd85c..590a19f03e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a772196245601e4b80e0
 title: Step 10
-challengeType: 0
+challengeType: 1
 dashedName: step-10
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
index a28eea531d..951b5ed0a9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
@@ -1,7 +1,7 @@
 ---
 id: 6734ab61e916486c80c490d1
 title: Step 11
-challengeType: 0
+challengeType: 1
 dashedName: step-11
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
index a8e29611ed..3ae74029f7 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
@@ -1,7 +1,7 @@
 ---
 id: 6734b36f1a3ce17e73327f24
 title: Step 9
-challengeType: 0
+challengeType: 1
 dashedName: step-9
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
index 04ab006c27..72caca69d1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
@@ -1,7 +1,7 @@
 ---
 id: 6734bbc0bd741598f942352e
 title: Step 12
-challengeType: 0
+challengeType: 1
 dashedName: step-12
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
index 60de74541c..fa9878a4c0 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
@@ -1,7 +1,7 @@
 ---
 id: 6734c10a327760a665b7d5b9
 title: Step 13
-challengeType: 0
+challengeType: 1
 dashedName: step-13
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
index bab1d29709..847b8ad457 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
@@ -1,7 +1,7 @@
 ---
 id: 6734eee1f9498cd90f9ae340
 title: Step 14
-challengeType: 0
+challengeType: 1
 dashedName: step-14
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
index 9c43b5c453..c321dc91c5 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
@@ -1,7 +1,7 @@
 ---
 id: 6734f0ae9d1cf4dfd43a7805
 title: Step 15
-challengeType: 0
+challengeType: 1
 dashedName: step-15
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
index 02b3040660..8c8ebf9735 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
@@ -1,7 +1,7 @@
 ---
 id: 6734f6290ebd5cfbc75996af
 title: Step 16
-challengeType: 0
+challengeType: 1
 dashedName: step-16
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
index 73474702eb..36fe62960b 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
@@ -1,7 +1,7 @@
 ---
 id: 6734fa225c6667121e589f7e
 title: Step 17
-challengeType: 0
+challengeType: 1
 dashedName: step-17
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
index ef11dfe9c6..1c8ca35ee1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
@@ -1,7 +1,7 @@
 ---
 id: 67350acfd2006f2777295b96
 title: Step 19
-challengeType: 0
+challengeType: 1
 dashedName: step-19
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
index e0ae1e9d5b..a80c1888f4 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
@@ -1,7 +1,7 @@
 ---
 id: 67351225403acd3d6f70ed6d
 title: Step 20
-challengeType: 0
+challengeType: 1
 dashedName: step-20
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
index 3afd6675cd..ec01519893 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
@@ -1,7 +1,7 @@
 ---
 id: 6735145b0ee741461bdbaa49
 title: Step 21
-challengeType: 0
+challengeType: 1
 dashedName: step-21
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
index ac6b1bad8c..06fb99e146 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
@@ -1,7 +1,7 @@
 ---
 id: 673521668be7905059b2d555
 title: Step 22
-challengeType: 0
+challengeType: 1
 dashedName: step-22
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
index 1b6c653301..b36412fab1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
@@ -1,7 +1,7 @@
 ---
 id: 673529d08c0d9c5a4193a465
 title: Step 23
-challengeType: 0
+challengeType: 1
 dashedName: step-23
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
index 55cac8955c..8af02f8bdc 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
@@ -1,7 +1,7 @@
 ---
 id: 673762590f4bc1771c3a1e97
 title: Step 18
-challengeType: 0
+challengeType: 1
 dashedName: step-18
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
index 4e4aa92217..59dd010829 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
@@ -1,7 +1,7 @@
 ---
 id: 673788448f390305b34aa814
 title: Step 24
-challengeType: 0
+challengeType: 1
 dashedName: step-24
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
index 1a0f5add4d..98a969fec1 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a1a073a0d14c6544d301
 title: Step 25
-challengeType: 0
+challengeType: 1
 dashedName: step-25
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
index 555ac8c0bb..872d85d4cd 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a5058ff3015829ce3265
 title: Step 26
-challengeType: 0
+challengeType: 1
 dashedName: step-26
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
index acf2553d9d..87f60c941a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a95d5b431860f96ca7bb
 title: Step 27
-challengeType: 0
+challengeType: 1
 dashedName: step-27
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
index 5535ddc2b4..86d4e1cf56 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
@@ -1,7 +1,7 @@
 ---
 id: 6737ac8e4fe7ae6b91c806bd
 title: Step 28
-challengeType: 0
+challengeType: 1
 dashedName: step-28
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
index f870b317ad..56f100039e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
@@ -1,7 +1,7 @@
 ---
 id: 6737c6d5d66b5cc3dac09c7b
 title: Step 29
-challengeType: 0
+challengeType: 1
 dashedName: step-29
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
index 5667eed1f6..22eb31e16d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
@@ -1,7 +1,7 @@
 ---
 id: 6738a5c704680355e29e077c
 title: Step 30
-challengeType: 0
+challengeType: 1
 dashedName: step-30
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
index e197b25a68..6a4d9b1d21 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
@@ -1,7 +1,7 @@
 ---
 id: 6738a8035efec45acd8fdbf9
 title: Step 31
-challengeType: 0
+challengeType: 1
 dashedName: step-31
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
index 5d86143a24..d98957698a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
@@ -1,7 +1,7 @@
 ---
 id: 6738ad2fd11775752d23ddc2
 title: Step 32
-challengeType: 0
+challengeType: 1
 dashedName: step-32
 ---
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
index aea603952c..4d432e095c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
@@ -7,58 +7,56 @@ dashedName: step-14
 
 # --description--
 
-You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign each to a variable name that matches the ID.
-
-Remember to use camelCase!
+You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign them to the variables `ingredientName`, `ingredientQuantity`, `unitToConvert`, `numberOfServings`, `recipeForm`, and `resultList`, respectively.
 
 # --hints--
 
-You should define an `ingredient` variable.
+You should define an `ingredientName` variable.
 
 ```js
-assert.isDefined(ingredient);
+assert.isDefined(ingredientName);
 ```
 
-Your `ingredient` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
+Your `ingredientName` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
 
 ```js
-assert.strictEqual(ingredient, document.getElementById("ingredient"));
+assert.strictEqual(ingredientName, document.getElementById('ingredient'));
 ```
 
-You should define a `quantity` variable.
+You should define a `ingredientQuantity` variable.
 
 ```js
-assert.isDefined(quantity);
+assert.isDefined(ingredientQuantity);
 ```
 
-Your `quantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
+Your `ingredientQuantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
 
 ```js
-assert.strictEqual(quantity, document.getElementById("quantity"));
+assert.strictEqual(ingredientQuantity, document.getElementById('quantity'));
 ```
 
-You should define a `unit` variable.
+You should define a `unitToConvert` variable.
 
 ```js
-assert.isDefined(unit);
+assert.isDefined(unitToConvert);
 ```
 
-Your `unit` variable should be the element returned from `.getElementById()` with the `unit` ID.
+Your `unitToConvert` variable should be the element returned from `.getElementById()` with the `unit` ID.
 
 ```js
-assert.strictEqual(unit, document.getElementById("unit"));
+assert.strictEqual(unitToConvert, document.getElementById('unit'));
 ```
 
-You should define a `servings` variable.
+You should define a `numberOfServings` variable.
 
 ```js
-assert.isDefined(servings);
+assert.isDefined(numberOfServings);
 ```
 
-Your `servings` variable should be the element returned from `.getElementById()` with the `servings` ID.
+Your `numberOfServings` variable should be the element returned from `.getElementById()` with the `servings` ID.
 
 ```js
-assert.strictEqual(servings, document.getElementById("servings"));
+assert.strictEqual(numberOfServings, document.getElementById('servings'));
 ```
 
 You should define a `recipeForm` variable.
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
index 1e10d076ad..58b5cc772d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
@@ -218,10 +218,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
index 3f30a8427b..4094f64a66 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
@@ -191,10 +191,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
index 80e0fd7f68..9f06d4a43e 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
@@ -7,7 +7,7 @@ dashedName: step-17
 
 # --description--
 
-Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unit.value`).
+Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unitToConvert.value`).
 
 If so, you will need to convert the existing unit to your current unit, and append a list item to `resultList` with the following format:
 
@@ -20,10 +20,10 @@ For example, a conversion result of five grams for flour should look like `Flour
 Your `updateResultsList` function should properly update the DOM.
 
 ```js
-ingredient.value = "Flour";
-quantity.value = 5;
-servings.value = 5;
-unit.value = "gram";
+ingredientName.value = "Flour";
+ingredientQuantity.value = 5;
+numberOfServings.value = 5;
+unitToConvert.value = "gram";
 updateResultsList();
 assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
 assert.include(resultList.innerHTML, "<li>Flour: 0.88 ounce</li>");
@@ -193,10 +193,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
index be34a7dd13..233026de48 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
@@ -18,10 +18,10 @@ Once that's done, take some time to experiment with different values in the form
 Your `recipeForm` should call `updateResultsList` when submitted.
 
 ```js
-ingredient.value = "Flour";
-quantity.value = 5;
-servings.value = 5;
-unit.value = "gram";
+ingredientName.value = "Flour";
+ingredientQuantity.value = 5;
+numberOfServings.value = 5;
+unitToConvert.value = "gram";
 const submit = new Event("submit");
 recipeForm.dispatchEvent(submit);
 assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
@@ -192,10 +192,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
@@ -205,15 +205,15 @@ const updateResultsList = () => {
   resultList.innerHTML = "";
 
   units.forEach((newUnit) => {
-    if (newUnit !== unit.value) {
+    if (newUnit !== unitToConvert.value) {
       const convertedQuantity = processIngredient(
-        parseFloat(quantity.value),
-        unit.value,
+        parseFloat(ingredientQuantity.value),
+        unitToConvert.value,
         newUnit,
-        parseFloat(servings.value)
+        parseFloat(numberOfServings.value)
       );
 
-      resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
+      resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
     }
   });
 }
@@ -384,10 +384,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
@@ -397,15 +397,15 @@ const updateResultsList = () => {
   resultList.innerHTML = "";
 
   units.forEach((newUnit) => {
-    if (newUnit !== unit.value) {
+    if (newUnit !== unitToConvert.value) {
       const convertedQuantity = processIngredient(
-        parseFloat(quantity.value),
-        unit.value,
+        parseFloat(ingredientQuantity.value),
+        unitToConvert.value,
         newUnit,
-        parseFloat(servings.value)
+        parseFloat(numberOfServings.value)
       );
 
-      resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
+      resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
     }
   });
 }
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
index 82e8993d59..2e0e0fd742 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
@@ -3,6 +3,7 @@ id: 6740495ba48aa94e5667b436
 title: Step 1
 challengeType: 0
 dashedName: step-1
+demoType: onLoad
 ---
 
 # --description--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
index 9f8abb48f9..70bb00037a 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
@@ -17,13 +17,13 @@ You should create a `ul` element inside your third `li` element.
 assert(document.querySelector('li ul'));
 ```
 
-Your should set the `className` attribute of your `ul` element to `sub-menu`.
+You should set the `className` attribute of your `ul` element to `sub-menu`.
 
 ```js
 assert.equal(document.querySelector('li ul')?.getAttribute('class'), 'sub-menu');
 ```
 
-Your should set the `aria-label` attribute of your `ul` element to `Apps`.
+You should set the `aria-label` attribute of your `ul` element to `Apps`.
 
 ```js
 assert.equal(document.querySelector('li ul')?.getAttribute('aria-label'), 'Apps');
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
new file mode 100644
index 0000000000..274e512a79
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
@@ -0,0 +1,125 @@
+---
+id: 674ef11f75254548672d998c
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this project, you will learn how to work with props by building a reusable profile card component.
+
+Start by using the `export` keyword to create a `Card` functional component with `name`, `title`, and `bio` as the props. Don't forget to make sure they're all wrapped in a curly brace. That way, you destructure them instead of accessing them from `props`.
+
+Also, return a pair of parentheses with an empty string inside of them for now.
+
+# --hints--
+
+You should create and export a `Card` functional component. Don't forget to return an empty string inside it.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+assert.lengthOf(mockedComponent.find('Card'), 1);
+```
+
+Your `Card` component should have a `name`, `title`, and `bio` props.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const componentFunction = mockedComponent.type();
+const propsSource = componentFunction.toString();
+
+assert.match(propsSource, /\bname\b/);
+assert.match(propsSource, /\btitle\b/);
+assert.match(propsSource, /\bbio\b/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
new file mode 100644
index 0000000000..cd896b45aa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
@@ -0,0 +1,116 @@
+---
+id: 674ef2d357676e50e4691658
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Inside the return, remove the empty string, then create a `div` element with a `className` of `card`.
+
+# --hints--
+
+You should not have an empty string in your Card component.
+
+```js
+assert.notMatch(code, /""/)
+```
+
+You should create a `div` element with the `className` `card` at the top level of your `Card` component.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+assert.equal(mockedComponent.childAt(0).type(), 'div');
+assert.isTrue(mockedComponent.childAt(0).hasClass('card'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+  --fcc-editable-region--
+  ""
+  --fcc-editable-region--
+  )
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
new file mode 100644
index 0000000000..cc5141ec81
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
@@ -0,0 +1,166 @@
+---
+id: 674ef2d357676e50e4691659
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Inside the `div` element, create an `h2` element and interpolate the `name` prop as its text.
+
+Also, inside the `div`, create a paragraph with the `className` of `card-title` to interpolate the `title` prop, and another paragraph to interpolate the `bio` prop.
+
+# --hints--
+
+You should create an `h2` element inside your `div` element.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const h2Elem = mockedComponent.find('h2');
+
+assert.equal(h2Elem.parent().type(), 'div');
+```
+
+Your `h2` element should have `{name}` as its text content.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { name: 'nameVal' })
+);
+
+const h2Elem = mockedComponent.find('h2');
+
+assert.equal(h2Elem.text(), 'nameVal'); 
+```
+
+You should create a `p` tag with the `className` of `card-title` inside your `div` element.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const pElem = mockedComponent.find('p.card-title');
+
+assert.equal(pElem.parent().type(), 'div');
+```
+
+Your `p` element with `className` of `card-title` should have `{title}` as its text content.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { title: 'titleVal' })
+);
+
+const pElem = mockedComponent.find('p.card-title');
+
+assert.equal(pElem.text(), 'titleVal');
+assert.equal(pElem.parent().type(), 'div');
+```
+
+You should create another `p` element with `{bio}` as its text.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { bio: 'bioVal' })
+);
+
+const secondPElem = mockedComponent.children().childAt(2)
+
+assert.equal(secondPElem.type(), 'p')
+assert.equal(secondPElem.text(), 'bioVal');
+assert.equal(secondPElem.parent().type(), 'div');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    --fcc-editable-region--
+    <div className="card">
+
+    </div>
+    --fcc-editable-region--
+  )
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
new file mode 100644
index 0000000000..7e92584a83
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
@@ -0,0 +1,117 @@
+---
+id: 674ef2d357676e50e469165a
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+To start using the `Card` component, use the `export` keyword to create an `App` functional component.
+
+Inside the `App` component, return a pair of parentheses containing an empty string.
+
+# --hints--
+
+You should export an `App` functional component.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.App)
+);
+
+assert.lengthOf(mockedComponent.find('App'), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
new file mode 100644
index 0000000000..db3fbd1070
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
@@ -0,0 +1,126 @@
+---
+id: 674ef2d357676e50e469165b
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Inside your return statement, replace the empty string with a `div` element with a `className` property of `flex-container`.
+
+# --hints--
+
+You should not have an empty string in your Card component.
+
+```js
+assert.notMatch(code, /""/)
+```
+
+You should create a `div` element with the class `flex-container`.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.App)
+);
+
+assert.equal(mockedComponent.childAt(0).type(), 'div');
+assert.isTrue(mockedComponent.childAt(0).hasClass('flex-container'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+  --fcc-editable-region--
+    ""
+  --fcc-editable-region--
+  );
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
new file mode 100644
index 0000000000..d6d3cddd97
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
@@ -0,0 +1,144 @@
+---
+id: 674ef2d357676e50e469165c
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, use the `Card` component with the `name` prop set to `"Mark"`, the `title` prop set to `"Frontend developer"`, and the `bio` set to `"I like to work with different frontend technologies and play video games."`
+
+# --hints--
+
+You should use the `Card` component as an element with a `name` prop set to `"Mark"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().name, "Mark")
+```
+
+You should use the `Card` component as an element with a `title` prop set to `"Frontend developer"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().title, "Frontend developer")
+```
+
+You should use the `Card` component as an element with a `bio` prop set to `"I like to work with different frontend technologies and play video games."`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().bio, "I like to work with different frontend technologies and play video games.")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+    </div>
+  );
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
new file mode 100644
index 0000000000..d882a9c526
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
@@ -0,0 +1,265 @@
+---
+id: 674ef2d357676e50e469165d
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Again, use the `Card` component two more times with the following:
+
+| Props   | First Card Values                                                                     | Second Card Values                                                                          |
+| ------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `name`  | `"Tiffany"`                                                                           | `"Doug"`                                                                                    |
+| `title` | `"Engineering manager"`                                                               | `"Backend developer"`                                                                       |
+| `bio`   | `"I have worked in tech for 15 years and love to help people grow in this industry."` | `"I have been a software developer for over 20 years and I love working with Go and Rust."` |
+
+With that, your reusable profile card component project is complete!
+
+# --hints--
+
+You should use the `Card` component as an element with the appropriate props and first card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[1], {
+  name: 'Tiffany',
+  title: 'Engineering manager',
+  bio: 'I have worked in tech for 15 years and love to help people grow in this industry.'
+});
+```
+
+You should use the `Card` component as an element with the appropriate props and second card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[2], {
+  name: 'Doug',
+  title: 'Backend developer',
+  bio: 'I have been a software developer for over 20 years and I love working with Go and Rust.'
+});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+      <Card
+        name="Mark"
+        title="Frontend developer"
+        bio="I like to work with different frontend technologies and play video games."
+      />
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  );
+}
+```
+
+# --solutions--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+      <Card
+        name="Mark"
+        title="Frontend developer"
+        bio="I like to work with different frontend technologies and play video games."
+      />
+
+      <Card
+        name="Tiffany"
+        title="Engineering manager"
+        bio="I have worked in tech for 15 years and love to help people grow in this industry."
+      />
+
+      <Card
+        name="Doug"
+        title="Backend developer"
+        bio="I have been a software developer for over 20 years and I love working with Go and Rust."
+      />
+    </div>
+  );
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
index b8e29ec814..0c968e737f 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
@@ -7,7 +7,7 @@ dashedName: step-6
 
 # --description--
 
-Now it’s time to get the results of the round. 完成 `getRoundResults` 函數。
+Now it's time to get the results of the round. 完成 `getRoundResults` 函數。
 
 如果玩家贏了這一局，將 `playerScore` 增加 `1`，並返回消息 `"Player wins! [player's choice] beats [computer's choice]"`。
 
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
index 707188ca50..da50c3bf53 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
@@ -19,7 +19,7 @@ You should create a `getVowelCount` function.
 assert.isFunction(getVowelCount);
 ```
 
-You `getVowelCount` function should have a `sentence` parameter.
+Your `getVowelCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getVowelCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
index 6259d9172c..d1b254b78d 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
@@ -21,7 +21,7 @@ You should create a `getConsonantCount` function.
 assert.isFunction(getConsonantCount);
 ```
 
-You `getConsonantCount` function should have a `sentence` parameter.
+Your `getConsonantCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getConsonantCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
index b2e890f098..23b01c48ce 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
@@ -23,7 +23,7 @@ You should create a `getPunctuationCount` function.
 assert.isFunction(getPunctuationCount);
 ```
 
-You `getPunctuationCount` function should have a `sentence` parameter.
+Your `getPunctuationCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getPunctuationCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
index b04049d706..6f98b81b2c 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
@@ -17,7 +17,7 @@ You should create a `getWordCount` function.
 assert.isFunction(getWordCount);
 ```
 
-You `getWordCount` function should have a `sentence` parameter.
+Your `getWordCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getWordCount.toString(), /sentence/);
@@ -48,13 +48,19 @@ assert.strictEqual(getWordCount("freeCodeCamp offers free coding tutorials onlin
 assert.strictEqual(getWordCount("You can learn HTML, CSS, JavaScript, and more on freeCodeCamp"), 10);
 ```
 
-Your `getWordCount` function should return the correct punctuation count for any sentence.
+Your `getWordCount` function should return the correct word count for any sentence.
 
 ```js
 assert.strictEqual(getWordCount("freeCodeCamp has a great community of kind people"), 8);
 assert.strictEqual(getWordCount("The freeCodeCamp curriculum is constantly updated"), 6);
 assert.strictEqual(getWordCount("freeCodeCamp teaches both frontend and backend development"), 7);
+```
+
+Your `getWordCount` function should return the correct word count for an empty string, or a string only with spaces.
+
+```js
 assert.strictEqual(getWordCount(""), 0);
+assert.strictEqual(getWordCount("   "), 0);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
index fa26b14716..74f9be9983 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
@@ -29,6 +29,7 @@ You should update the first item in the `shoppingList` array to be `"Canola Oil"
 
 ```js
 assert.equal(shoppingList[0], "Canola Oil");
+assert.notEqual(shoppingList[1], "Vegetable Oil");
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
index df09e53686..41c40617a5 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
@@ -13,10 +13,10 @@ And with this last step your grocery list is complete!
 
 # --hints--
 
-You should log the `shoppingList` array to the console.
+You should call the `getShoppingListMsg` function inside of the `console.log`.
 
 ```js
-assert.match(code, /console\.log\(\s*shoppingList\s*\)/);
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 7);
 ```
 
 # --seed--
@@ -112,5 +112,5 @@ console.log("On second thought, maybe we should be more health conscious.");
 shoppingList.shift();
 shoppingList[0] = "Canola Oil";
 
-console.log(shoppingList);
+console.log(getShoppingListMsg());
 ```
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
index be85118bbc..21843201a9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
@@ -13,7 +13,7 @@ With this, you have successfully completed the workshop.
 
 # --hints--
 
-When you cick the `scaryStoryBtn`, the `result` paragraph should display the scary story `"In the dark woods, a group of friends stumbled upon an old, abandoned cabin. They enter the cabin and awaken something malevolent that had been dormant for centuries."` with a border color of `#ee4b2b`.
+When you click the `scaryStoryBtn`, the `result` paragraph should display the scary story `"In the dark woods, a group of friends stumbled upon an old, abandoned cabin. They enter the cabin and awaken something malevolent that had been dormant for centuries."` with a border color of `#ee4b2b`.
 
 ```js
 scaryStoryBtn.click();
@@ -36,7 +36,7 @@ assert.equal(hexColor.toLowerCase(), "#ee4b2b");
 assert.equal(result.textContent.replace(/\s+/g, ' '), expectedStory);
 ```
 
-When you cick the `funnyStoryBtn`, the `result` paragraph should display the funny story with a border color of `#f1be32`.
+When you click the `funnyStoryBtn`, the `result` paragraph should display the funny story with a border color of `#f1be32`.
 
 ```js
 funnyStoryBtn.click();
@@ -59,7 +59,7 @@ assert.equal(hexColor.toLowerCase(), "#f1be32");
 assert.equal(result.textContent.replace(/\s+/g, ' '), expectedFunnyStory);
 ```
 
-When you cick the `adventureStoryBtn`, the `result` paragraph should display the adventure story with a border color of `#acd157`.
+When you click the `adventureStoryBtn`, the `result` paragraph should display the adventure story with a border color of `#acd157`.
 
 ```js
 adventureStoryBtn.click();
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
index f17cd3df37..440d632b22 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
@@ -7,7 +7,7 @@ dashedName: step-37
 
 # --description--
 
-Use arrow syntax to create an `updateTaskContainer` function. Then move the `taskData.forEach()` and its content into it.
+Use arrow syntax to create an `updateTaskContainer` function. Then move the `taskData.forEach()` and its content from the `taskForm`'s `submit` event listener into the newly created function.
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{/)
 You should move `taskData.forEach()` and its content into the `updateTaskContainer()` function.
 
 ```js
-assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`\s*}\s*\)\s*;?\s*\}\s*;?/)
+assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`;?\s*}\s*\)\s*;?\s*\}\s*;?/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
index 24502aad09..154d38bdc9 100644
--- a/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
+++ b/curriculum/challenges/chinese-traditional/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
@@ -11,7 +11,7 @@ The item you retrieve is a string, as you saved it with `JSON.stringify()`. To v
 
 Use `getItem()` to retrieve the `myTaskArr` array again. This time, wrap it inside `JSON.parse()`, assign it to the variable `getTaskArrObj` and log the `getTaskArrObj` to the console.
 
-Check the console to see the difference between `getTaskArr` and `getTaskObj`.
+Check the console to see the difference between `getTaskArr` and `getTaskArrObj`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
index 5c181aeacf..5b8e138c6a 100644
--- a/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
+++ b/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
@@ -1,5 +1,5 @@
 id: 561abd10cb81ac38a17513bc
-title: JavaScript Algorithms and Data Structures Certification
+title: Legacy JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures
 challengeType: 7
 isPrivate: true
diff --git a/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml b/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
index 5f1c0a9581..c7ae90fa90 100644
--- a/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
+++ b/curriculum/challenges/chinese/00-certifications/javascript-algorithms-and-data-structures-v8/javascript-algorithms-and-data-structures-certification-v8.yml
@@ -1,5 +1,5 @@
 id: 658180220947283cdc0689ce
-title: JavaScript 算法和数据结构（Beta）认证
+title: JavaScript Algorithms and Data Structures Certification
 certification: javascript-algorithms-and-data-structures-v8
 challengeType: 7
 isPrivate: true
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
index 34cd8510a1..e5b0cb16fc 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 为 `blue-box` 的元素的 `margin` 应设置为 `-15px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '-15px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)["margin-top"]; 
+assert.strictEqual(marginTop, "-15px"); 
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
index 425dcfade1..51d36422da 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
@@ -38,35 +38,42 @@ Remember that you can apply multiple classes to an element using its `class` att
 Your `img` element should have the class `smaller-image`.
 
 ```js
-assert($('img').hasClass('smaller-image'));
+assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
 ```
 
 Your `img` element should have the class `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Your image should have a border width of `10px`.
 
 ```js
-assert(
-  $('img').hasClass('thick-green-border') &&
-    parseInt($('img').css('border-top-width'), 10) >= 8 &&
-    parseInt($('img').css('border-top-width'), 10) <= 12
-);
+// Note: to any future maintainers, the read width of the border is dependent on 
+// the zoom. For example we cannot match 10px exactly because if a campers set the zoom to 110% 
+// it will be read as 9~px. 
+const image = document.querySelector('img'); 
+const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; 
+const widthNumber = parseInt(imageBorderTopWidth);
+assert.isAtLeast(widthNumber, 8);
+assert.isAtMost(widthNumber, 12);
 ```
 
 Your image should have a border style of `solid`.
 
 ```js
-assert($('img').css('border-right-style') === 'solid');
+const image = document.querySelector('img'); 
+const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; 
+assert.strictEqual(borderRightStyle, 'solid');
 ```
 
 The border around your `img` element should be green.
 
 ```js
-assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+const image = document.querySelector('img'); 
+const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; 
+assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
index 17ff59548b..fab3452357 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ CSS 允许你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-le
 class 为 `blue-box` 的元素的上外边距属性值 `margin` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 class 为 `blue-box` 的元素的右外边距属性值 `margin` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 class 为 `blue-box` 的元素的下外边距属性值 `margin` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 class 为 `blue-box` 的元素的左外边距属性值 `margin` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft,'40px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
index f537d3044a..95174ac8e0 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
@@ -22,25 +22,33 @@ CSS 允许你使用 `padding-top`、`padding-right`、`padding-bottom`、`paddin
 class 为 `blue-box` 的元素的上内边距属性值 `padding` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 class 为 `blue-box` 的元素的右内边距属性值 `padding` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 class 为 `blue-box` 的元素的下内边距属性值 `padding` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 class 为 `blue-box` 的元素的左内边距属性值 `padding` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
index a2c0a8f3f2..b38b8630ae 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
@@ -22,18 +22,23 @@ Your cat photo currently has sharp corners. We can round out those corners with
 图片元素应有 `thick-green-border` class。
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 图片的边框半径应为 `10px`。
 
 ```js
-assert(
-  $('img').css('border-top-left-radius') === '10px' &&
-    $('img').css('border-top-right-radius') === '10px' &&
-    $('img').css('border-bottom-left-radius') === '10px' &&
-    $('img').css('border-bottom-right-radius') === '10px'
-);
+const image = document.querySelector('img');
+const style = window.getComputedStyle(image);  
+const borderTopLeftRadius = style['border-top-left-radius']; 
+const borderTopRightRadius = style['border-top-right-radius'];
+const borderBottomLeftRadius = style['border-bottom-left-radius'];
+const borderBottomRightRadius = style['border-bottom-right-radius'];
+
+assert.strictEqual(borderTopLeftRadius, '10px');
+assert.strictEqual(borderTopRightRadius, '10px');
+assert.strictEqual(borderBottomLeftRadius, '10px');
+assert.strictEqual(borderBottomRightRadius, '10px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
index 68a70d4eda..dadf7ee00b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
@@ -24,7 +24,9 @@ An element's `margin` controls the amount of space between an element's `border`
 class 为 `blue-box` 的元素的 `margin` 值应为 `20px`。
 
 ```js
-assert($('.blue-box').css('margin-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '20px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
index bab6a12ec4..bf65910dd9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
@@ -30,7 +30,9 @@ Now let's put our Cat Photo App away for a little while and learn more about sty
 `blue-box` 这一 class 应将元素的 `padding` 值设置为 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '20px');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
index 1d49492240..a8ed8ae6c7 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
@@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to
 The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
index 0cbf8822ae..4d20974545 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
@@ -22,17 +22,13 @@ When you create your variables in `:root` they will set the value of that variab
 应在 `penguin` class 里重定义 `--penguin-belly` 的变量值，新的值应为 `white`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` 类不应包含 `background-color` 属性。
 
 ```js
-assert(
-  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
-);
+assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
 ```
 
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.md
index 1ec9e8ca66..597cd0f5dc 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.md
@@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red.
 Your `h2` element should have a `style` declaration.
 
 ```js
-assert($('h2').attr('style'));
+assert.exists(document.querySelector('h2').getAttribute('style'));
 ```
 
 Your `h2` element should have color set to `red`.
 
 ```js
-assert($('h2')[0].style.color === 'red');
+assert.strictEqual(document.querySelector('h2').style.color, 'red');
 ```
 
 Your `style` declaration should end with a `;` .
 
 ```js
-assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
index edbdd6c3b9..8b0cb728c2 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
@@ -26,7 +26,7 @@ h1 {
 在 `style` 样式声明区域里，`p` 元素的 `font-size` 的值应为 `16px`。 请注意，浏览器和文本缩放应设置为 100％。
 
 ```js
-assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
index 94a4a6d631..9abe29e6ef 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
@@ -26,9 +26,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr
 应在 `penguin` class 里声明 `--penguin-skin` 变量，且赋值为 `gray`。
 
 ```js
-assert(
-  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
index 3547e29603..bbe98748c9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
@@ -28,19 +28,21 @@ You can set an element's background color with the `background-color` property.
 `div` 元素应有 `silver-background` class。
 
 ```js
-assert($('div').hasClass('silver-background'));
+assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
 ```
 
 `div` 元素背景颜色应设置为银色。
 
 ```js
-assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+const div = document.querySelector('div');
+const backgroundColor = window.getComputedStyle(div)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
 ```
 
 class 名 `silver-background` 应该定义在 `style` 元素内；`background-color` 的属性值应为 `silver`。
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.md
index adce52b0df..313eacde6a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/import-a-google-font.md
@@ -40,37 +40,29 @@ GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备
 应引入 `Lobster` 字体。
 
 ```js
-assert($('link[href*="googleapis" i]').length);
+assert.exists(document.querySelector('link[href*="googleapis" i]'));
 ```
 
 `h2` 元素应使用 `Lobster` 字体。
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/lobster/i)
-);
+const h2 = document.querySelector('h2'); 
+const fontFamily = window.getComputedStyle(h2)['font-family']; 
+assert.match(fontFamily, /lobster/i);
 ```
 
 应使用元素选择器（`h2`）来改变字体样式。
 
 ```js
-assert(
-  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
 ```
 
 `p` 元素应保持使用 `monospace` 字体。
 
 ```js
-assert(
-  $('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
index c95407712b..126faaa5b6 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
@@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red-
 Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
-    )
+const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
+assert.match(
+  spacelessCode,
+  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
 );
 ```
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-css-variables.md
index d6eba1d969..a19967cb9c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-css-variables.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-css-variables.md
@@ -24,8 +24,9 @@ CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有
 应在 `:root` 里声明 `--penguin-belly` 变量并赋值 `pink`。
 
 ```js
-assert(
-  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
 );
 ```
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
index 28b3409b62..1603c882ab 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
@@ -26,61 +26,57 @@ First, create an `h1` element with the text `Hello World`.
 应创建一个 `h1` 元素。
 
 ```js
-assert($('h1').length > 0);
+assert.isNotEmpty(document.querySelectorAll('h1'));
 ```
 
 `h1` 元素的内容文本应为 `Hello World`。
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .text()
-      .match(/hello world/i)
+assert.match(
+  document.querySelector('h1').textContent,
+  /hello world/i
 );
 ```
 
 确保 `h1` 元素具有结束标签。
 
 ```js
-assert(
-  code.match(/<\/h1>/g) &&
-    code.match(/<h1/g) &&
-    code.match(/<\/h1>/g).length === code.match(/<h1/g).length
-);
+const commentlessCode = __helpers.removeHtmlComments(code);
+assert.match(commentlessCode, /<\/h1>/g);
+assert.match(commentlessCode, /<h1/g);
+assert.lengthOf(commentlessCode.match(/<\/h1>/g), commentlessCode.match(/<h1/g).length);
 ```
 
 `body` 元素的 `color` 属性值应为 `green`。
 
 ```js
-assert($('body').css('color') === 'rgb(0, 128, 0)');
+const bodyElement = document.querySelector('body');
+const color = window.getComputedStyle(bodyElement)['color']; 
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 `body` 元素的 `font-family` 属性值应为 `monospace`。
 
 ```js
-assert(
-  $('body')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const bodyElement = document.querySelector('body');
+const fontFamily = window.getComputedStyle(bodyElement)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 `h1` 元素应该继承 `body` 的 `monospace` 字体属性。
 
 ```js
-assert(
-  $('h1').length > 0 &&
-    $('h1')
-      .css('font-family')
-      .match(/monospace/i)
-);
+const h1Element = document.querySelector('h1');
+const fontFamily = window.getComputedStyle(h1Element)['font-family'];
+assert.include(fontFamily.toLowerCase(), "monospace");
 ```
 
 `h1` 元素应该继承 `body` 的 `green` 颜色属性。
 
 ```js
-assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(0, 128, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
index 5c9388b832..384448ba37 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
@@ -20,13 +20,15 @@ In addition to pixels, you can also specify the `border-radius` using a percenta
 图片的边框圆角应设置为 `50%`，这样图片就会是圆形的。
 
 ```js
-assert(parseInt($('img').css('border-top-left-radius')) > 48);
+const image = document.querySelector('img');
+const borderTopLeftRadius = window.getComputedStyle(image)['border-top-left-radius'];
+assert.strictEqual(parseInt(borderTopLeftRadius), 50);
 ```
 
 `border-radius` 的值应为 `50%`。
 
 ```js
-assert(code.match(/50%/g));
+assert.match(__helpers.removeCssComments(code), /50%/g);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
index 0acad90c5a..68f5386035 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
@@ -32,39 +32,41 @@ color: red !important;
 `h1` 元素应包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素应包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 元素应有 `id`， 值为 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 `h1` 元素应有一个内联样式 `color: white`。
 
 ```js
-assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
+const commentessCode = __helpers.removeHtmlComments(code);
+assert.match(commentessCode, /<h1.*style/gi);
+assert.match(commentessCode, /<h1.*style.*color\s*?:/gi);
 ```
 
 `pink-text` class 应有 `!important` 关键词 ，以覆盖其他声明。
 
 ```js
-assert(
-  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
-);
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g);
 ```
 
 `h1` 元素应为粉红色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color'];
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
index da56beb1a4..9812e07460 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
@@ -40,43 +40,45 @@ We just proved that browsers read CSS from top to bottom in order of their decla
 `h1` 元素应包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素应包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 元素的 id 应为 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'),'orange-text');
 ```
 
 应只有一个 `h1` 元素。
 
 ```js
-assert($('h1').length === 1);
+assert.lengthOf(document.querySelectorAll('h1'), 1);
 ```
 
 应存在名为 `orange-text` 的 id 选择器。
 
 ```js
-assert(code.match(/#orange-text\s*{/gi));
+assert.match(__helpers.removeCssComments(code), /#orange-text\s*{/gi);
 ```
 
 不要在 `h1` 元素里面使用 `style` 属性。
 
 ```js
-assert(!code.match(/<h1.*style.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<h1.*style.*>/gi);
 ```
 
 `h1` 元素的字体颜色应为橘色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 165, 0)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
index ad55a36a60..1eb8701615 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -28,31 +28,33 @@ So we've proven that id declarations override class declarations, regardless of
 `h1` 元素应包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素应包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `h1` 的 id 属性值应为 `orange-text`。
 
 ```js
-assert($('h1').attr('id') === 'orange-text');
+assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
 ```
 
 `h1` 元素应含有行内样式。
 
 ```js
-assert(document.querySelector('h1[style]'));
+assert.exists(document.querySelector('h1[style]'));
 ```
 
 `h1` 元素的字体颜色应该为白色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 255, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 255, 255)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
index 214b3709da..584dead762 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
@@ -34,25 +34,27 @@ class="class1 class2"
 `h1` 元素应包含 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `h1` 元素应包含 `blue-text` class。
 
 ```js
-assert($('h1').hasClass('blue-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
 ```
 
 `blue-text` 和 `pink-text` 需同时应用于 `h1` 元素上。
 
 ```js
-assert($('.pink-text').hasClass('blue-text'));
+assert.isTrue(document.querySelector('.pink-text').classList.contains('blue-text'));
 ```
 
 `h1` 元素的颜色应为蓝色。
 
 ```js
-assert($('h1').css('color') === 'rgb(0, 0, 255)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
index 764397bc43..e58dfa8b5b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -26,19 +26,21 @@ Sometimes your HTML elements will receive multiple styles that conflict with one
 `h1` 元素应含有 `pink-text` class。
 
 ```js
-assert($('h1').hasClass('pink-text'));
+assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
 ```
 
 `<style>` 标签应含有一个可以改变 `color` 的 `pink-text` class。
 
 ```js
-assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g);
 ```
 
 `h1` 元素的字体颜色应为粉色。
 
 ```js
-assert($('h1').css('color') === 'rgb(255, 192, 203)');
+const h1Element = document.querySelector('h1');
+const color = window.getComputedStyle(h1Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 192, 203)');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
index 2c86fe60b5..54551af760 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
@@ -28,12 +28,9 @@ Make all of your `p` elements use the `monospace` font.
 Your `p` elements should use the font `monospace`.
 
 ```js
-assert(
-  $('p')
-    .not('.red-text')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const notRed = document.querySelector('p:not(.red-text)');
+const fontFamily = window.getComputedStyle(notRed)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
index 62bac687be..c2f38e3473 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -30,7 +30,7 @@ In addition to classes, each HTML element can also have an `id` attribute.
 `form` 元素的 id 应为 `cat-photo-form`。
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
index 039358a445..77189791b8 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/size-your-images.md
@@ -29,19 +29,18 @@ CSS has a property called `width` that controls an element's width. Just like wi
 `img` 元素应包含 `smaller-image` class。
 
 ```js
-assert(
-  $("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
-    .trim().split(/\s+/g).includes('smaller-image')
-);
+const relaxingCatImage = document.querySelector("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']");
+const catImageClass = relaxingCatImage.getAttribute('class').trim().split(/\s+/g);
+assert.include(catImageClass, 'smaller-image');
 ```
 
 图片宽度应为 100px。
 
 ```js
-assert(
-  $('img').width() < 200 &&
-    code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
-);
+const image = document.querySelector('img');
+const width = image.getBoundingClientRect().width;
+assert.isBelow(width, 200); 
+assert.match(__helpers.removeCssComments(code), /\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
index 8ac66301cc..477a4a9f15 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
@@ -36,33 +36,27 @@ p {
 h2 元素的字体应设置为 `Lobster`。
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/^"?lobster/i)
-);
+const h2Element = document.querySelector('h2');
+const fontFamily = window.getComputedStyle(h2Element)['font-family']; 
+assert.match(fontFamily, /^"?lobster/i);
 ```
 
 当 `Lobster` 字体失效时，h2 元素应该降级使用 `monospace` 字体。
 
 ```js
-assert(
-  /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi);
 ```
 
 通过添加`<!--`，注释掉 `Lobster` 字体的引入。
 
 ```js
-assert(new RegExp('<!--[^fc]', 'gi').test(code));
+assert.match(code, /<!--[^fc]/gi);
 ```
 
 确保注释要以 `-->` 结束。
 
 ```js
-assert(new RegExp('[^fc]-->', 'gi').test(code));
+assert.match(code, /[^fc]-->/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
index 0c38b600b5..b9923f195b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
@@ -16,34 +16,42 @@ Classes allow you to use the same CSS styles on multiple HTML elements. You can
 `h2` 元素应该是红色的。
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 `h2` 元素应含有 `red-text` class。
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 第一个 `p` 元素应为红色。
 
 ```js
-assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
+const paragraph = document.querySelectorAll('p')[0];
+const color = window.getComputedStyle(paragraph )['color'];
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 第二和第三个 `p` 元素不应为红色。
 
 ```js
-assert(
-  !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
-    !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
-);
+const paragraph2 = document.querySelectorAll('p')[1];
+const paragraph3 = document.querySelectorAll('p')[2];
+
+const color2 = window.getComputedStyle(paragraph2)['color'];
+const color3 = window.getComputedStyle(paragraph3)['color'];
+
+assert.notStrictEqual(color2, 'rgb(255, 0, 0)');
+assert.notStrictEqual(color3, 'rgb(255, 0, 0)');
 ```
 
 第一个 `p` 元素应该包含 `red-text` class。
 
 ```js
-assert($('p:eq(0)').hasClass('red-text'));
+assert.isTrue(document.querySelectorAll('p')[0].classList.contains('red-text'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
index 56acfb8edb..4163378ae3 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/style-the-html-body-element.md
@@ -30,23 +30,22 @@ body {
 `body` 元素的 `background-color` 应为黑色。
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color'];
+
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 确保 CSS 规则格式书写正确，左右大括号也应匹配。
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 Your CSS rule should end with a semicolon.
 
 ```js
-assert(
-  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
-);
+assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
index 6cc9a5b866..f963766e88 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
@@ -26,18 +26,19 @@ The last several challenges all set an element's margin or padding with pixels (
 class 为 `red-box` 的元素应含有 `padding` 属性。
 
 ```js
-assert(
-  $('.red-box').css('padding-top') != '0px' &&
-    $('.red-box').css('padding-right') != '0px' &&
-    $('.red-box').css('padding-bottom') != '0px' &&
-    $('.red-box').css('padding-left') != '0px'
-);
+const redBox =document.querySelector('.red-box'); 
+const style = window.getComputedStyle(redBox); 
+
+assert.notEqual(style['padding-top'], '0px');
+assert.notEqual(style['padding-right'], '0px');
+assert.notEqual(style['padding-bottom'], '0px');
+assert.notEqual(style['padding-left'], '0px');
 ```
 
 class 为 `red-box` 的元素的 `padding` 属性值应为 1.5em。
 
 ```js
-assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
+assert.match(__helpers.removeCssComments(code), /\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
index 67fbcfd33e..56a5abb515 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -34,25 +34,27 @@ Classes are reusable styles that can be added to HTML elements.
 `h2` 元素应为红色。
 
 ```js
-assert($('h2').css('color') === 'rgb(255, 0, 0)');
+const h2Element = document.querySelector('h2'); 
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 `h2` 元素应有一个 `red-text` class。
 
 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
 ```
 
 样式表应该声明一个 `red-text` class，颜色为 `red`。
 
 ```js
-assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g);
 ```
 
 不应在 `h2` 元素里使用行内样式 `style="color: red"`。
 
 ```js
-assert($('h2').attr('style') === undefined);
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
index fca17c44c6..9cb079769a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
@@ -26,41 +26,25 @@ Apply the `--penguin-skin` variable to the `background` property of the `penguin
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi);
 ```
 
 The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
 
 ```js
-assert(
-  code.match(
-    /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
index 226aae645a..7f00b5313e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
@@ -22,21 +22,13 @@ CSS Variables can simplify the way you use media queries.
 `:root` 中的 `--penguin-size` 值应为 `200px`。
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 `:root` 中的 `--penguin-skin` 值应为 `black`。
 
 ```js
-assert(
-  code.match(
-    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
index 775e9e417c..a3efb181ea 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -26,49 +26,57 @@ Many people feel overwhelmed by the possibilities of more than 16 million colors
 文本内容为 `I am red!` 的 `h1` 元素的字体颜色 `color` 应该为红色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 应使用红色的缩写十六进制代码，而不是十六进制代码 `#FF0000`。
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
+assert.match(code,/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am green!` 的 `h1` 元素的字体颜色 `color` 应该为绿色。
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 应使用绿色的缩写十六进制代码，而不是十六进制代码 `#00FF00`。
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色 `color` 应该为蓝绿色。
 
 ```js
-assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+const cyanText = document.querySelector('.cyan-text');
+const color = window.getComputedStyle(cyanText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 255)');
 ```
 
 应使用青色的简写十六进制代码，而不是十六进制代码 `#00FFFF`。
 
 ```js
-assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色 `color` 应该为紫红色。
 
 ```js
-assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+const fuchsiaText = document.querySelector('.fuchsia-text');
+const color = window.getComputedStyle(fuchsiaText)['color']; 
+assert.strictEqual(color,'rgb(255, 0, 255)');
 ```
 
 应使用紫红色的简写十六进制代码，而不是十六进制代码 `#FF00FF`。
 
 ```js
-assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
+assert.match(__helpers.removeCssComments(code), /\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
index 0f109d6ceb..b53765c0f3 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
@@ -32,28 +32,29 @@ One cool thing about `id` attributes is that, like classes, you can style them u
 `form` 元素的 id 应为 `cat-photo-form`。
 
 ```js
-assert($('form').attr('id') === 'cat-photo-form');
+assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
 ```
 
 `form` 元素应含有 `background-color` 属性，颜色为绿色。
 
 ```js
-assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
+const catPhotoForm = document.querySelector('#cat-photo-form');
+const backgroundColor = window.getComputedStyle(catPhotoForm)['background-color'];
+assert.strictEqual(backgroundColor, 'rgb(0, 128, 0)');
 ```
 
 确保 `form` 元素的 `id` 设置正确。
 
 ```js
-assert(
-  code.match(/<form.*cat-photo-form.*>/gi) &&
-    code.match(/<form.*cat-photo-form.*>/gi).length > 0
-);
+assert.match(__helpers.removeHtmlComments(code), /<form.*cat-photo-form.*>/gi);
+assert.lengthOf(__helpers.removeHtmlComments(code).match(/<form.*cat-photo-form.*>/gi), 1)
 ```
 
 不要在 `form` 元素上添加其他 `class` 属性或者 `style` 行内样式。
 
 ```js
-assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*style.*>/gi);
+assert.notMatch(__helpers.removeHtmlComments(code), /<form.*class.*>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
index 62bdf7d1c6..18b1281ea5 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
@@ -30,43 +30,29 @@ You have been adding `id` or `class` attributes to elements that you wish to spe
 应使用 `type` 属性选择器来匹配复选框。
 
 ```js
-assert(
-  code.match(
-    /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi);
 ```
 
 复选框的上外边距应为 10px。
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginTop') === '10px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginTop = window.getComputedStyle(checkbox)['margin-top']; 
+  assert.strictEqual(marginTop, '10px');
+});
 ```
 
 复选框的下外边距应为 15px。
 
 ```js
-assert(
-  (function () {
-    var count = 0;
-    $("[type='checkbox']").each(function () {
-      if ($(this).css('marginBottom') === '15px') {
-        count++;
-      }
-    });
-    return count === 3;
-  })()
-);
+const checkboxes = document.querySelectorAll("[type='checkbox']");
+assert.isNotEmpty(checkboxes);
+checkboxes.forEach(function(checkbox) {
+  const marginBottom = window.getComputedStyle(checkbox)['margin-bottom']; 
+  assert.strictEqual(marginBottom, '15px');
+});
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
index 00c60af541..8c85bcc855 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -28,35 +28,40 @@ Use Clockwise Notation to give the element with the `blue-box` class a margin of
 Your `blue-box` class should give the top of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 Your `blue-box` class should give the right of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 Your `blue-box` class should give the bottom of elements `20px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 Your `blue-box` class should give the left of elements `40px` of `margin`.
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft, '40px');
 ```
 
 You should use the clockwise notation to set the margin of `blue-box` class.
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const cssCode = __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(cssCode, /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
index 86a5f1adab..a50341d337 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
@@ -26,35 +26,40 @@ padding: 10px 20px 10px 20px;
 class 为 `blue-box` 的元素的上内边距 `padding` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 class 为 `blue-box` 的元素的右内边距 `padding` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 class 为 `blue-box` 的元素的下内边距 `padding` 应为 `20px`。
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 class 为 `blue-box` 的元素的左内边距 `padding` 应为 `40px`。
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 应该按照顺时针排序，汇总声明的方式来设置 `blue-box` 的内边距。
 
 ```js
-assert(
-  /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
-    __helpers.removeCssComments($('style').text())
-  )
-);
+const css =  __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
+assert.match(css, /\.blue-box\s*{[\s\S]*padding\s*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
index 852ea77850..377fb0f43e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
@@ -43,39 +43,38 @@ With CSS, there are hundreds of CSS properties that you can use to change the wa
 应删除 `h2` 元素的 `style` 样式。
 
 ```js
-assert(!$('h2').attr('style'));
+assert.notExists(document.querySelector('h2').getAttribute('style'));
 ```
 
 应创建一个 `style` 样式声明区域。
 
 ```js
-assert($('style') && $('style').length >= 1);
+assert.exists(document.querySelector('style:not(.fcc-hide-header)'));
+assert.isAtLeast(document.querySelectorAll('style:not(.fcc-hide-header)').length, 1);
 ```
 
 `h2` 元素颜色应为蓝色。
 
 ```js
-assert($('h2').css('color') === 'rgb(0, 0, 255)');
+const h2Element = document.querySelector('h2');
+const color = window.getComputedStyle(h2Element)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 确保 `h2` 选择器的内容被花括号所包围，样式规则应以分号结束。
 
 ```js
-assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+assert.match(__helpers.removeCssComments(code), /h2\s*\{\s*color\s*:.*;\s*\}/g);
 ```
 
 `style` 标签应符合语法，且应有一个结束标签。
 
 ```js
-assert(
-  code.match(/<\/style>/g) &&
-    code.match(/<\/style>/g).length ===
-      (
-        code.match(
-          /<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
-        ) || []
-      ).length
-);
+assert.match(__helpers.removeHtmlComments(code), /<\/style>/g);
+
+const closingElementLength = __helpers.removeHtmlComments(code).match(/<\/style>/g).length;
+const openingElementsLength = __helpers.removeHtmlComments(code).match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g).length;
+assert.strictEqual(closingElementLength, openingElementsLength);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
index 75bc80dbbc..6ac8f0d659 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
@@ -22,25 +22,19 @@ dashedName: use-css-variables-to-change-several-elements-at-once
 应在 `penguin` class 里声明 `--penguin-skin` 变量，且赋值为 `gray`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class 声明中的 `--penguin-belly` 变量值应为 `white`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 `penguin` class 声明中的 `--penguin-beak` 变量值应为 `orange`。
 
 ```js
-assert(
-  code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
-);
+assert.match(code, /.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
index d8ea842b0a..493665b3a6 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
@@ -30,17 +30,15 @@ body {
 `body` 元素的 `background-color` 应为黑色。
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 应该使用黑色的十六进制代码，而不是 `black` 这个词。
 
 ```js
-assert(
-  code.match(
-    /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
-  )
-);
+assert.match(code, /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
index 45d3bf8ef0..feac0b5c29 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -30,49 +30,58 @@ To review, hex codes use 6 hexadecimal digits to represent colors, two each for
 文本内容为 `I am red!` 的 `h1` 元素的 `color` 值应该为红色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 应使用 `hex code` 替换 `red`。
 
 ```js
-assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
+assert.match(code, /\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am green!` 的 `h1` 元素的 `color` 值应该为绿色。
 
 ```js
-assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+const greenText = document.querySelector('.green-text');
+const color = window.getComputedStyle(greenText)['color']; 
+assert.strictEqual(color, 'rgb(0, 255, 0)');
 ```
 
 应使用 `hex code` 替换 `green` 关键词。
 
 ```js
-assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
+assert.match(code, /\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am dodger blue!` 的 `h1` 元素的 `color` 值应该为道奇蓝色。
 
 ```js
-assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+const blueText = document.querySelector('.dodger-blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(30, 144, 255)');
 ```
 
 应使用 `hex code` 替换 `dodgerblue`。
 
 ```js
-assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
+assert.match(code, /\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi);
 ```
 
 文本内容为 `I am orange!` 的 `h1` 元素的 `color` 值应该为橘色。
 
 ```js
-assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+const orangeText = document.querySelector('.orange-text');
+const color = window.getComputedStyle(orangeText)['color']; 
+
+assert.strictEqual(color, 'rgb(255, 165, 0)');
 ```
 
 应使用 `hex code` 替换 `orange`。
 
 ```js
-assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
+assert.match(code, /\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
index df65f9fc3c..41208530ad 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -22,65 +22,57 @@ Just like with hex code, you can mix colors in RGB by using combinations of diff
 文本内容为 `I am red!` 的 `h1` 元素的 `color` 值应为红色。
 
 ```js
-assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+const redText = document.querySelector('.red-text');
+const color = window.getComputedStyle(redText)['color']; 
+assert.strictEqual(color, 'rgb(255, 0, 0)');
 ```
 
 红色应使用 `rgb` 值来表示。
 
 ```js
-assert(
-  code.match(
-    /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(code, /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi);
 ```
 
 文本内容为 `I am orchid!` 的 `h1` 元素的 `color` 应为淡紫色。
 
 ```js
-assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+const orchidText = document.querySelector('.orchid-text');
+const color = window.getComputedStyle(orchidText)['color']; 
+assert.strictEqual(color, 'rgb(218, 112, 214)');
 ```
 
 淡紫色应使用 `rgb` 值来表示。
 
 ```js
-assert(
-  code.match(
-    /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi);
 ```
 
 文本内容为 `I am blue!` 的 `h1` 元素的 `color` 应为蓝色。
 
 ```js
-assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+const blueText = document.querySelector('.blue-text');
+const color = window.getComputedStyle(blueText)['color']; 
+assert.strictEqual(color, 'rgb(0, 0, 255)');
 ```
 
 蓝色应使用 `rgb` 值来表示。
 
 ```js
-assert(
-  code.match(
-    /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi);
 ```
 
 文本内容为 `I am sienna!` 的 `h1` 元素的 `color` 应为赭黄色。
 
 ```js
-assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+const siennaText = document.querySelector('.sienna-text');
+const color = window.getComputedStyle(siennaText)['color']; 
+assert.strictEqual(color, 'rgb(160, 82, 45)');
 ```
 
 赭黄色应使用 `rgb` 值来表示。
 
 ```js
-assert(
-  code.match(
-    /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
index a280b1cfad..3bf8e3d2f9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
@@ -44,13 +44,15 @@ Let's replace the hex code in our `body` element's background color with the RGB
 Your `body` element should have a black background.
 
 ```js
-assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
 ```
 
 You should use `rgb` to give your `body` element a background of black.
 
 ```js
-assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
+assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
index 86d1c232b1..064bc75462 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
@@ -26,33 +26,30 @@ Add a button as the last element of your `form` element with a type of `submit`,
 Your `form` should have a `button` inside it.
 
 ```js
-assert($('form').children('button').length > 0);
+const form = document.querySelector('form');
+const children = form.querySelectorAll(`:scope ${"button"}`); 
+assert.isNotEmpty(children); 
 ```
 
 Your submit button should have the attribute `type` set to `submit`.
 
 ```js
-assert($('button').attr('type') === 'submit');
+assert.strictEqual(document.querySelector('button').getAttribute('type'), 'submit');
 ```
 
 Your submit button should only have the text `Submit`.
 
 ```js
-assert(
-  $('button')
-    .text()
-    .match(/^\s*submit\s*$/gi)
-);
+const text = document.querySelector('button').textContent;
+assert.match(text,/^\s*submit\s*$/gi);
 ```
 
 Your `button` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.strictEqual(code.match(/<\/button>/g).length,code.match(/<button/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
index e1d4eb04cc..99e156a43a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -45,25 +45,22 @@ Note that `img` is a void element.
 你的网页上应该有一张图片。
 
 ```js
-assert($('img').length);
+assert.exists(document.querySelector('img'));
 ```
 
 你的图片应该有一个 `src` 属性，其值为猫咪图片的 url。
 
 ```js
-assert(/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i.test($('img').attr('src')));
+const url = document.querySelector('img').getAttribute('src');
+assert.match(url,/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i);
 ```
 
 你的图片元素的 `alt` 属性值不应为空。
 
 ```js
-assert(
-  $('img').attr('alt') &&
-    $('img').attr('alt').length &&
-    /<(?:img|IMG)\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
-      __helpers.removeWhiteSpace(code)
-    )
-);
+assert.exists(document.querySelector('img').getAttribute('alt'));
+assert.isNotEmpty(document.querySelector('img').getAttribute('alt'));
+assert.match(__helpers.removeWhiteSpace(code),/<(?:img|IMG)\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
index 4954631ab5..19d3acc79c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
@@ -28,31 +28,28 @@ Placeholder text is what is displayed in your `input` element before your user h
 给现有的 `input` 输入框添加一个 `placeholder` 属性。
 
 ```js
-assert($('input[placeholder]').length > 0);
+assert.notEmpty(document.querySelectorAll('input[placeholder]'));
 ```
 
 设置 `placeholder` 属性的值为 `cat photo URL`。
 
 ```js
-assert(
-  $('input') &&
-    $('input').attr('placeholder') &&
-    $('input')
-      .attr('placeholder')
-      .match(/cat\s+photo\s+URL/gi)
-);
+assert.exists(document.querySelector('input'));
+assert.exists(document.querySelector('input').getAttribute('placeholder'));
+const placeholder = document.querySelector('input').getAttribute('placeholder');
+assert.match(placeholder,/cat\s+photo\s+URL/gi);
 ```
 
 `input` 元素不该有结束标签。
 
 ```js
-assert(!code.match(/<input.*\/?>.*<\/input>/gi));
+assert.notMatch(code,/<input.*\/?>.*<\/input>/gi);
 ```
 
 `input` 输入框的语法必须正确。
 
 ```js
-assert($('input[type=text]').length > 0);
+assert.notEmpty(document.querySelectorAll('input[type=text]'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
index 49a822b31f..97c850d81f 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
@@ -26,13 +26,13 @@ You can set a checkbox or radio button to be checked by default using the `check
 表单的第一个单选按钮应被默认选中。
 
 ```js
-assert($('input[type="radio"]').prop('checked'));
+assert.isTrue(document.querySelector('input[type="radio"]').checked);
 ```
 
 表单的第一个复选框应被默认选中。
 
 ```js
-assert($('input[type="checkbox"]').prop('checked'));
+assert.isTrue(document.querySelector('input[type="checkbox"]').checked);
 ```
 
 不应该更改 `Indoor` 标签的内部文本。
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
index b19584de80..ca68931097 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
@@ -22,35 +22,33 @@ Remember that in order to start a comment, you need to use `<!--` and to end a c
 应注释掉 `h1` 元素，这样它就从网页上消失了。
 
 ```js
-assert($('h1').length === 0);
+assert.isEmpty(document.querySelectorAll('h1'));
 ```
 
 `h2` 元素应保持原样，这样网页上还能看到它。
 
 ```js
-assert($('h2').length > 0);
+assert.isNotEmpty(document.querySelectorAll('h2'));
 ```
 
 应注释掉 `p` 元素，这样它就从网页上消失了。
 
 ```js
-assert($('p').length === 0);
+assert.isEmpty(document.querySelectorAll('p'));
 ```
 
 每一个注释都应以 `-->` 结尾。
 
 ```js
-assert(code.match(/[^fc]-->/g).length > 1);
+assert.isAbove(code.match(/[^fc]-->/g).length, 1);
 ```
 
 不要更改 `h1`、`h2`、`p` 元素的顺序。
 
 ```js
-assert(
-  code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
-    code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
-    code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
-);
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[0],'<h1>');
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[1],'<h2>');
+assert.strictEqual(code.match(/<([a-z0-9]){1,2}>/g)[2],'<p>');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
index 80a25baf9e..f9155e56e0 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
@@ -33,39 +33,35 @@ HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet po
 应存在一个 `ul` 无序列表。
 
 ```js
-assert($('ul').length > 0);
+assert.isNotEmpty(document.querySelectorAll('ul'));
 ```
 
 应在 `ul` 无序列表中添加三个 `li` 条目。
 
 ```js
-assert($('ul li').length > 2);
+assert.lengthOf(document.querySelectorAll('ul li'),3);
 ```
 
 确保 `ul` 无序列表有结束标签。
 
 ```js
-assert(
-  code.match(/<\/ul>/gi) &&
-    code.match(/<ul/gi) &&
-    code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
-);
+assert.match(code,/<\/ul>/gi);
+assert.match(code,/<ul/gi);
+assert.strictEqual(code.match(/<\/ul>/gi).length,code.match(/<ul/gi).length);
 ```
 
 确保每个 `li` 条目都有结束标签。
 
 ```js
-assert(
-  code.match(/<\/li>/gi) &&
-    code.match(/<li[\s>]/gi) &&
-    code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
-);
+assert.match(code,/<\/li>/gi);
+assert.match(code,/<li[\s>]/gi);
+assert.strictEqual(code.match(/<\/li>/gi).length,code.match(/<li[\s>]/gi).length);
 ```
 
 每个 `li` 元素不应只包含空字符串或只包含空格。
 
 ```js
-assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
+assert.isEmpty([...document.querySelectorAll('ul li')].filter((item) => item.textContent.trim() === ""));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
index 7715a67616..831560e28b 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
@@ -28,27 +28,23 @@ You can build web forms that actually submit data to a server using nothing more
 
 ```js
 const inputElem = document.querySelector('form input');
-assert(
-  inputElem.getAttribute('type') === 'text' &&
-    inputElem.getAttribute('placeholder') === 'cat photo URL'
-);
+assert.strictEqual(inputElem.getAttribute('type'),'text'); 
+assert.strictEqual(inputElem.getAttribute('placeholder'),'cat photo URL');
 ```
 
 `form` 的 `action` 属性值应为 `https://www.freecatphotoapp.com/submit-cat-photo`。
 
 ```js
-const action = $('form').attr('action');
-assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
+const action = document.querySelector('form').getAttribute('action');
+assert.match(action,/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i);
 ```
 
 `form` 元素应有开始标签和结束标签。
 
 ```js
-assert(
-  code.match(/<\/form>/g) &&
-    code.match(/<form [^<]*>/g) &&
-    code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
-);
+assert.match(code,/<\/form>/g);
+assert.match(code,/<form [^<]*>/g);
+assert.strictEqual(code.match(/<\/form>/g).length,code.match(/<form [^<]*>/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
index 8724c77501..4e2138646a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
@@ -34,37 +34,33 @@ Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than o
 表单中应存在三个复选框。
 
 ```js
-assert($('input[type="checkbox"]').length > 2);
+assert.lengthOf(document.querySelectorAll('input[type="checkbox"]'),3);
 ```
 
 每个复选框都应该被嵌套进 `label` 元素中。
 
 ```js
-assert($('label > input[type="checkbox"]:only-child').length > 2);
+assert.lengthOf(document.querySelectorAll('label > input[type="checkbox"]:only-child'),3);
 ```
 
 确保 `label` 元素有结束标签。
 
 ```js
-assert(
-  code.match(/<\/label>/g) &&
-    code.match(/<label/g) &&
-    code.match(/<\/label>/g).length === code.match(/<label/g).length
-);
+assert.match(code,/<\/label>/g);
+assert.match(code,/<label/g);
+assert.strictEqual(code.match(/<\/label>/g).length,code.match(/<label/g).length)
 ```
 
 复选框的 `name` 属性值均应为 `personality`。
 
 ```js
-assert(
-  $('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
-);
+assert.lengthOf([...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.name === "personality"),3);
 ```
 
 每个复选框都应该在 `form` 标签内。
 
 ```js
-assert($('label').parent().get(0).tagName.match('FORM'));
+assert.strictEqual(document.querySelector('label').parentNode.tagName,'FORM');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
index 37cd3e3300..7114f0fd98 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
@@ -48,55 +48,50 @@ Add a pair of radio buttons to your form, each nested in its own `label` element
 Your page should have two `radio` button elements.
 
 ```js
-assert($('input[type="radio"]').length > 1);
+assert.lengthOf(document.querySelectorAll('input[type="radio"]'),2);
 ```
 
 Your radio buttons should be given the `name` attribute of `indoor-outdoor`.
 
 ```js
-assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
+assert.lengthOf([...document.querySelectorAll('input[type="radio"]')].filter(input => input.name === "indoor-outdoor"),2);
 ```
 
 Each of your two radio button elements should be nested in its own `label` element.
 
 ```js
-assert($('label > input[type="radio"]:only-child').length > 1);
+assert.lengthOf(document.querySelectorAll('label > input[type="radio"]:only-child'),2);
 ```
 
 Each of your `label` elements should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/label>/g) &&
-    code.match(/<label/g) &&
-    code.match(/<\/label>/g).length === code.match(/<label/g).length
-);
+assert.match(code,/<\/label>/g);
+assert.match(code,/<label/g);
+assert.strictEqual(code.match(/<\/label>/g).length,code.match(/<label/g).length);
 ```
 
 One of your radio buttons should have the label `indoor`.
 
 ```js
-assert(
-  $('label')
-    .text()
-    .match(/indoor/gi)
-);
+const labelTexts = [...document.querySelectorAll('label')].map(label => label.textContent);
+const hasMatch = labelTexts.some(label =>  label.match(/indoor/gi));
+assert.isTrue(hasMatch); 
 ```
 
 One of your radio buttons should have the label `outdoor`.
 
 ```js
-assert(
-  $('label')
-    .text()
-    .match(/outdoor/gi)
-);
+const labelTexts = [...document.querySelectorAll('label')].map(label => label.textContent);
+const hasMatch = labelTexts.some(label => label.match(/outdoor/gi));
+assert.isTrue(hasMatch); 
 ```
 
 Each of your radio button elements should be added within the `form` tag.
 
 ```js
-assert($('label').parent().get(0).tagName.match('FORM'));
+const labelParent = document.querySelector('label').parentNode;
+assert.strictEqual(labelParent.tagName,'FORM');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
index 5a8b28044b..751e5f5c2c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -30,7 +30,7 @@ Note that `input` is a void element.
 网页中应存在一个类型为 `text` 的 `input` 输入框。
 
 ```js
-assert($('input[type=text]').length > 0);
+assert.isNotEmpty(document.querySelectorAll('input[type=text]'));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
index dcda307026..9b0c08befb 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
@@ -33,80 +33,76 @@ HTML has another special element for creating <dfn>ordered lists</dfn>, or numbe
 应包含一个有序列表，内容是猫咪最讨厌的三样东西（`Top 3 things cats hate:`）。
 
 ```js
-assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
+const previousElement = document.querySelector('ol').previousElementSibling; 
+assert.match(previousElement.textContent,/Top 3 things cats hate:/i);
 ```
 
 应包含有一个无序列表，内容是猫咪最喜欢的东西（`Things cats love:`）。
 
 ```js
-assert(/Things cats love:/i.test($('ul').prev().text()));
+const previousElement = document.querySelector('ul').previousElementSibling; 
+assert.match(previousElement.textContent,/Things cats love:/i);
 ```
 
 页面应只包含一个 `ul` 元素。
 
 ```js
-assert.equal($('ul').length, 1);
+assert.lengthOf(document.querySelectorAll('ul'), 1);
 ```
 
 页面应只包含一个 `ol` 元素。
 
 ```js
-assert.equal($('ol').length, 1);
+assert.lengthOf(document.querySelectorAll('ol'), 1);
 ```
 
 `ul` 无序列表中应包含 3 个 `li` 元素。
 
 ```js
-assert.equal($('ul li').length, 3);
+assert.lengthOf(document.querySelectorAll('ul li'), 3);
 ```
 
 `ol` 有序列表应该包含 3 个 `li` 元素。
 
 ```js
-assert.equal($('ol li').length, 3);
+assert.lengthOf(document.querySelectorAll('ol li'), 3);
 ```
 
 `ul` 无序列表应有结束标签。
 
 ```js
-assert(
-  code.match(/<\/ul>/g) &&
-    code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
-);
+assert.match(code,/<\/ul>/g);
+assert.strictEqual(code.match(/<\/ul>/g).length ,code.match(/<ul>/g).length);
 ```
 
 `ol` 有序列表应有结束标签。
 
 ```js
-assert(
-  code.match(/<\/ol>/g) &&
-    code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
-);
+assert.match(code,/<\/ol>/g);
+assert.strictEqual(code.match(/<\/ol>/g).length ,code.match(/<ol>/g).length);
 ```
 
 `li` 元素应有结束标签。
 
 ```js
-assert(
-  code.match(/<\/li>/g) &&
-    code.match(/<li>/g) &&
-    code.match(/<\/li>/g).length === code.match(/<li>/g).length
-);
+assert.match(code,/<\/li>/g);
+assert.match(code,/<li>/g);
+assert.strictEqual(code.match(/<\/li>/g).length ,code.match(/<li>/g).length);
 ```
 
 无序列表里的 `li` 元素内容不应为空。
 
 ```js
-$('ul li').each((i, val) =>
-  assert(__helpers.removeWhiteSpace(val.textContent))
+[...document.querySelectorAll('ul li')].forEach((val) =>
+  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
 );
 ```
 
 有序列表里的 `li` 元素内容不应该为空。
 
 ```js
-$('ol li').each((i, val) =>
-  assert(!!__helpers.removeWhiteSpace(val.textContent))
+[...document.querySelectorAll('ol li')].forEach((val) =>
+  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
 );
 ```
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
index daa713ecfa..b50cc23b66 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
@@ -37,19 +37,19 @@ The challenges so far have covered specific HTML elements and their uses. Howeve
 网页中应包含 `<!DOCTYPE html>` 标签。
 
 ```js
-assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
+assert.match(code,/<!DOCTYPE\s+?html\s*?>/gi);
 ```
 
 网页中应只存在一个 `html` 元素。
 
 ```js
-assert($('html').length == 1);
+assert.lengthOf(document.querySelectorAll('html'), 1);
 ```
 
 `h1` 元素应该位于 `html` 元素内部。
 
 ```js
-assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
+assert.match(code,/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
index 9894b177cc..45945f0301 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
@@ -39,14 +39,16 @@ You can add another level of organization in your HTML document within the `html
 
 ```js
 const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
-assert(headElems && headElems.length === 1);
+assert.exists(headElems); 
+assert.lengthOf(headElems,1);
 ```
 
 网页应只有一个 `body` 元素。
 
 ```js
 const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
-assert(bodyElems && bodyElems.length === 1);
+assert.exists(bodyElems); 
+assert.lengthOf(bodyElems,1);
 ```
 
 `head` 应为 `html` 的子元素。
@@ -61,7 +63,7 @@ if (htmlChildren) {
 
   foundHead = children.match(/<head\s*>.*<\/head\s*>/);
 }
-assert(foundHead);
+assert.exists(foundHead);
 ```
 
 `body` 应为 `html` 的子元素。
@@ -75,7 +77,7 @@ if (htmlChildren) {
   const { children } = htmlChildren.groups;
   foundBody = children.match(/<body\s*>.*<\/body\s*>/);
 }
-assert(foundBody);
+assert.exists(foundBody);
 ```
 
 `title` 应为 `head` 的子元素。
@@ -89,7 +91,7 @@ if (headChildren) {
   const { children } = headChildren.groups;
   foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
 }
-assert(foundTitle);
+assert.exists(foundTitle);
 ```
 
 `h1` 和 `p` 都应为 `body` 的子元素。
@@ -107,7 +109,7 @@ if (bodyChildren) {
   const numPs = ps ? ps.length : 0;
   foundElems = numH1s === 1 && numPs === 1;
 }
-assert(foundElems);
+assert.exists(foundElems);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
index 1448cf223b..5a46eb510d 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
@@ -22,19 +22,20 @@ Our phone doesn't have much vertical space.
 应删除 `h1` 元素。
 
 ```js
-assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
+assert.notMatch(code,/<h1>/gi);
+assert.notMatch(code,/<\/h1>/gi);
 ```
 
 应保留 `h2` 元素。
 
 ```js
-assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
+assert.match(code,/<h2>[\w\W]*<\/h2>/gi);
 ```
 
 应保留 `p` 元素。
 
 ```js
-assert(code.match(/<p>[\w\W]*<\/p>/gi));
+assert.match(code,/<p>[\w\W]*<\/p>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
index 671c8ba2e0..021a62e959 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
@@ -24,7 +24,7 @@ Lorem ipsum text 自 16 世纪以来就在排版中被用作占位符，这一
 你的 `p` 元素应包含 “kitty ipsum” 文本的前面几个词。
 
 ```js
-assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
+assert.match(document.querySelector('p').textContent,/Kitty(\s)+ipsum/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
index 2e2f14dc95..cbfec8c204 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
@@ -24,34 +24,32 @@ Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece
 应创建一个 `h2` 元素。
 
 ```js
-assert($('h2').length > 0);
+assert.lengthOf(document.querySelectorAll('h2'),1);
 ```
 
 `h2` 元素应该有结束标签。
 
 ```js
-assert(
-  code.match(/<\/h2>/g) &&
-    code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
-);
+assert.match(code,/<\/h2>/g);
+assert.strictEqual(code.match(/<\/h2>/g).length,code.match(/<h2>/g).length);
 ```
 
 `h2` 元素的内容应为：`CatPhotoApp`。
 
 ```js
-assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
+assert.match(document.querySelector('h2').textContent,/cat(\s)?photo(\s)?app/gi);
 ```
 
 `h1` 元素的内容应为：`Hello World`。
 
 ```js
-assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+assert.match(document.querySelector('h1').textContent,/hello(\s)+world/gi);
 ```
 
 `h1` 元素应出现在 `h2` 元素之前。
 
 ```js
-assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
+assert.match(code,/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
index 56d6c55b63..03fe447bdf 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
@@ -28,22 +28,20 @@ The `p` element is the preferred element for paragraph text on websites. `p` is
 应包含一个 `p` 元素。
 
 ```js
-assert($('p').length > 0);
+assert.lengthOf(document.querySelectorAll('p'),1);
 ```
 
 `p` 元素的内容文本应为 `Hello Paragraph`。
 
 ```js
-assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
+assert.match(document.querySelector('p').textContent,/hello(\s)+paragraph/gi);
 ```
 
 `p` 元素应有结束标签。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
index 8627bcdaa8..7717eb17af 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
@@ -35,46 +35,46 @@ HTML5 introduces more descriptive HTML tags. These include `main`, `header`, `fo
 页面中应该有两个 `p` 元素。
 
 ```js
-assert($('p').length > 1);
+assert.lengthOf(document.querySelectorAll('p'),2);
 ```
 
 每个 `p` 元素都应有结束标签。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 你的 `p` 元素应包含 `kitty ipsum` 文本的前面几个词。
 
 ```js
-assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
+assert.match(document.querySelectorAll('p')[1].textContent,/Purr\s+jump\s+eat/gi);
 ```
 
 应该存在 `main` 元素。
 
 ```js
-assert($('main').length === 1);
+assert.lengthOf(document.querySelectorAll('main'),1);
 ```
 
 `main` 元素应有两个段落元素作为它的子元素。
 
 ```js
-assert($('main').children('p').length === 2);
+const main = document.querySelector('main');
+const children = main.querySelectorAll("p"); 
+assert.lengthOf(children,2);
 ```
 
 `main` 的开始标签应位于第一个段落之前。
 
 ```js
-assert(code.match(/<main>\s*?<p>/g));
+assert.match(code,(/<main>\s*?<p>/g));
 ```
 
 `main` 的结束标签应位于第二个段落之后。
 
 ```js
-assert(code.match(/<\/p>\s*?<\/main>/g));
+assert.match(code,(/<\/p>\s*?<\/main>/g));
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
index 3b1de7be9d..e65a2cae2a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
@@ -28,22 +28,20 @@ You can use `a` (*anchor*) elements to link to content outside of your web page.
 `a` 元素应有锚文本 `cat photos`。
 
 ```js
-assert(/cat photos/gi.test($('a').text()));
+assert.match(document.querySelector('a').textContent,/cat photos/gi);
 ```
 
 `a` 元素应链接到 `https://www.freecatphotoapp.com`。
 
 ```js
-assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
+assert.match(document.querySelector('a').getAttribute('href'),/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i);
 ```
 
 确保 `a` 元素有结束标签。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.strictEqual(code.match(/<\/a>/g).length,code.match(/<a/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
index e32292ab08..d0c0df3a44 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
@@ -36,45 +36,37 @@ dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
 页面中应只存在一个 `footer` 元素。
 
 ```js
-assert($('a').length == 1);
+assert.lengthOf(document.querySelectorAll('a'), 1);
 ```
 
 `a` 的 `href` 属性值应为 `#footer`。
 
 ```js
-assert($('footer').length == 1);
+assert.lengthOf(document.querySelectorAll('footer'),1);
 ```
 
 `a` 不应有 `target` 属性。
 
 ```js
-assert($('a').eq(0).attr('href') == '#footer');
+assert.strictEqual(document.querySelector('a').getAttribute('href'), '#footer');
 ```
 
 `a` 标签不应有 `target` 属性。
 
 ```js
-assert(
-  typeof $('a').eq(0).attr('target') == typeof undefined ||
-    $('a').eq(0).attr('target') == true
-);
+assert.notExists(document.querySelector('a').getAttribute('target'));
 ```
 
 `a` 元素的文本应该是 “Jump to Bottom”。
 
 ```js
-assert(
-  $('a')
-    .eq(0)
-    .text()
-    .match(/Jump to Bottom/gi)
-);
+assert.match(document.querySelector('a').textContent,/Jump to Bottom/gi);
 ```
 
 `footer` 标签应该有一个 `id` 属性，值为 “footer”。
 
 ```js
-assert($('footer').eq(0).attr('id') == 'footer');
+assert.strictEqual(document.querySelector('footer').getAttribute('id'),'footer');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
index f4d538bbe1..ccf9df3a19 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
@@ -24,7 +24,7 @@ Sometimes you want to add `a` elements to your website before you know where the
 `a` 的 `href` 属性值应为 "#"。
 
 ```js
-assert($('a').attr('href') === '#');
+assert.strictEqual(document.querySelector('a').getAttribute('href'),'#');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
index 93acf1a7f5..8f0a117dee 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -53,82 +53,61 @@ Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.free
 应该只有一个 `a` 元素。
 
 ```js
-assert(
-  $('a').length  === 1 
-);
+assert.lengthOf(document.querySelectorAll('a'), 1 );
 ```
 
 `a` 元素应该链接到 “`https://www.freecatphotoapp.com`”。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]').length  === 1 
-);
+assert.lengthOf(document.querySelectorAll('a[href="https://www.freecatphotoapp.com"]'),1);
 ```
 
 `a` 元素应有锚文本 `cat photos`。
 
 ```js
-assert(
-  $('a')
-    .text()
-    .match(/cat\sphotos/gi)
-);
+assert.match(document.querySelector('a').textContent,/cat\sphotos/gi)
 ```
 
 应该创建一个新的 `p` 元素。 页面中应至少包含 3 个 `p` 标签。
 
 ```js
-assert($('p') && $('p').length > 2);
+assert.lengthOf(document.querySelectorAll('p'),3)
 ```
 
 `a` 应嵌套在新创建的 `p` 元素内。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
-);
+const anchorParent = document.querySelector('a[href="https://www.freecatphotoapp.com"]').parentNode;
+assert.strictEqual(anchorParent.tagName,"P")
 ```
 
 `p` 元素应该包含文本 `View more`（在它后面有一个空格）。
 
 ```js
-assert(
-  $('a[href="https://www.freecatphotoapp.com"]')
-    .parent()
-    .text()
-    .match(/View\smore\s/gi)
-);
+const textContent = document.querySelector('a[href="https://www.freecatphotoapp.com"]').parentNode.textContent;
+assert.match(textContent,/View\smore\s/gi);
 ```
 
 `a` 元素 <em>不</em> 应有文本 `View more`。
 
 ```js
-assert(
-  !$('a')
-    .text()
-    .match(/View\smore/gi)
-);
+assert.notMatch(document.querySelector('a').textContent,/View\smore/gi); 
 ```
 
 确保每个 `p` 元素有结束标签。
 
 ```js
-assert(
-  code.match(/<\/p>/g) &&
-    code.match(/<p/g) &&
-    code.match(/<\/p>/g).length === code.match(/<p/g).length
-);
+assert.match(code,/<\/p>/g);
+assert.match(code,/<p/g);
+assert.strictEqual(code.match(/<\/p>/g).length,code.match(/<p/g).length);
 ```
 
 确保每个 `a` 元素有结束标签。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<a/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.match(code,/<a/g);
+assert.strictEqual(code.match(/<\/a>/g).length,code.match(/<a/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
index a7c625abb7..101e0b111c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
@@ -26,28 +26,32 @@ The `div` element, also known as a division element, is a general purpose contai
 所有的 `p` 元素都应嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('p').length > 1);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('p');
+assert.isAbove(children.length,1);
 ```
 
 所有的 `ul` 元素都应嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('ul').length > 0);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('ul');
+assert.notEmpty(children);
 ```
 
 所有的 `ol` 元素都应嵌套在 `div` 元素中。
 
 ```js
-assert($('div').children('ol').length > 0);
+const div = document.querySelector('div');
+const children = div.querySelectorAll('ol');
+assert.notEmpty(children);
 ```
 
 确保该 `div` 元素有闭合标签.
 
 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div>/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.strictEqual(code.match(/<\/div>/g).length,code.match(/<div>/g).length);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
index 586bf44b20..f3503ec934 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
@@ -42,7 +42,7 @@ Welcome to freeCodeCamp's HTML coding challenges. These will walk you through we
 `h1` 元素的内容文本应为 `Hello World`。
 
 ```js
-assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+assert.match(document.querySelector('h1').textContent,/hello(\s)+world/gi);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
index f667be404e..4587a053f2 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
@@ -30,23 +30,25 @@ You can make elements into links by nesting them within an `a` element.
 应将 `img` 嵌套进 `a` 元素中。
 
 ```js
-assert($('a').children('img').length > 0);
+const anchor = document.querySelectorAll('a')[1];
+const children = anchor.querySelectorAll("img");
+assert.notEmpty(children);
 ```
 
 你的 `a` 元素应该是一个死链接，具有值为 `#` 的 `href` 属性。
 
 ```js
-assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
+const anchor = document.querySelectorAll('a')[1];
+const parentHREF = anchor.querySelector("img").parentNode.getAttribute('href');
+assert.match(parentHREF,new RegExp('#'));
 ```
 
 每个 `a` 元素都应该有一个结束标签。
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<a/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a/g).length
-);
+assert.match(code,/<\/a>/g);
+assert.match(code,/<a/g);
+assert.strictEqual(code.match(/<\/a>/g).length, code.match(/<a/g).length)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/uncomment-html.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
index bb302c673f..aad9c4dfc4 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
@@ -24,25 +24,27 @@ Uncomment your `h1`, `h2` and `p` elements.
 Your `h1` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('h1').length > 0);
+assert.notEmpty(document.querySelectorAll('h1'));
 ```
 
 Your `h2` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('h2').length > 0);
+assert.notEmpty(document.querySelectorAll('h2'));
 ```
 
 Your `p` element should be visible on the page by uncommenting it.
 
 ```js
-assert($('p').length > 0);
+assert.notEmpty(document.querySelectorAll('p'));
 ```
 
 No trailing comment tags should be visible on the page (i.e. `-->`).
 
 ```js
-assert(!$('*:contains("-->")')[1]);
+const elements = document.querySelectorAll('*');
+const potentialComments = Array.from(elements).filter(el => el.textContent.includes('-->'));
+assert.notExists(potentialComments[1])
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
index 7e885e1e07..3afc6eb4e0 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
@@ -24,7 +24,7 @@ You can require specific form fields so that your user will not be able to submi
 `input` 元素应有 `required` 属性。
 
 ```js
-assert($('input').prop('required'));
+assert.isTrue(document.querySelector('input').required);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
index 05b752f992..a6ef358bd9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
@@ -34,49 +34,36 @@ When a form gets submitted, the data is sent to the server and includes entries
 应有一个单选按钮的 `value` 属性值为 `indoor`。
 
 ```js
-assert(
-  $('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
-    .length > 0
-);
+const indoorRadioButton = [...document.querySelectorAll('label > input[type="radio"]')].filter(x => x.value === "indoor");
+assert.notEmpty(indoorRadioButton)
 ```
 
 应有一个单选按钮的 `value` 属性值为 `outdoor`。
 
 ```js
-assert(
-  $('label:contains("Outdoor") > input[type="radio"]').filter(
-    "[value='outdoor']"
-  ).length > 0
-);
+const outdoorRadioButton = [...document.querySelectorAll('label > input[type="radio"]')].filter(x => x.value === "outdoor");
+assert.notEmpty(outdoorRadioButton);
 ```
 
 应有一个复选框的 `value` 属性值为 `loving`。
 
 ```js
-assert(
-  $('label:contains("Loving") > input[type="checkbox"]').filter(
-    "[value='loving']"
-  ).length > 0
-);
+const lovingCheckbox = [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "loving");
+assert.notEmpty(lovingCheckbox); 
 ```
 
 应有一个复选框的 `value` 属性值为 `lazy`。
 
 ```js
-assert(
-  $('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
-    .length > 0
-);
+const lazyCheckbox = [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "lazy");
+assert.notEmpty(lazyCheckbox); 
 ```
 
 应有一个复选框的 `value` 属性值为 `energetic`。
 
 ```js
-assert(
-  $('label:contains("Energetic") > input[type="checkbox"]').filter(
-    "[value='energetic']"
-  ).length > 0
-);
+const energeticCheckbox =  [...document.querySelectorAll('label > input[type="checkbox"]')].filter(x => x.value === "energetic");
+assert.notEmpty(energeticCheckbox);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
index a05b3a39f9..e8abc41886 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
@@ -22,49 +22,66 @@ Add the CSS property `display: flex` to all of the following items - note that t
 Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 Your `header` should have a `display` property set to `flex`.
 
 ```js
-assert($('header').css('display') == 'flex');
+const header = document.querySelector('header');
+const displayStyle = window.getComputedStyle(header)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `footer` should have a `display` property set to `flex`.
 
 ```js
-assert($('footer').css('display') == 'flex');
+const footer = document.querySelector('footer');
+const displayStyle = window.getComputedStyle(footer)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `h3` should have a `display` property set to `flex`.
 
 ```js
-assert($('h3').css('display') == 'flex');
+const h3Element = document.querySelector('h3');
+const displayStyle = window.getComputedStyle(h3Element)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `h4` should have a `display` property set to `flex`.
 
 ```js
-assert($('h4').css('display') == 'flex');
+const h4Element = document.querySelector('h4');
+const displayStyle = window.getComputedStyle(h4Element)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.profile-name` should have a `display` property set to `flex`.
 
 ```js
-assert($('.profile-name').css('display') == 'flex');
+const profileName = document.querySelector('.profile-name');
+const displayStyle = window.getComputedStyle(profileName)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.follow-btn` should have a `display` property set to `flex`.
 
 ```js
-assert($('.follow-btn').css('display') == 'flex');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 Your `.stats` should have a `display` property set to `flex`.
 
 ```js
-assert($('.stats').css('display') == 'flex');
+const stats = document.querySelector('.stats');
+const displayStyle = window.getComputedStyle(stats)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 # --seed--
@@ -142,18 +159,17 @@ assert($('.stats').css('display') == 'flex');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -171,7 +187,7 @@ assert($('.stats').css('display') == 'flex');
     font-family: Arial, sans-serif;
   }
   header {
-   display: flex;
+    display: flex;
   }
   header .profile-thumbnail {
     width: 50px;
@@ -191,7 +207,8 @@ assert($('.stats').css('display') == 'flex');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -226,7 +243,11 @@ assert($('.stats').css('display') == 'flex');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -236,18 +257,17 @@ assert($('.stats').css('display') == 'flex');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
index c285cfb745..6fa5c2e048 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
@@ -31,7 +31,9 @@ Try the other options for the `align-items` property in the code editor to see t
 The `#box-container` element should have an `align-items` property set to a value of `center`.
 
 ```js
-assert($('#box-container').css('align-items') == 'center');
+const boxContainer = document.querySelector('#box-container');
+const alignment = window.getComputedStyle(boxContainer)['align-items'];
+assert.strictEqual(alignment, 'center');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
index 43036eb999..58db4843ae 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
@@ -31,7 +31,10 @@ Sometimes the flex items within a flex container do not fill all the space in th
 `#box-container` 所选择的元素应有 `justify-content` 属性，且其属性值应为 `center`。
 
 ```js
-assert($('#box-container').css('justify-content') == 'center');
+const boxContainer = document.querySelector('#box-container');
+const justifyDirection =
+  window.getComputedStyle(boxContainer)['justify-content'];
+assert.strictEqual(justifyDirection, 'center');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
index 928c47f83c..34042c289e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
@@ -20,13 +20,18 @@ The tweet embed `header` and `footer` used the `flex-direction` property earlier
 `.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.profile-name` 元素应有一个值为 `column` 的`flex-direction` 属性。
 
 ```js
-assert($('.profile-name').css('flex-direction') == 'column');
+const profileName = document.querySelector('.profile-name');
+const flexDirection = window.getComputedStyle(profileName)['flex-direction'];
+assert.strictEqual(flexDirection, 'column');
 ```
 
 # --seed--
@@ -38,7 +43,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -61,7 +67,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -93,7 +100,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -103,18 +114,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -131,7 +141,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -154,7 +165,8 @@ assert($('.profile-name').css('flex-direction') == 'column');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -186,7 +198,11 @@ assert($('.profile-name').css('flex-direction') == 'column');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -196,18 +212,17 @@ assert($('.profile-name').css('flex-direction') == 'column');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
index 3f4e778855..24433c94fb 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
@@ -20,19 +20,22 @@ The `header` and `footer` in the tweet embed example have child items that could
 `.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `header` 应有 `flex-direction` 属性，其值应为 `row`。
 
 ```js
-assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
+assert.match(code, /header\s*?{[^}]*?flex-direction:\s*?row;/g);
 ```
 
 `footer` 应有 `flex-direction` 属性，其值应为 `row`。
 
 ```js
-assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
+assert.match(code, /footer\s*?{[^}]*?flex-direction:\s*?row;/g);
 ```
 
 # --seed--
@@ -66,7 +69,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -102,7 +106,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -112,18 +120,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -162,7 +169,8 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -198,7 +206,11 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -208,18 +220,17 @@ assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
index 501416b7c2..e53400c96c 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
@@ -22,7 +22,9 @@ Add the CSS property `display` to `#box-container` and set its value to `flex`.
 `#box-container` should have the `display` property set to a value of `flex`.
 
 ```js
-assert($('#box-container').css('display') == 'flex');
+const boxContainer = document.querySelector('#box-container');
+const displayStyle = window.getComputedStyle(boxContainer)['display'];
+assert.strictEqual(displayStyle, 'flex');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
index 56fa77a9a5..8ec7de76ff 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
@@ -20,13 +20,18 @@ The last challenge introduced the `align-items` property and gave an example. Th
 `.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.follow-btn` 元素应有值为 `center` 的 `align-items` 属性。
 
 ```js
-assert($('.follow-btn').css('align-items') == 'center');
+const followButton = document.querySelector('.follow-btn');
+const alignItems = window.getComputedStyle(followButton)['align-items'];
+assert.strictEqual(alignItems, 'center');
 ```
 
 # --seed--
@@ -38,7 +43,8 @@ assert($('.follow-btn').css('align-items') == 'center');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -63,7 +69,8 @@ assert($('.follow-btn').css('align-items') == 'center');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -95,7 +102,11 @@ assert($('.follow-btn').css('align-items') == 'center');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -105,18 +116,17 @@ assert($('.follow-btn').css('align-items') == 'center');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -133,7 +143,8 @@ assert($('.follow-btn').css('align-items') == 'center');
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -158,7 +169,8 @@ assert($('.follow-btn').css('align-items') == 'center');
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -190,7 +202,11 @@ assert($('.follow-btn').css('align-items') == 'center');
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -200,18 +216,17 @@ assert($('.follow-btn').css('align-items') == 'center');
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
index f5011127cc..6be089e30a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
@@ -22,13 +22,17 @@ The final property for flex items is `align-self`. This property allows you to a
 `#box-1` 元素应具有 `align-self` 属性，其属性值应为 `center`。
 
 ```js
-assert($('#box-1').css('align-self') == 'center');
+const boxOne = document.querySelector('#box-1');
+const alignment = window.getComputedStyle(boxOne)['align-self'];
+assert.strictEqual(alignment, 'center');
 ```
 
 `#box-2` 元素应具有 `align-self` 属性，其属性值应为 `flex-end`。
 
 ```js
-assert($('#box-2').css('align-self') == 'flex-end');
+const boxTwo = document.querySelector('#box-2');
+const alignment = window.getComputedStyle(boxTwo)['align-self'];
+assert.strictEqual(alignment, 'flex-end');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
index 306ca92d79..e437939f9d 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
@@ -22,25 +22,29 @@ The `flex-basis` property specifies the initial size of the item before CSS make
 `#box-1` 元素应具有 `flex-basis` 属性。
 
 ```js
-assert($('#box-1').css('flex-basis') != 'auto');
+const boxOne = document.querySelector('#box-1');
+const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
+assert.notStrictEqual(flexBasis, 'auto');
 ```
 
 `#box-1` 的 `flex-basis` 属性值应为 `10em`。
 
 ```js
-assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
+assert.match(code, /#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g);
 ```
 
 `#box-2` 元素应具有 `flex-basis` 属性。
 
 ```js
-assert($('#box-2').css('flex-basis') != 'auto');
+const boxTwo = document.querySelector('#box-2');
+const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
+assert.notStrictEqual(flexBasis, 'auto');
 ```
 
 `#box-2` 的 `flex-basis` 属性值应为 `20em`。
 
 ```js
-assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
+assert.match(code, /#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
index b4cf849b0b..247dd24e57 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
@@ -20,7 +20,9 @@ The last two challenges used the `flex-direction` property set to `row`. This pr
 `#box-container` 应有 `flex-direction` 属性，其属性值应为 `column`。
 
 ```js
-assert($('#box-container').css('flex-direction') == 'column');
+const boxContainer = document.querySelector('#box-container');
+const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
+assert.strictEqual(flexDirection, 'column');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
index d5a619eb6f..dab7096856 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
@@ -24,7 +24,9 @@ Adding `display: flex` to an element turns it into a flex container. This makes
 `#box-container` 元素应有 `flex-direction` 属性，其属性值应为 `row-reverse`。
 
 ```js
-assert($('#box-container').css('flex-direction') == 'row-reverse');
+const boxContainer = document.querySelector('#box-container');
+const flexDirection = window.getComputedStyle(boxContainer)['flex-direction'];
+assert.strictEqual(flexDirection, 'row-reverse');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
index 64f3b83d61..f70db948d3 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
@@ -22,13 +22,17 @@ The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shr
 `#box-1` 元素应具有 `flex-grow` 属性，其属性值应为 `1`。
 
 ```js
-assert($('#box-1').css('flex-grow') == '1');
+const boxOne = document.querySelector('#box-1');
+const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
+assert.equal(flexGrow, '1');
 ```
 
 `#box-2` 元素应具有 `flex-grow` 属性，其属性值应为 `2`。
 
 ```js
-assert($('#box-2').css('flex-grow') == '2');
+const boxTwo = document.querySelector('#box-2');
+const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
+assert.equal(flexGrow, '2');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
index 9791bf08e5..95e24fc90e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
@@ -26,27 +26,33 @@ There is a shortcut available to set several flex properties at once. The `flex-
 `#box-1` 元素应具有 `flex` 属性，其属性值应为 `2 2 150px`。
 
 ```js
-assert(
-  $('#box-1').css('flex-grow') == '2' &&
-    $('#box-1').css('flex-shrink') == '2' &&
-    $('#box-1').css('flex-basis') == '150px'
-);
+const boxOne = document.querySelector('#box-1');
+const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
+const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
+const flexBasis = window.getComputedStyle(boxOne)['flex-basis'];
+
+assert.equal(flexGrow, '2');
+assert.equal(flexShrink, '2');
+assert.equal(flexBasis, '150px');
 ```
 
 `#box-2` 元素应具有 `flex` 属性，其属性值应为 `1 1 150px`。
 
 ```js
-assert(
-  $('#box-2').css('flex-grow') == '1' &&
-    $('#box-2').css('flex-shrink') == '1' &&
-    $('#box-2').css('flex-basis') == '150px'
-);
+const boxTwo = document.querySelector('#box-2');
+const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
+const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
+const flexBasis = window.getComputedStyle(boxTwo)['flex-basis'];
+
+assert.equal(flexGrow, '1');
+assert.equal(flexShrink, '1');
+assert.equal(flexBasis, '150px');
 ```
 
 应使用 `flex` 的简写属性为 `#box-1` 和 `#box-2` 添加规则。
 
 ```js
-assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
+assert.lengthOf(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g), 2);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
index 1f8397d842..e50b92ddab 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
@@ -24,13 +24,17 @@ So far, all the properties in the challenges apply to the flex container (the pa
 `#box-1` 元素应具有 `flex-shrink` 属性，其属性值应为 `1`。
 
 ```js
-assert($('#box-1').css('flex-shrink') == '1');
+const boxOne = document.querySelector('#box-1');
+const flexShrink = window.getComputedStyle(boxOne)['flex-shrink'];
+assert.equal(flexShrink, '1');
 ```
 
 `#box-2` 元素应具有 `flex-shrink` 属性，其属性值应为 `2`。
 
 ```js
-assert($('#box-2').css('flex-shrink') == '2');
+const boxTwo = document.querySelector('#box-2');
+const flexShrink = window.getComputedStyle(boxTwo)['flex-shrink'];
+assert.equal(flexShrink, '2');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
index cc027815f1..b86b7adaaf 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
@@ -26,7 +26,9 @@ The current layout has too many boxes for one row. Add the CSS property `flex-wr
 The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
 
 ```js
-assert($('#box-container').css('flex-wrap') == 'wrap');
+const boxContainer = document.querySelector('#box-container');
+const flexWrap = window.getComputedStyle(boxContainer)['flex-wrap'];
+assert.strictEqual(flexWrap, 'wrap');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
index 24f0040beb..056d13a63a 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
@@ -20,16 +20,18 @@ The last challenge showed an example of the `justify-content` property. For the
 `.follow-btn` 应在页面上呈现。 请关闭广告拦截器等任何扩展。
 
 ```js
-assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+const followButton = document.querySelector('.follow-btn');
+const displayStyle = window.getComputedStyle(followButton)['display'];
+assert.isNotNull(followButton);
+assert.notStrictEqual(displayStyle, 'none');
 ```
 
 `.profile-name` 元素的 `justify-content` 属性可选用以下属性值：`center`、`flex-start`、`flex-end`、`space-between`、`space-around` 或 `space-evenly`。
 
 ```js
-assert(
-  code.match(
-    /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
-  )
+assert.match(
+  code,
+  /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
 );
 ```
 
@@ -42,7 +44,8 @@ assert(
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -66,7 +69,8 @@ assert(
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -98,7 +102,11 @@ assert(
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -108,18 +116,17 @@ assert(
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
@@ -136,7 +143,8 @@ assert(
   body {
     font-family: Arial, sans-serif;
   }
-  header, footer {
+  header,
+  footer {
     display: flex;
     flex-direction: row;
   }
@@ -160,7 +168,8 @@ assert(
     border-radius: 3px;
     padding: 5px;
   }
-  header h3, header h4 {
+  header h3,
+  header h4 {
     display: flex;
     margin: 0;
   }
@@ -192,7 +201,11 @@ assert(
   }
 </style>
 <header>
-  <img src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <img
+    src="https://cdn.freecodecamp.org/curriculum/legacy-css-flexbox/quincy-twitter-photo.jpg"
+    alt="Quincy Larson's profile picture"
+    class="profile-thumbnail"
+  />
   <div class="profile-name">
     <h3>Quincy Larson</h3>
     <h4>@ossia</h4>
@@ -202,18 +215,17 @@ assert(
   </div>
 </header>
 <div id="inner">
-  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <p>
+    I meet so many people who are in search of that one trick that will help
+    them work smart. Even if you work smart, you still have to work hard.
+  </p>
   <span class="date">1:32 PM - 12 Jan 2018</span>
-  <hr>
+  <hr />
 </div>
 <footer>
   <div class="stats">
-    <div class="Retweets">
-      <strong>107</strong> Retweets
-    </div>
-    <div class="likes">
-      <strong>431</strong> Likes
-    </div>
+    <div class="Retweets"><strong>107</strong> Retweets</div>
+    <div class="likes"><strong>431</strong> Likes</div>
   </div>
   <div class="cta">
     <button class="share-btn">Share</button>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
index 5eaaf53c6b..93c109c9fc 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
@@ -20,13 +20,17 @@ The `order` property is used to tell CSS the order of how flex items appear in t
 `#box-1` 元素应具有 `order` 属性，其属性值应为 `2`。
 
 ```js
-assert($('#box-1').css('order') == '2');
+const boxOne = document.querySelector('#box-1');
+const order = window.getComputedStyle(boxOne)['order'];
+assert.strictEqual(order, '2');
 ```
 
 `#box-2` 元素应具有 `order` 属性，其属性值应为 `1`。
 
 ```js
-assert($('#box-2').css('order') == '1');
+const boxTwo = document.querySelector('#box-2');
+const order = window.getComputedStyle(boxTwo)['order'];
+assert.strictEqual(order, '1');
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
index b68a3863b3..5911eca781 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
@@ -29,7 +29,10 @@ Simply creating a grid element doesn't get you very far. You need to define the
 class 为 `container` 的元素应具有 `grid-template-columns` 属性，该属性应有三个属性值，均为 `100px`。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColumns === '100px 100px 100px');
+const templateColumns = new __helpers.CSSHelp(document).getStyle(
+  '.container'
+)?.gridTemplateColumns;
+assert.strictEqual(templateColumns, '100px 100px 100px');
 ```
 
 # --seed--
@@ -38,11 +41,21 @@ assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColum
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -68,5 +81,9 @@ assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColum
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: 100px 100px 100px;}</style>
+<style>
+  .container {
+    grid-template-columns: 100px 100px 100px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
index 7c2ac80519..9e41a33dcb 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
@@ -20,10 +20,9 @@ dashedName: add-gaps-faster-with-grid-gap
 `container` class 应该有一个 `grid-gap` 属性，在行之间设置 `10px` 的间距，在列之间设置 `20px` 的间距。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -65,5 +74,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-gap: 10px 20px;}</style>
+<style>
+  .container {
+    grid-gap: 10px 20px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
index 6f79b25257..0955d1f6d8 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
@@ -20,10 +20,9 @@ The grid you created in the last challenge will set the number of rows automatic
 类为 `container` 的元素应具有 `grid-template-rows` 属性，且该属性的两个属性值均为 `50px`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -64,5 +73,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-rows: 50px 50px;}</style>
+<style>
+  .container {
+    grid-template-rows: 50px 50px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
index 09a5c8e02a..0a6d5bde4d 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
@@ -20,10 +20,9 @@ Sometimes you want all the items in your CSS Grid to share the same alignment. Y
 class 为 `container` 的元素应具有 `justify-items` 属性且属性值应为 `center`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -33,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -67,5 +76,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {justify-items: center;}</style>
+<style>
+  .container {
+    justify-items: center;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
index 1fb733342d..71ca098cbc 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
@@ -20,8 +20,9 @@ Using the `align-items` property on a grid container will set the vertical align
 class 为 `container` 的元素应具有 `align-items` 属性且属性值应为 `end`。
 
 ```js
-assert(
-  code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -31,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -65,5 +76,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {align-items: end;}</style>
+<style>
+  .container {
+    align-items: end;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
index 3bbdc021b0..aba1c4bb19 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
@@ -26,8 +26,9 @@ In CSS Grid, the content of each item is located in a box which is referred to a
 class 为 `item2` 的元素应具有 `justify-self` 属性且属性值应为 `center`。
 
 ```js
-assert(
-  code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -37,7 +38,9 @@ assert(
 
 ```html
 <style>
-  .item1{background: LightSkyBlue;}
+  .item1 {
+    background: LightSkyBlue;
+  }
 
   .item2 {
     background: LightSalmon;
@@ -47,9 +50,15 @@ assert(
     /* Only change code above this line */
   }
 
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -75,5 +84,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item2 {justify-self: center;}</style>
+<style>
+  .item2 {
+    justify-self: center;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
index 4d2e1b9721..985fd627bb 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
@@ -20,7 +20,7 @@ Just as you can align an item horizontally, there's a way to align an item verti
 class 为 `item3` 的元素应具有 `align-self` 属性且属性值应为 `end`。
 
 ```js
-assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
+assert.match(code, /.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -29,8 +29,12 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
 
   .item3 {
     background: PaleTurquoise;
@@ -40,8 +44,12 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
     /* Only change code above this line */
   }
 
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -67,5 +75,9 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.item3 {align-self: end;}</style>
+<style>
+  .item3 {
+    align-self: end;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
index 02e7db93bd..ae44df2b92 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
@@ -26,10 +26,9 @@ grid-column-gap: 10px;
 class 为 `container` 的元素应具有 `grid-column-gap` 属性且属性值应为 `20px`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -72,5 +81,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-column-gap: 20px;}</style>
+<style>
+  .container {
+    grid-column-gap: 20px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
index de1b5f9638..b7804d55a5 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
@@ -20,8 +20,9 @@ You can add a gap in between the rows of a grid using `grid-row-gap` in the same
 class 为 `container` 的元素应具有 `grid-row-gap` 属性且属性值应为 `5px`。
 
 ```js
-assert(
-  code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -31,11 +32,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -64,5 +75,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-row-gap: 5px;}</style>
+<style>
+  .container {
+    grid-row-gap: 5px;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
index f23a43a52d..4d34d027f9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
@@ -26,10 +26,9 @@ repeat(auto-fill, minmax(60px, 1fr));
 class 为 `container` 的元素应具有 `grid-template-columns` 属性，且属性值应使用 `repeat` 和 `auto-fill`，以便将最小宽度为 `60px`、最大宽度为 `1fr` 的列填充至网格。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -91,11 +100,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
index 8dd9fd0d53..3c5fc46e51 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
@@ -22,10 +22,9 @@ dashedName: create-flexible-layouts-using-auto-fit
 `container2` class 应该有一个 `grid-template-columns` 属性，通过 `repeat` 和 `auto-fit` 将网格中的列的宽度设置为最小 `60px`，最大 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -35,11 +34,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -87,5 +96,12 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  }
+  .container2 {
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.md
index 39d1aa2874..3aae494356 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.md
@@ -21,17 +21,16 @@ Turning an element into a grid only affects the behavior of its direct descendan
 class 为 `item3` 的元素应具有 `grid-template-columns` 属性且属性值应为 `auto` 和 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
 );
 ```
 
 class 为 `item3` 的元素应具有 `display` 属性且属性值应为 `grid`。
 
 ```js
-assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+assert.match(code, /.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -50,9 +49,9 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
     grid-template-rows: auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "advert header"
-      "advert content"
-      "advert footer";
+      'advert header'
+      'advert content'
+      'advert footer';
   }
   .item1 {
     background: LightSkyBlue;
@@ -85,7 +84,6 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
   .itemTwo {
     background: BlanchedAlmond;
   }
-
 </style>
 
 <div class="container">
@@ -102,5 +100,10 @@ assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
+<style>
+  .item3 {
+    grid-template-columns: auto 1fr;
+    display: grid;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.md
index c758b6373f..c8cd5be457 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.md
@@ -22,7 +22,7 @@ Turn any HTML element into a grid container by setting its `display` property to
 `container` class 应具有 `display` 属性，属性值应为 `grid`。
 
 ```js
-assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+assert.match(code, /.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--
@@ -31,11 +31,21 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -60,5 +70,9 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
 # --solutions--
 
 ```html
-<style>.container {display: grid;}</style>
+<style>
+  .container {
+    display: grid;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
index 6f7a7cff5b..c959049cc7 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
@@ -12,9 +12,9 @@ You can group cells of your grid together into an <dfn>area</dfn> and give the a
 
 ```css
 grid-template-areas:
-  "header header header"
-  "advert content content"
-  "advert footer footer";
+  'header header header'
+  'advert content content'
+  'advert footer footer';
 ```
 
 上面的代码将网格单元格分成四个区域：`header`、`advert`、`content` 和 `footer`。 每个单词代表一个单元格，每对引号代表一行。
@@ -28,12 +28,9 @@ grid-template-areas:
 class 为 `container` 的元素应具有 `grid-template-areas` 属性，和示例类似，但是 `footer` 区域跨越整个底部行。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(
-      /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
-    )
+assert.match(
+  __helpers.removeCssComments(code),
+  /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?["|']\s*?header\s*?header\s*?header\s*?["|']\s*?["|']\s*?advert\s*?content\s*?content\s*?["|']\s*?["|']\s*?footer\s*?footer\s*?footer\s*?["|']\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -43,11 +40,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -60,9 +67,9 @@ assert(
     grid-gap: 10px;
     grid-template-areas:
     /* Only change code below this line */
-      "header header header"
-      "advert content content"
-      "advert footer footer";
+      'header header header'
+      'advert content content'
+      'advert footer footer';
     /* Only change code above this line */
   }
 </style>
@@ -80,11 +87,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -97,9 +114,9 @@ assert(
     grid-gap: 10px;
 
     grid-template-areas:
-      "header header header"
-      "advert content content"
-      "footer footer footer";
+      'header header header'
+      'advert content content'
+      'footer footer footer';
   }
 </style>
 
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
index b25620529a..550596b0f7 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
@@ -26,10 +26,9 @@ grid-template-columns: 100px minmax(50px, 200px);
 class 为 `container` 的元素应使用 `grid-template-columns` 属性设置 3 列，其中，每列最小宽度应为 `90px`，最大宽度应为 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -39,11 +38,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -73,5 +82,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(3, minmax(90px, 1fr));
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
index f9b5b7ad1c..a9e1d7d071 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
@@ -28,10 +28,9 @@ After creating an area template for your grid container, as shown in the previou
 class 为 `item5` 的元素应具有 `grid-area` 属性且属性值应为 `footer`。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -41,10 +40,18 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -64,9 +71,9 @@ assert(
     grid-template-rows: 1fr 1fr 1fr;
     grid-gap: 10px;
     grid-template-areas:
-      "header header header"
-      "advert content content"
-      "footer footer footer";
+      'header header header'
+      'advert content content'
+      'footer footer footer';
   }
 </style>
 
@@ -82,5 +89,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item5 {grid-area: footer;}</style>
+<style>
+  .item5 {
+    grid-area: footer;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
index 7286083d15..0dcbb76eda 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
@@ -42,10 +42,9 @@ grid-template-columns: 1fr 50px 1fr 50px 20px;
 class 为 `container` 的元素应具有 `grid-template-columns` 属性，其属性值应设置为重复 3 列，且每列宽度为 `1fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -55,11 +54,21 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
-  .item5{background:PaleGreen;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
+  .item5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -89,5 +98,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
+<style>
+  .container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
index ae6c2e3a60..52639679a0 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
@@ -34,10 +34,9 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
 `container` 类应该有一个 `grid-template-columns` 属性，该属性具有以下宽度的三列：`1fr`、`100px` 和 `2fr`。
 
 ```js
-assert(
-  code.match(
-    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -47,11 +46,21 @@ assert(
 
 ```html
 <style>
-  .d1{background:LightSkyBlue;}
-  .d2{background:LightSalmon;}
-  .d3{background:PaleTurquoise;}
-  .d4{background:LightPink;}
-  .d5{background:PaleGreen;}
+  .d1 {
+    background: LightSkyBlue;
+  }
+  .d2 {
+    background: LightSalmon;
+  }
+  .d3 {
+    background: PaleTurquoise;
+  }
+  .d4 {
+    background: LightPink;
+  }
+  .d5 {
+    background: PaleGreen;
+  }
 
   .container {
     font-size: 40px;
@@ -79,5 +88,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
+<style>
+  .container {
+    grid-template-columns: 1fr 100px 2fr;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
index c72b35cc61..9d75843589 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
@@ -12,13 +12,16 @@ dashedName: use-grid-area-without-creating-an-areas-template
 The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
 
 ```css
-item1 { grid-area: 1/1/2/4; }
+item1 {
+  grid-area: 1/1/2/4;
+}
 ```
 
 这里使用了你之前学习的网格线编号来定义网格项的区域。 上例中数字代表这些值：
 
 ```css
-grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
+grid-area: horizontal line to start at / vertical line to start at / horizontal
+  line to end at / vertical line to end at;
 ```
 
 因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。
@@ -32,10 +35,9 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal
 class 为 `item5` 的元素应具有 `grid-area` 属性，且位于水平第三和第四条线、垂直第一和第四条线之间的区域。
 
 ```js
-assert(
-  code.match(
-    /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
-  )
+assert.match(
+  code,
+  /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -45,10 +47,18 @@ assert(
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -82,5 +92,9 @@ assert(
 # --solutions--
 
 ```html
-<style>.item5 {grid-area: 3/1/4/4;}</style>
+<style>
+  .item5 {
+    grid-area: 3/1/4/4;
+  }
+</style>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
index ea1de2dc12..c045fc7284 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
@@ -36,18 +36,19 @@ grid-column: 1 / 3;
 class 为 `item5` 的元素应具有 `grid-column` 属性。
 
 ```js
-assert(
-  __helpers
-    .removeWhiteSpace($('style').text())
-    .match(/\.item5{.*grid-column:.*}/g)
+const styleElement = document.querySelector('style:not(.fcc-hide-header)');
+assert.match(
+  __helpers.removeWhiteSpace(styleElement.textContent),
+  /\.item5{.*grid-column:.*}/g
 );
 ```
 
 class 为 `item5` 的元素应具有 `grid-column` 属性，其属性值应将元素设置为占用网格的最后两列。
 
 ```js
-const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
-const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
+const itemFive = document.querySelector('.item5');
+const colStart = getComputedStyle(itemFive).gridColumnStart;
+const colEnd = getComputedStyle(itemFive).gridColumnEnd;
 const result = colStart.toString() + colEnd.toString();
 const correctResults = [
   '24',
@@ -60,7 +61,7 @@ const correctResults = [
   'span 2auto',
   'autospan 2'
 ];
-assert(correctResults.includes(result));
+assert.include(correctResults, result);
 ```
 
 # --seed--
@@ -69,10 +70,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -107,10 +116,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
index 8173c06062..2d444a871e 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
@@ -20,16 +20,19 @@ Of course, you can make items consume multiple rows just like you can with colum
 class 为 `item5` 的元素应具有 `grid-row` 属性。
 
 ```js
-assert(
-  __helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
+const styleElement = document.querySelector('style:not(.fcc-hide-header)');
+assert.match(
+  __helpers.removeWhiteSpace(styleElement.textContent),
+  /\.item5{.*grid-row:.*}/g
 );
 ```
 
 class 为 `item5` 的元素应具有 `grid-row` 属性，其属性值应将元素设置为占用网格的最后两行。
 
 ```js
-const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
-const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
+const itemFive = document.querySelector('.item5');
+const rowStart = getComputedStyle(itemFive).gridRowStart;
+const rowEnd = getComputedStyle(itemFive).gridRowEnd;
 const result = rowStart.toString() + rowEnd.toString();
 const correctResults = [
   '24',
@@ -42,7 +45,7 @@ const correctResults = [
   'span 2auto',
   'autospan 2'
 ];
-assert(correctResults.includes(result));
+assert.include(correctResults, result);
 ```
 
 # --seed--
@@ -51,10 +54,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
@@ -89,10 +100,18 @@ assert(correctResults.includes(result));
 
 ```html
 <style>
-  .item1{background:LightSkyBlue;}
-  .item2{background:LightSalmon;}
-  .item3{background:PaleTurquoise;}
-  .item4{background:LightPink;}
+  .item1 {
+    background: LightSkyBlue;
+  }
+  .item2 {
+    background: LightSalmon;
+  }
+  .item3 {
+    background: PaleTurquoise;
+  }
+  .item4 {
+    background: LightPink;
+  }
 
   .item5 {
     background: PaleGreen;
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
index fe11a9eee2..43c45083e5 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
@@ -22,12 +22,9 @@ CSS Grid can be an easy way to make your site more responsive by using media que
 当网页可视区域的宽度为 `400px` 或以上时，class 为 `container` 的元素应具有 `grid-template-areas` 属性，其属性值能够使 footer 和 header 区域分别占据顶行和底行，advert 和 content 区域分别占据中间行的左列和右列。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(
-      /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
-    )
+assert.match(
+  __helpers.removeCssComments(code),
+  /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?["|']\s*?header\s*?header\s*?["|']\s*?["|']\s*?advert\s*?content\s*?["|']\s*?["|']\s*?footer\s*?footer\s*?["|']\s*?;[\s\S]*}/gi
 );
 ```
 
@@ -67,30 +64,30 @@ assert(
     grid-template-rows: 50px auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "header"
-      "advert"
-      "content"
-      "footer";
+      'header'
+      'advert'
+      'content'
+      'footer';
   }
 
-  @media (min-width: 300px){
-    .container{
+  @media (min-width: 300px) {
+    .container {
       grid-template-columns: auto 1fr;
       grid-template-rows: auto 1fr auto;
       grid-template-areas:
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
     }
   }
 
-  @media (min-width: 400px){
-    .container{
+  @media (min-width: 400px) {
+    .container {
       grid-template-areas:
       /* Only change code below this line */
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
       /* Only change code above this line */
     }
   }
@@ -138,29 +135,29 @@ assert(
     grid-template-rows: 50px auto 1fr auto;
     grid-gap: 10px;
     grid-template-areas:
-      "header"
-      "advert"
-      "content"
-      "footer";
+      'header'
+      'advert'
+      'content'
+      'footer';
   }
 
-  @media (min-width: 300px){
-    .container{
+  @media (min-width: 300px) {
+    .container {
       grid-template-columns: auto 1fr;
       grid-template-rows: auto 1fr auto;
       grid-template-areas:
-        "advert header"
-        "advert content"
-        "advert footer";
+        'advert header'
+        'advert content'
+        'advert footer';
     }
   }
 
-  @media (min-width: 400px){
-    .container{
+  @media (min-width: 400px) {
+    .container {
       grid-template-areas:
-        "header header"
-        "advert content"
-        "footer footer";
+        'header header'
+        'advert content'
+        'footer footer';
     }
   }
 </style>
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
index 9427992222..82a7030f64 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
@@ -16,13 +16,17 @@ Media Queries are a new technique introduced in CSS3 that change the presentatio
 下面是一个媒体查询的例子，当设备宽度小于或等于 `100px` 时返回内容：
 
 ```css
-@media (max-width: 100px) { /* CSS Rules */ }
+@media (max-width: 100px) {
+  /* CSS Rules */
+}
 ```
 
 以下定义的媒体查询，是当设备高度大于或等于 `350px` 时返回内容：
 
 ```css
-@media (min-height: 350px) { /* CSS Rules */ }
+@media (min-height: 350px) {
+  /* CSS Rules */
+}
 ```
 
 注意，只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。
@@ -37,21 +41,30 @@ Media Queries are a new technique introduced in CSS3 that change the presentatio
 
 ```js
 const media = new __helpers.CSSHelp(document).getCSSRules('media');
-assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
+assert.isTrue(
+  media.some(x => x.media?.mediaText?.includes('(max-height: 800px)'))
+);
 ```
 
 当设备 `height` 小于等于 `800px` 时，`p` 元素的 `font-size` 应为 `10px`。
 
 ```js
-const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
-assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia(
+  '(max-height: 800px)'
+);
+assert.strictEqual(
+  rules?.find(x => x.selectorText === 'p')?.style?.fontSize,
+  '10px'
+);
 ```
 
 当设备 `height` 大于 `800px` 时，`p` 元素的 `font-size` 应为 `20px`。
 
 ```js
-const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
-assert(ifPFirst?.style?.fontSize === '20px');
+const ifPFirst = new __helpers.CSSHelp(document)
+  .getCSSRules()
+  ?.find(x => x?.selectorText === 'p' || x?.media);
+assert.strictEqual(ifPFirst?.style?.fontSize, '20px');
 ```
 
 # --seed--
@@ -69,7 +82,14 @@ assert(ifPFirst?.style?.fontSize === '20px');
   /* Only change code above this line */
 </style>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
 
 # --solutions--
@@ -87,5 +107,12 @@ assert(ifPFirst?.style?.fontSize === '20px');
   }
 </style>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
index 0554936451..b7f763f9bd 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
@@ -28,13 +28,13 @@ img {
 `responsive-img` 类应将 `max-width` 设置为 `100%`。
 
 ```js
-assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
+assert.strictEqual(getComputedStyle(document.querySelector('.responsive-img')).maxWidth, '100%');
 ```
 
 `responsive-img` 类应将 `height` 设置为 `auto`。
 
 ```js
-assert(code.match(/height:\s*?auto;/g));
+assert.match(code, /height:\s*?auto;/g);
 ```
 
 # --seed--
@@ -53,24 +53,38 @@ img {
 }
 </style>
 
-<img class="responsive-img" src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img
+  class="responsive-img"
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
 ```
 
 # --solutions--
 
 ```html
 <style>
-.responsive-img {
-  max-width: 100%;
-  height: auto;
-}
-
-img {
-  width: 600px;
-}
+  .responsive-img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  img {
+    width: 600px;
+  }
 </style>
 
-<img class="responsive-img" src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img
+  class="responsive-img"
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickerPack.jpg"
+  alt="freeCodeCamp stickers set"
+/>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
index d159516e3c..6c922b68d9 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
@@ -18,7 +18,9 @@ Instead of using `em` or `px` to size text, you can use viewport units for respo
 下面这个例子是设置 `body` 标签的宽度为视窗宽度的 30%。
 
 ```css
-body { width: 30vw; }
+body {
+  width: 30vw;
+}
 ```
 
 # --instructions--
@@ -30,20 +32,18 @@ body { width: 30vw; }
 `h2` 元素的 `width` 应为 80vw。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
+assert.match(
+  __helpers.removeCssComments(code),
+  /h2\s*?{\s*?width:\s*?80vw;\s*?}/g
 );
 ```
 
 `p` 元素的 `width` 应为 75vmin。
 
 ```js
-assert(
-  __helpers
-    .removeCssComments(code)
-    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
+assert.match(
+  __helpers.removeCssComments(code),
+  /p\s*?{\s*?width:\s*?75vmin;\s*?}/g
 );
 ```
 
@@ -57,7 +57,14 @@ assert(
 </style>
 
 <h2>Importantus Ipsum</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
 
 # --solutions--
@@ -65,13 +72,20 @@ assert(
 ```html
 <style>
   h2 {
-      width: 80vw;
+    width: 80vw;
   }
   p {
-      width: 75vmin;
+    width: 75vmin;
   }
 </style>
 
 <h2>Importantus Ipsum</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
+  massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
+  lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
+  habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
+  Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
+  consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
+</p>
 ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
index 1f40cd932f..e79bf43678 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
@@ -15,9 +15,12 @@ With the increase of internet connected devices, their sizes and specifications
 
 ```html
 <style>
-  img { height: 250px; width: 250px; }
+  img {
+    height: 250px;
+    width: 250px;
+  }
 </style>
-<img src="coolPic500x500" alt="A most excellent picture">
+<img src="coolPic500x500" alt="A most excellent picture" />
 ```
 
 # --instructions--
@@ -29,13 +32,13 @@ With the increase of internet connected devices, their sizes and specifications
 `img` 标签的 `width` 属性值应为 100px。
 
 ```js
-assert(document.querySelector('img').width === 100);
+assert.strictEqual(document.querySelector('img').width, 100);
 ```
 
 `img` 标签的 `height` 属性值应为 100px。
 
 ```js
-assert(document.querySelector('img').height === 100);
+assert.strictEqual(document.querySelector('img').height, 100);
 ```
 
 # --seed--
@@ -43,22 +46,26 @@ assert(document.querySelector('img').height === 100);
 ## --seed-contents--
 
 ```html
-<style>
-
-</style>
+<style></style>
 
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg"
+  alt="freeCodeCamp sticker that says 'Because CamperBot Cares'"
+/>
 ```
 
 # --solutions--
 
 ```html
 <style>
-  img { 
-    height: 100px; 
-    width: 100px; 
+  img {
+    height: 100px;
+    width: 100px;
   }
 </style>
 
-<img src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+<img
+  src="https://cdn.freecodecamp.org/curriculum/responsive-web-design-principles/FCCStickers-CamperBot200x200.jpg"
+  alt="freeCodeCamp sticker that says 'Because CamperBot Cares'"
+/>
 ```
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
index c5ee36e050..f70f931434 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
@@ -72,7 +72,7 @@ dashedName: build-a-25--5-clock
 
 **用户故事 #28:** 音频元素带有id为 `beep` 必须停止播放并且倒退回开头，当id为 `reset` 的元素被点击时.
 
-你可以构建你的项目通过 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用这个codepen模板</a> 并且点击`Save` 去创建你自己的作品. 或者你可以使用这个CDN链接去运行测试在你喜欢的任何环境: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+你可以构建你的项目通过 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用这个codepen模板</a> 并且点击`Save` 去创建你自己的作品. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 一旦你完成了，提交你通过所有测试的工作项目URL.
 
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
index 64393f2da4..c1f475b128 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
@@ -41,7 +41,7 @@ dashedName: build-a-drum-machine
 - [Kick](https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3)
 - [Closed-HH](https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3)
 
-你可以通过 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 并单击 `Save` 来创建你自己的笔，从而构建你的项目。 或者你可以使用此 CDN 链接在你喜欢的任何环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+你可以通过 <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 并单击 `Save` 来创建你自己的笔，从而构建你的项目。 If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 完成项目并通过所有测试后，请输入你的项目在 CodePen 上的链接并提交。
 
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
index 800084372a..a639cef8bb 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
@@ -52,7 +52,7 @@ dashedName: build-a-javascript-calculator
 -   **Immediate Execution Logic:** `11.5`
 -   **公式／表达式逻辑：** `32.5`
 
-你可以<a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用 CodePen 模版</a>创建你的新项目，点击 `Save` 即可创建你的新项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。
 
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
index 2278b3791c..ef0d670742 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
@@ -29,7 +29,7 @@ dashedName: build-a-markdown-previewer
 
 **可选奖励（你不需要通过此测试）：** 我的 markdown 预览器解释回车符并将其呈现为 `br`（换行符）元素。
 
-你可以通过 <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用此 CodePen 模板</a> 并单击 `Save` 来创建你自己的笔，从而构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 当你完成了本项目，并且项目通过所有测试，请提交项目的 URL。
 
diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
index e4496564db..af759ed338 100644
--- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
+++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
@@ -37,7 +37,7 @@ dashedName: build-a-random-quote-machine
 
 **用户故事 #11：** `#quote-box` 包装元素应水平居中。 请在浏览器缩放级别为 100% 且页面最大化的情况下运行测试。
 
-你可以<a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">使用这份 CodePen 模版</a>来创建你的新项目，点击 `Save` 即可创建属于你自己的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. If you prefer to use another environment, then put this `<script>` tag into the body of your `index.html` file: `<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>`
 
 当你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
index a92d5ad670..c52145c310 100644
--- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
+++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
@@ -22,6 +22,8 @@ fetch('/json/cats.json')
 
 ```
 
+Note: The `fetch()` method uses `GET` as the default `HTTP` method. This means you don’t need to specify it explicitly for basic data retrieval.
+
 逐行解释一下代码。
 
 第一行是发起请求。 `fetch(URL)` 向指定的 URL 发起 `GET` 请求。 这个方法返回一个 Promise。
diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
index 3a7a185b43..982073cee1 100644
--- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
+++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
@@ -212,15 +212,29 @@ async (getUserInput) => {
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
     });
-    if (addRes.ok) {
-      const actual = await addRes.json();
-      assert.deepEqual(actual, expected);
-      assert.isString(actual.description);
-      assert.isNumber(actual.duration);
-      assert.isString(actual.date);
-    } else {
+    assert.isTrue(addRes.ok);
+    if (!addRes.ok) {
       throw new Error(`${addRes.status} ${addRes.statusText}`);
     }
+    const responseBody = await addRes.json();
+    assert.isString(responseBody.description);
+    assert.isNumber(responseBody.duration);
+    assert.isString(responseBody.date);
+    assert.equal(responseBody._id, expected._id);
+    assert.equal(responseBody.username, expected.username);
+    assert.equal(responseBody.description, expected.description);
+    assert.equal(responseBody.duration, expected.duration);
+    const receivedDate = new Date(responseBody.date);
+    const expectedDate = new Date(expected.date); // Jan 1, 1990
+    const allowedPreviousDate = new Date(expectedDate);
+    allowedPreviousDate.setDate(expectedDate.getDate() - 1); // Dec 31, 1989
+    const isValidDate =
+      receivedDate.toDateString() === expectedDate.toDateString() ||
+      receivedDate.toDateString() === allowedPreviousDate.toDateString();
+    assert.isTrue(
+      isValidDate,
+      `Expected date to be ${expectedDate.toDateString()} or ${allowedPreviousDate.toDateString()}, but got ${receivedDate.toDateString()}`
+    );
   } else {
     throw new Error(`${res.status} ${res.statusText}`);
   }
@@ -495,26 +509,38 @@ async(getUserInput) => {
 The `date` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string. Use the `dateString` format of the `Date` API.
 
 ```js
-async(getUserInput) => {
+async (getUserInput) => {
   const url = getUserInput('url');
   const res = await fetch(url + '/api/users', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
-    body: `username=fcc_test_${Date.now()}`.substring(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
   });
-  if(res.ok) {
-    const {_id, username} = await res.json();
+
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const currentDate = new Date();
+    const expectedDates = [
+      new Date(currentDate.setDate(currentDate.getDate() - 1)).toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', ''),
+      new Date().toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', ''),
+      new Date(currentDate.setDate(currentDate.getDate() + 1)).toLocaleDateString("en-US", {
+        timeZone: "UTC", weekday: "short", month: "short",
+        day: "2-digit", year: "numeric"
+      }).replaceAll(',', '')
+    ];
     const expected = {
       username,
       description: 'test',
       duration: 60,
       _id,
-      date: new Date().toLocaleDateString("en-US", {
-        timeZone: "UTC", weekday: "short", month: "short",
-        day: "2-digit", year: "numeric"
-      }).replaceAll(',', '')
     };
     const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
       method: 'POST',
@@ -523,13 +549,13 @@ async(getUserInput) => {
       },
       body: `description=${expected.description}&duration=${expected.duration}`
     });
-    if(addRes.ok) {
+    if (addRes.ok) {
       const logRes = await fetch(url + `/api/users/${_id}/logs`);
-      if(logRes.ok){
-        const {log} = await logRes.json();
+      if (logRes.ok) {
+        const { log } = await logRes.json();
         const exercise = log[0];
         assert.isString(exercise.date);
-        assert.equal(exercise.date, expected.date);
+        assert.include(expectedDates, exercise.date); // Check if date matches any valid dates
       } else {
         throw new Error(`${logRes.status} ${logRes.statusText}`);
       }
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
index 1e80deaf15..41bc9cb027 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/build-a-budget-app-project/budget-app.md
@@ -711,6 +711,358 @@ t.result.wasSuccessful()
 })
 ```
 
+Title at the top of `create_spend_chart` chart should say `Percentage spent by category`.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+
+    def test_create_spend_chart(self):
+        self.food.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        chart = budget.create_spend_chart([self.food])
+        expected = "Percentage spent by category"
+        self.assertEqual(chart.split("\\n")[0], expected, "Chart should have correct title.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should have correct percentages down the left side.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+
+    def test_create_spend_chart(self):
+        self.food.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        chart = budget.create_spend_chart([self.food])
+        percentages = ["100|", " 90|", " 80|", " 70|", " 60|", " 50|", " 40|", " 30|", " 20|", " 10|", "  0|"]
+        for line, percent in zip(chart.split("\\n")[1:], percentages):
+           self.assertTrue(line.startswith(percent), "Chart correct percentages in the vertical axis.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+The height of each bar on the `create_spend_chart` chart should be rounded down to the nearest 10.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(78)
+        self.entertainment.withdraw(22)
+        self.business.withdraw(8)
+
+    def test_create_spend_chart_rounding_close_to_upper_and_lower_ten(self):
+        chart_lines = budget.create_spend_chart([self.food, self.entertainment]).split("\\n")[1:12]
+        result_lines = '''100|
+ 90|
+ 80|
+ 70| o
+ 60| o
+ 50| o
+ 40| o
+ 30| o
+ 20| o  o
+ 10| o  o
+  0| o  o'''.split("\\n")
+
+        self.assertEqual(len(chart_lines), len(result_lines), "Lines missing in chart.")
+        for actual, expected in zip(chart_lines, result_lines):
+            self.assertTrue(actual.startswith(expected), "Expected different rounding of bars.")
+
+
+    def test_create_spend_chart_rounding_single_digit(self):
+        chart_lines = budget.create_spend_chart([self.business, self.food, self.entertainment]).split("\\n")[1:12]
+        result_lines = '''100|
+ 90|
+ 80|
+ 70|    o
+ 60|    o
+ 50|    o
+ 40|    o
+ 30|    o
+ 20|    o  o
+ 10|    o  o
+  0| o  o  o'''.split("\\n")
+
+        self.assertEqual(len(chart_lines), len(result_lines), "Lines missing in chart.")
+        for actual, expected in zip(chart_lines, result_lines):
+            self.assertTrue(actual.startswith(expected), "Expected different rounding of bars.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+Each line in `create_spend_chart` chart should have the same length. Bars for different categories should be separated by two spaces, with additional two spaces after the final bar.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(78)
+        self.entertainment.withdraw(22)
+        self.business.withdraw(8)
+
+
+    def test_create_spend_chart_chart_lines_have_expected_length(self):
+        chart_categories = [[self.food, self.entertainment], [self.business, self.food, self.entertainment]]
+
+        expected_lengths = [len(line) for line in ["  0| o  o  ", "  0| o  o  o  "]]
+        expected_chart_lines = 11
+
+        for categories, expected_length in zip(chart_categories, expected_lengths):
+            chart_lines = budget.create_spend_chart(categories).split("\\n")[1:12]
+
+            self.assertEqual(len(chart_lines), expected_chart_lines, "Lines missing in chart.")
+            for actual in chart_lines:
+                self.assertEqual(len(actual), expected_length, "Expected different length of the chart line. Check that all spacing is exact.")
+`);
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` should correctly show horizontal line below the bars. Using three `-` characters for each category, and in total going two characters past the final bar.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+
+    def test_create_spend_chart_horizontal_bar(self):
+        chart_categories = [[self.business], [self.business, self.food], [self.business, self.food, self.entertainment]]
+        horizontal_lines = ["    ----", "    -------", "    ----------"]
+        for categories, expected in zip(chart_categories, horizontal_lines):
+            actual = budget.create_spend_chart(categories).split("\\n")[12]
+            self.assertEqual(actual, expected, "Expected different horizontal bar. Check that all spacing is exact.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should not have new line character at the end.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+
+    def test_create_spend_chart_no_ending_new_line(self):
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+        actual = budget.create_spend_chart([self.business, self.food, self.entertainment])
+        self.assertFalse(actual.endswith("\\n"), "Expected chart to not have new line at the end.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
+`create_spend_chart` chart should have each category name written vertically below the bar. Each line should have the same length, each category should be separated by two spaces, with additional two spaces after the final category.
+
+```js
+({
+  test: () => {
+    pyodide.FS.writeFile('/home/pyodide/budget.py', code);
+    pyodide.FS.writeFile('/home/pyodide/test_module.py',`
+import unittest
+import budget
+from importlib import reload
+
+reload(budget)
+class UnitTests(unittest.TestCase):
+    maxDiff = None
+    def setUp(self):
+        self.food = budget.Category("Food")
+        self.entertainment = budget.Category("Entertainment")
+        self.business = budget.Category("Business")
+        self.food.deposit(900, "deposit")
+        self.entertainment.deposit(900, "deposit")
+        self.business.deposit(900, "deposit")
+        self.food.withdraw(105.55)
+        self.entertainment.withdraw(33.40)
+        self.business.withdraw(10.99)
+
+    def test_create_spend_chart_names_two_categories(self):
+        chart = budget.create_spend_chart([self.food, self.entertainment])
+        actual = "\\n".join(chart.split("\\n")[13:]).rstrip("\\n")
+        expected = "     F  E  \\n     o  n  \\n     o  t  \\n     d  e  \\n        r  \\n        t  \\n        a  \\n        i  \\n        n  \\n        m  \\n        e  \\n        n  \\n        t  "
+        self.assertEqual(actual, expected, "Expected different category names written vertically below the bar. Check that all spacing is exact.")
+
+    def test_create_spend_chart_names_three_categories(self):
+        chart = budget.create_spend_chart([self.business, self.food, self.entertainment])
+        actual = "\\n".join(chart.split("\\n")[13:]).rstrip("\\n")
+        expected = "     B  F  E  \\n     u  o  n  \\n     s  o  t  \\n     i  d  e  \\n     n     r  \\n     e     t  \\n     s     a  \\n     s     i  \\n           n  \\n           m  \\n           e  \\n           n  \\n           t  "
+        self.assertEqual(actual, expected, "Expected different category names written vertically below the bar. Check that all spacing is exact.")
+`);
+
+    const testCode = `
+from unittest import main
+from importlib import reload
+import test_module
+reload(test_module)
+t = main(module='test_module', exit=False)
+t.result.wasSuccessful()
+`;
+    const out = runPython(testCode);
+    assert(out);
+  }
+})
+```
+
 `create_spend_chart` should print a different chart representation. Check that all spacing is exact. Open your browser console with F12 for more details.
 
 ```js
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
index 9c555f6a26..3aea836239 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
@@ -8,12 +8,11 @@ dashedName: build-a-personal-portfolio-webpage
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a>. **Do not copy this demo project**.
-
+**目标：** 构建一个功能类似于 <a href="https: personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a> 的应用程序。 **请勿复制此演示项目**。
 
 **用户需求:**
 
-1. Your portfolio should have a welcome section with an `id` of `welcome-section`
+1. 你的作品集应该有一个欢迎部分，其 `id` 为 `welcome-section`
 1. 欢迎部分应该有一个包含文本的 `h1` 元素
 1. 你的作品集应该有一个 `id` 为 `projects` 的项目部分
 1. 项目部分应该包含至少一个 `class` 为 `project-tile` 的元素来保存项目
@@ -34,8 +33,8 @@ dashedName: build-a-personal-portfolio-webpage
 你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。
 
 ```js
-const el = document.getElementById('welcome-section')
-assert(!!el);
+const el = document.getElementById('welcome-section');
+assert.isNotNull(el);
 ```
 
 你的 `#welcome-section` 元素应该包含一个 `h1` 元素。
@@ -54,25 +53,21 @@ assert.isAbove(
 assert.isAbove(
   document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
   0,
-  'h1 element in welcome section should contain your name or camper ' +
-    'name '
+  'h1 element in welcome section should contain your name or camper ' + 'name '
 );
 ```
 
 你应该有一个 `id` 为 `projects` 的项目部分。
 
 ```js
-const el = document.getElementById('projects')
-assert(!!el);
+const el = document.getElementById('projects');
+assert.isNotNull(el);
 ```
 
 你的作品集应该包含至少一个 class 为 `project-tile` 的元素。
 
 ```js
-assert.isAbove(
-  document.querySelectorAll('#projects .project-tile').length,
-  0
-);
+assert.isAbove(document.querySelectorAll('#projects .project-tile').length, 0);
 ```
 
 你的 `#projects` 元素应该包含至少一个 `a` 元素。
@@ -85,35 +80,33 @@ assert.isAbove(document.querySelectorAll('#projects a').length, 0);
 
 ```js
 const el = document.getElementById('navbar');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 你的 `#navbar` 元素应该包含至少一个 `a` 元素，它的 `href` 属性以 `#` 开头。
 
 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+  nav => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );
 
-assert.isAbove(
-  links.length,
-  0,
-  'Navbar should contain an anchor link '
-);
+assert.isAbove(links.length, 0, 'Navbar should contain an anchor link ');
 ```
 
 你的作品集应该有一个 `id` 为 `profile-link` 的 `a` 元素。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.tagName === 'A')
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#profile-link` 元素应该有一个值为 `_blank` 的 `target` 属性。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.target === '_blank')
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的作品集应该至少有一个媒体查询。
@@ -121,14 +114,15 @@ assert(!!el && el.target === '_blank')
 ```js
 const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
 const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 你的 `#navbar` 元素应该始终位于视口的顶部。
 
 ```js
 (async () => {
-  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+  const timeout = milliseconds =>
+    new Promise(resolve => setTimeout(resolve, milliseconds));
 
   const navbar = document.getElementById('navbar');
   assert.approximately(
@@ -136,7 +130,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     0,
     15,
     "Navbar's parent should be body and it should be at the top of " +
-    'the viewport '
+      'the viewport '
   );
 
   window.scroll(0, 500);
@@ -147,8 +141,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     navbar?.getBoundingClientRect().top,
     0,
     15,
-    'Navbar should be at the top of the viewport even after ' +
-    'scrolling '
+    'Navbar should be at the top of the viewport even after ' + 'scrolling '
   );
   window.scroll(0, 0);
 })();
@@ -223,7 +216,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 ```css
-nav{
+nav {
   position: fixed;
   width: 100%;
   text-align: right;
@@ -233,37 +226,37 @@ nav{
   background-color: #000000;
   color: #ffffff;
 }
-@media (max-width: 500px){
-  nav{
+@media (max-width: 500px) {
+  nav {
     display: none;
   }
 }
-a{
+a {
   color: #ffffff;
 }
-main{
+main {
   text-align: center;
   background-color: black;
-  font-family:Pacifico
+  font-family: Pacifico;
 }
-h1{
+h1 {
   font-size: 48pt;
 }
-h2{
+h2 {
   font-size: 24pt;
 }
-p{
+p {
   font-size: 12pt;
 }
-#welcome-section{
-  background-color:#251a4a;
-  color: #FFFFFF;
+#welcome-section {
+  background-color: #251a4a;
+  color: #ffffff;
   display: table-cell;
   vertical-align: middle;
   width: 100vw;
   height: 100vh;
 }
-#projects{
+#projects {
   background-color: #060a9c;
   color: #ffffff;
   display: table-cell;
@@ -271,7 +264,7 @@ p{
   width: 100vw;
   height: 100vh;
 }
-#contact{
+#contact {
   background-color: #03300b;
   color: #ffffff;
   display: table-cell;
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
index b713756d24..447c9a47d8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
@@ -8,7 +8,7 @@ dashedName: build-a-product-landing-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>. **请勿复制此演示项目**。
 
 **用户需求:**
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index b0921efcb5..e408197630 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -8,7 +8,7 @@ dashedName: build-a-survey-form
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>. **请勿复制此演示项目**。
 
 **用户需求:**
 
@@ -38,327 +38,368 @@ dashedName: build-a-survey-form
 你应该有一个 `id` 为 `title` 的 `h1` 元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.tagName === 'H1')
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'H1');
 ```
 
 你的 `#title` 元素不应为空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你应该有一个 `id` 为 `description` 的 `p` 元素。
 
 ```js
-const el = document.getElementById('description')
-assert(!!el && el.tagName === 'P')
+const el = document.getElementById('description');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'P');
 ```
 
 你的 `#description` 不应为空。
 
 ```js
-const el = document.getElementById('description')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('description');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你应该有一个 `id` 为 `survey-form` 的 `form` 元素。
 
 ```js
-const el = document.getElementById('survey-form')
-assert(!!el && el.tagName === 'FORM')
+const el = document.getElementById('survey-form');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'FORM');
 ```
 
 你应该有一个 `id` 为 `name` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#name` 元素应该具有 `type` 为 `text`。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.type === 'text')
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'text');
 ```
 
 你的 `#name` 元素应该在表单中是必填项。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && el.required)
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 你的 `#name` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #name')
-assert(!!el)
+const el = document.querySelector('#survey-form #name');
+assert.isNotNull(el);
 ```
 
 你应该有一个 `id` 为 `email` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#email` 元素应该具有 `type` 为 `email`。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.type === 'email')
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'email');
 ```
 
 你的 `#email` 元素应该需要输入。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && el.required)
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 你的 `#email` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #email')
-assert(!!el)
+const el = document.querySelector('#survey-form #email');
+assert.isNotNull(el);
 ```
 
 你应该有一个 `id` 为 `number` 的 `input` 元素。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.tagName === 'INPUT')
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 你的 `#number` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #number')
-assert(!!el)
+const el = document.querySelector('#survey-form #number');
+assert.isNotNull(el);
 ```
 
 你的 `#number` 元素应该具有 `type` 为 `number`。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.type === 'number')
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'number');
 ```
 
 你的 `#number` 应该有一个值为数字的 `min` 属性。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.min && isFinite(el.min))
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotEmpty(el.min);
+assert.isTrue(isFinite(el.min));
 ```
 
 你的 `#number` 应该有一个值为数字的 `max` 属性。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && el.max && isFinite(el.max))
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotEmpty(el.max);
+assert.isTrue(isFinite(el.max));
 ```
 
 你应该有一个 `id` 为 `name-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('name-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('name-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你应该有一个 `id` 为 `email-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('email-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('email-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你应该有一个 `id` 为 `number-label` 的 `label` 元素。
 
 ```js
-const el = document.getElementById('number-label')
-assert(!!el && el.tagName === 'LABEL')
+const el = document.getElementById('number-label');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 你的 `#name-label` 应包含描述输入的文本。
 
 ```js
-const el = document.getElementById('name-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('name-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#email-label` 应包含描述输入的文本。
 
 ```js
-const el = document.getElementById('email-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('email-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#number-label` 应该包含描述输入的文本。
 
 ```js
-const el = document.getElementById('number-label')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('number-label');
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #name-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #name-label');
+assert.isNotNull(el);
 ```
 
 你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #email-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #email-label');
+assert.isNotNull(el);
 ```
 
 你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #number-label')
-assert(!!el)
+const el = document.querySelector('#survey-form #number-label');
+assert.isNotNull(el);
 ```
 
 你的 `#name` 元素应该有 `placeholder` 属性与占位符文本。
 
 ```js
-const el = document.getElementById('name')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('name');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你的 `#email` 元素应该有 `placeholder` 属性与占位符文本。
 
 ```js
-const el = document.getElementById('email')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('email');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你的 `#number` 元素应该有 `placeholder` 属性与占位符文本。
 
 ```js
-const el = document.getElementById('number')
-assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+const el = document.getElementById('number');
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 你应该有一个 `id` 为 `dropdown` 的 `select` 元素。
 
 ```js
-const el = document.getElementById('dropdown')
-assert(!!el && el.tagName === 'SELECT')
+const el = document.getElementById('dropdown');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'SELECT');
 ```
 
 你的 `#dropdown` 应该至少有两个可选择（未禁用）`option` 元素。
 
 ```js
-const els = document.querySelectorAll('#dropdown option:not([disabled])')
-assert(els.length >= 2)
+const els = document.querySelectorAll('#dropdown option:not([disabled])');
+assert.isAtLeast(els.length, 2);
 ```
 
 你的 `#dropdown` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #dropdown')
-assert(!!el)
+const el = document.querySelector('#survey-form #dropdown');
+assert.isNotNull(el);
 ```
 
 你应该有至少两个 `input` 元素，`type` 为 `radio`（单选按钮）。
 
 ```js
-const els = document.querySelectorAll('input[type="radio"]')
-assert(els.length >= 2)
+const els = document.querySelectorAll('input[type="radio"]');
+assert.isAtLeast(els.length, 2);
 ```
 
 你至少应该有两个单选按钮，是 `#survey-form` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#survey-form input[type="radio"]')
-assert(els.length >= 2)
+const els = document.querySelectorAll('#survey-form input[type="radio"]');
+assert.isAtLeast(els.length, 2);
 ```
 
 你所有的单选按钮都应该有一个 `value` 属性和值。
 
 ```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll(
+  'input[type="radio"][value=""], input[type="radio"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 你所有的单选按钮都应该有一个 `name` 属性和值。
 
 ```js
-const els1 = document.querySelectorAll('input[type="radio"]')
-const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('input[type="radio"]');
+const els2 = document.querySelectorAll(
+  'input[type="radio"][name=""], input[type="radio"]:not([name])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 每个单选按钮组应至少有 2 个单选按钮。
 
 ```js
 const radioButtons = document.querySelectorAll('input[type="radio"]');
-const groups = {}
+const groups = {};
 
 if (radioButtons) {
   radioButtons.forEach(el => {
-    if (!groups[el.name]) groups[el.name] = []
-    groups[el.name].push(el)
-  })
+    if (!groups[el.name]) groups[el.name] = [];
+    groups[el.name].push(el);
+  });
 }
 
-const groupKeys = Object.keys(groups)
+const groupKeys = Object.keys(groups);
 
 groupKeys.forEach(key => {
-  if (groups[key].length < 2) assert(false)
-})
+  if (groups[key].length < 2) assert(false);
+});
 
-assert(groupKeys.length > 0)
+assert.isAbove(groupKeys.length, 0);
 ```
 
 你应该至少有两个 `input` 元素，`type` 为 `checkbox`（复选框），它们是 `#survey-form` 的子元素。
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
-assert(els.length >= 2)
+assert.isAtLeast(els.length, 2);
 ```
 
 你在 `#survey-form` 中的所有复选框都应该有 `value` 属性和值。
 
 ```js
-const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
-const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
-assert(els1.length > 0 && els2.length === 0)
+const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]');
+const els2 = document.querySelectorAll(
+  '#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 你至少应该有一个 `textarea` 元素，它是 `#survey-form` 的子元素。
 
 ```js
-const el = document.querySelector('#survey-form textarea')
-assert(!!el)
+const el = document.querySelector('#survey-form textarea');
+assert.isNotNull(el);
 ```
 
 你应该有一个 `id` 为 `submit` 的 `input` 或 `button` 元素。
 
 ```js
-const el = document.getElementById('submit')
-assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
+const el = document.getElementById('submit');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'INPUT' || el.tagName === 'BUTTON');
 ```
 
 你的 `#submit` 元素应该具有 `type` 为 `submit`。
 
 ```js
-const el = document.getElementById('submit')
-assert(!!el && el.type === 'submit')
+const el = document.getElementById('submit');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'submit');
 ```
 
 你的 `#submit` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
-const el = document.querySelector('#survey-form #submit')
-assert(!!el)
+const el = document.querySelector('#survey-form #submit');
+assert.isNotNull(el);
 ```
 
 # --seed--
@@ -508,7 +549,10 @@ body {
   background: #3a3240;
   color: white;
 }
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
   background: #3a3240;
   color: white;
 }
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
index f70c2e8ee5..693c4c7eb6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
@@ -8,7 +8,7 @@ dashedName: build-a-technical-documentation-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
+**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>. **请勿复制此演示项目**。
 
 **用户需求:**
 
@@ -37,141 +37,147 @@ dashedName: build-a-technical-documentation-page
 你应该有一个 `id` 为 `main-doc` 的 `main` 元素。
 
 ```js
-const el = document.getElementById('main-doc')
-assert(!!el)
+const el = document.getElementById('main-doc');
+assert.isNotNull(el);
 ```
 
 你至少应该有 5 个 class 为 `main-section` 的 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc section');
+assert.isAtLeast(els.length, 5);
 ```
 
 你所有的 `.main-section` 元素都应该是 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (el.tagName !== 'SECTION') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'SECTION') {
+    assert.fail();
+  }
+});
+assert.isAbove(els.length, 0);
 ```
 
 你至少应该有 5 个 `.main-section` 元素，它们是 `#main-doc` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc .main-section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc .main-section');
+assert.isAtLeast(els.length, 5);
 ```
 
 每个 `.main-section` 的第一个子元素都应该是一个 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
-})
-assert(els.length > 0)
+  if (el.firstElementChild?.tagName !== 'HEADER') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你的 `header` 元素不应为空。
 
 ```js
-const els = document.querySelectorAll('header')
+const els = document.querySelectorAll('header');
 els.forEach(el => {
-  if (el.innerText?.length <= 0) assert(false)
-})
-assert(els.length > 0)
+  if (el.innerText?.length <= 0) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.main-section` 元素都应该有 `id`。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (!el.id || el.id === '') assert(false)
-})
-assert(els.length > 0)
+  if (!el.id || el.id === '') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 每个 `.main-section` 都应该有一个与其第一个子元素的文本匹配的 `id`，把子元素的文本中的空格都替换为下划线（`_`）用于 id。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
-  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
-})
-assert(els.length > 0)
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_');
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 在你的 `.main-section` 元素中总计应有至少 10 个 `p` 元素
 
 ```js
-const els = document.querySelectorAll('.main-section p')
-assert(els.length >= 10)
+const els = document.querySelectorAll('.main-section p');
+assert.isAtLeast(els.length, 10);
 ```
 
 所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section code')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section code');
+assert.isAtLeast(els.length, 5);
 ```
 
 所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section li')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section li');
+assert.isAtLeast(els.length, 5);
 ```
 
 你应该有一个 `id` 为 `navbar` 的 `nav` 元素。
 
 ```js
-const el = document.getElementById('navbar')
-assert(!!el && el.tagName === 'NAV')
+const el = document.getElementById('navbar');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'NAV');
 ```
 
 你的 `#navbar` 应该只有一个 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('#navbar header')
-assert(els.length === 1)
+const els = document.querySelectorAll('#navbar header');
+assert.lengthOf(els, 1);
 ```
 
 你应该至少有一个 class 为 `nav-link` 的 `a` 元素。
 
 ```js
-const els = document.querySelectorAll('a.nav-link')
-assert(els.length >= 1)
+const els = document.querySelectorAll('a.nav-link');
+assert.isAtLeast(els.length, 1);
 ```
 
 你所有的 `.nav-link` 元素都应该是锚元素（`a`）。
 
 ```js
-const els = document.querySelectorAll('.nav-link')
+const els = document.querySelectorAll('.nav-link');
 els.forEach(el => {
-  if (el.tagName !== 'A') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'A') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.nav-link` 元素都应该在 `#navbar` 中。
 
 ```js
-const els1 = document.querySelectorAll('.nav-link')
-const els2 = document.querySelectorAll('#navbar .nav-link')
-assert(els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.nav-link');
+const els2 = document.querySelectorAll('#navbar .nav-link');
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 你应该有相同数量的 `.nav-link` 和 `.main-section` 元素。
 
 ```js
-const els1 = document.querySelectorAll('.main-section')
-const els2 = document.querySelectorAll('.nav-link')
-assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.main-section');
+const els2 = document.querySelectorAll('.nav-link');
+assert.isNotEmpty(els1);
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 `#navbar` 中的 `header` 元素必须在 `#navbar` 中的任何链接（`a`）之前。
@@ -179,54 +185,66 @@ assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
 ```js
 const navLinks = document.querySelectorAll('#navbar a.nav-link');
 const header = document.querySelector('#navbar header');
-navLinks.forEach((navLink) => {
+navLinks.forEach(navLink => {
   if (
-    (
-      header.compareDocumentPosition(navLink) &
-      Node.DOCUMENT_POSITION_PRECEDING
-    ) 
-  ) assert(false)
+    header.compareDocumentPosition(navLink) & Node.DOCUMENT_POSITION_PRECEDING
+  )
+    assert.fail();
 });
-assert(!!header)
+assert.isNotNull(header);
 ```
 
 每个 `.nav-link` 应该有与其相关 `section` 的 `header` 文本相对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的 `#navbar` 应该有一个 `.nav-link` 包含文本 “Hello world”）。
 
 ```js
-const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
-  el.firstElementChild?.innerText?.trim().toUpperCase()
-)
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(
+  el => el.firstElementChild?.innerText?.trim().toUpperCase()
+);
 const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
   el.innerText?.trim().toUpperCase()
-)
-const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
-assert(headerText.length > 0 && linkText.length > 0 && remainder.length === 0)
+);
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1);
+
+assert.isNotEmpty(headerText);
+assert.isNotEmpty(linkText);
+assert.isEmpty(remainder);
 ```
 
 每个 `.nav-link` 都应该有一个 `href` 属性，该属性链接到其对应的 `.main-section`（例如，如果你单击包含文本 “Hello world” 的 `.nav-link` 元素，页面导航到具有该 id 的 `section` 元素）。
 
 ```js
-const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
-const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
-const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
-assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.getAttribute('href')
+);
+const mainSectionIDs = Array.from(
+  document.querySelectorAll('.main-section')
+).map(el => el.id);
+const missingHrefValues = mainSectionIDs.filter(
+  str => hrefValues.indexOf('#' + str) === -1
+);
+assert.isNotEmpty(hrefValues);
+assert.isNotEmpty(mainSectionIDs);
+assert.isEmpty(missingHrefValues, 0);
 ```
 
 你的 `#navbar` 元素应该始终位于视口的顶部。
 
 ```js
-const el = document.getElementById('navbar')
-const left1 = el?.offsetLeft
-const left2 = el?.offsetLeft
-assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+const el = document.getElementById('navbar');
+const left1 = el?.offsetLeft;
+assert.isNotNull(el);
+assert.isAtLeast(left1, -15);
+assert.isAtMost(left1, 15);
 ```
 
 你的技术文档项目应该使用至少一个媒体查询。
 
 ```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el =>
+  el.getAttribute('media')
+);
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media');
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 # --seed--
@@ -501,7 +519,7 @@ a:hover {
   left: -5px;
   padding: 5px;
   text-align: center;
-  color: #92869c
+  color: #92869c;
 }
 @media (min-width: 480px) {
   #navbar {
@@ -510,7 +528,7 @@ a:hover {
 }
 main {
   margin-left: 220px;
-  color: #92869c
+  color: #92869c;
 }
 header {
   font-size: 20pt;
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
index d1f766386e..01a99bd647 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
@@ -8,8 +8,7 @@ dashedName: build-a-tribute-page
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>. **Do not copy this demo project**.
-
+**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>. **请勿复制此演示项目**。
 
 **用户需求:**
 
@@ -32,111 +31,125 @@ dashedName: build-a-tribute-page
 你应该有一个 `main` 元素且该元素的 `id` 为 `main`.
 
 ```js
-const el = document.getElementById('main')
-assert(!!el && el.tagName === 'MAIN')
+const el = document.getElementById('main');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'MAIN');
 ```
 
 你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 应该是 `#main` 的子元素。
 
 ```js
-const el1 = document.querySelector('#main #img-div')
-const el2 = document.querySelector('#main #image')
-const el3 = document.querySelector('#main #img-caption')
-const el4 = document.querySelector('#main #tribute-info')
-const el5 = document.querySelector('#main #tribute-link')
-assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+const el1 = document.querySelector('#main #img-div');
+const el2 = document.querySelector('#main #image');
+const el3 = document.querySelector('#main #img-caption');
+const el4 = document.querySelector('#main #tribute-info');
+const el5 = document.querySelector('#main #tribute-link');
+assert.isNotNull(el1);
+assert.isNotNull(el2);
+assert.isNotNull(el3);
+assert.isNotNull(el4);
+assert.isNotNull(el5);
 ```
 
 你应该有一个`id`为`title`的元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el)
+const el = document.getElementById('title');
+assert.isNotNull(el);
 ```
 
 id为 `#title` 的元素不应为空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText, 0);
 ```
 
 你应该有一个 `id` 为 `img-div` 的 `figure` 或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-div')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+const el = document.getElementById('img-div');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGURE');
 ```
 
 你应该有一个 `id` 为 `image` 的 `img` 元素。
 
 ```js
-const el = document.getElementById('image')
-assert(!!el && el.tagName === 'IMG')
+const el = document.getElementById('image');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'IMG');
 ```
 
 你的 `#image` 元素应该是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #image')
-assert(!!el)
+const el = document.querySelector('#img-div #image');
+assert.isNotNull(el);
 ```
 
 你应该有一个 `id` 为 `img-caption` 的 `figcaption` 元素或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGCAPTION');
 ```
 
 你的 `#img-caption` 元素应该是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #img-caption')
-assert(!!el)
+const el = document.querySelector('#img-div #img-caption');
+assert.isNotNull(el);
 ```
 
 id为 `#img-caption` 的元素不应为空。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你应该有一个 `id` 为 `tribute-info` 的元素。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
 ```
 
 id为 `#tribute-info` 的元素不应为空。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你应该有一个 `id` 为 `tribute-link` 的 `a` 元素。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.tagName === 'A')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 id为 `#tribute-link` 的元素的 `href` 属性应该有值。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && !!el.href && el.href.length > 0)
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.isNotNull(el.href);
+assert.isNotEmpty(el.href);
 ```
 
 id为 `#tribute-link` 的元素的 `target` 属性应该设置为 `_blank`。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.target === '_blank')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 `img` 元素应该有 `display` 样式且值应为 `block`。
@@ -144,8 +157,8 @@ assert(!!el && el.target === '_blank')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('display')
-assert(style === 'block')
+const style = imgStyle?.getPropertyValue('display');
+assert.strictEqual(style, 'block');
 ```
 
 id为 `#image` 的元素应该有 `max-width` 样式且值为 `100%`。
@@ -153,8 +166,8 @@ id为 `#image` 的元素应该有 `max-width` 样式且值为 `100%`。
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('max-width')
-assert(style === '100%')
+const style = imgStyle?.getPropertyValue('max-width');
+assert.strictEqual(style, '100%');
 ```
 
 id为 `#image` 的元素的 `height` 样式值应为 `auto`。
@@ -166,9 +179,9 @@ const imgStyle = window.getComputedStyle(img);
 const oldDisplayValue = imgStyle.getPropertyValue('display');
 const oldDisplayPriority = imgStyle.getPropertyPriority('display');
 img?.style.setProperty('display', 'none', 'important');
-const heightValue = imgStyle?.getPropertyValue('height')
+const heightValue = imgStyle?.getPropertyValue('height');
 img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
-assert(heightValue === 'auto')
+assert.strictEqual(heightValue, 'auto');
 ```
 
 id为 `#image` 的元素应该在其父元素内居中。
@@ -183,7 +196,8 @@ const img = document.getElementById('image'),
   parentRight = imgParent?.getBoundingClientRect().right,
   leftMargin = imgLeft - parentLeft,
   rightMargin = parentRight - imgRight;
-assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+assert.isBelow(leftMargin - rightMargin, 6);
+assert.isBelow(rightMargin - leftMargin, 6);
 ```
 
 # --seed--
@@ -208,12 +222,10 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
     <link
       href="https://fonts.googleapis.com/css?family=Pacifico"
       rel="stylesheet"
-
     />
     <link
       href="https://fonts.googleapis.com/css?family=Lobster"
       rel="stylesheet"
-
     />
     <link href="styles.css" rel="stylesheet" />
     <title>Tribute Page</title>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
index 2c185975a7..bf8967cc15 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
+在 `header` 中，通过嵌套一个 `img`、`h1` 和 `nav` 元素来提供有关页面的上下文。
 
 `img` 标签应该指向 `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`，`id` 属性值为 `logo`，`alt` 文本为 `freeCodeCamp`。
 
@@ -57,7 +57,7 @@ assert.equal(document.querySelector('img')?.id, 'logo');
 assert.equal(document.querySelector('img')?.alt, 'freeCodeCamp');
 ```
 
-You should give the `h1` element the text `HTML/CSS Quiz`.
+你应该将 `h1` 元素的文本设置为 `HTML/CSS Quiz`。
 
 ```js
 assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
index a835ab6905..f6e449f195 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
@@ -9,7 +9,7 @@ dashedName: step-8
 
 A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
 
-Currently, the `img` is assuming its default size, which is too large. CSS has a `max` function which returns the largest of a set of comma-separated values. 例如：
+`img` 当前是默认尺寸，这个尺寸太大。 CSS 提供了一个 `max` 函数，它返回一组由逗号分隔的值中最大的值。 例如：
 
 ```css
 img {
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
index e864b1363e..22b2a71571 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
@@ -1,6 +1,6 @@
 ---
 id: 614202874ca576084fca625f
-title: Step 16
+title: 步骤 16
 challengeType: 0
 dashedName: step-16
 ---
@@ -9,83 +9,83 @@ dashedName: step-16
 
 Every `region` role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the `aria-labelledby` attribute.
 
-Add the following `aria-labelledby` attributes to the `section` elements:
+给 `section` 元素添加以下 `aria-labelledby` 属性：
 
 - `student-info`
 - `html-questions`
 - `css-questions`
 
-Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
+然后，在每个 `section` 元素中，嵌套一个 `h2` 元素，其 `id` 与相应的 `aria-labelledby` 属性匹配。 给每个 `h2` 添加适当的文本内容。
 
 # --hints--
 
-You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
+你应该给第一个 `section` 元素添加值为 `student-info` 的 `aria-labelledby` 属性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
 ```
 
-You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
+你应该给第二个 `section` 元素添加值为 `html-questions` 的 `aria-labelledby` 属性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
 ```
 
-You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
+你应该给第三个 `section` 元素添加值为 `css-questions` 的 `aria-labelledby` 属性。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
 ```
 
-You should nest one `h2` element within the first `section` element.
+你应该在第一个 `section` 元素中嵌套一个 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should nest one `h2` element within the second `section` element.
+你应该在第二个 `section` 元素中嵌套一个 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should nest one `h2` element within the third `section` element.
+你应该在第三个 `section` 元素中嵌套一个 `h2` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
 ```
 
-You should give the first `h2` element an `id` attribute of `student-info`.
+你应该给第一个 `h2` 元素添加 `id` 为 `student-info`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
 ```
 
-You should give the second `h2` element an `id` attribute of `html-questions`.
+你应该给第二个 `h2` 元素添加 `id` 为 `html-questions`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
 ```
 
-You should give the third `h2` element an `id` attribute of `css-questions`.
+你应该给第三个 `h2` 元素添加 `id` 为 `css-questions`。
 
 ```js
 assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
 ```
 
-You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
+你应该给第一个 `h2` 元素添加适当的文本内容。 _提示：我会使用 `Student Info`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
 ```
 
-You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
+你应该给第二个 `h2` 元素添加适当的文本内容。 _提示：我会使用 `HTML`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
 ```
 
-You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
+你应该给第三个 `h2` 元素添加适当的文本内容。 _提示：我会使用 `CSS`_
 
 ```js
 assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
index ff481ec83a..fb8360bdb3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
@@ -7,7 +7,7 @@ dashedName: step-24
 
 # --description--
 
-The question numbers are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the element, is to add text only a screen reader can read.
+The question numbers are not descriptive enough. 对于视力受损的用户来说尤其如此。 解决这个问题的方法之一是在元素中添加只有屏幕阅读器才能读取的文本，而无需在元素中添加可见文本。
 
 为每个 `h3` 元素添加一个 `class` 为 `sr-only` 的 `span` 元素。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index b893c8f2b2..0f499d5cfd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -9,117 +9,117 @@ dashedName: step-32
 
 Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text.
 
-The text should either be `True` or `False`.
+文本应为 `True` 或 `False`。
 
 # --hints--
 
-You should give the first `label` element text content.
+你应该给第一个 `label` 元素添加文本内容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
 ```
 
-You should give the second `label` element text content.
+你应该给第二个 `label` 元素添加文本内容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
 ```
 
-You should give the third `label` element text content.
+你应该给第三个 `label` 元素添加文本内容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
 ```
 
-You should give the fourth `label` element text content.
+你应该给第四个 `label` 元素添加文本内容。
 
 ```js
 assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
 ```
 
-You should place the first `label` text content after the `input` element.
+你应该将第一个 `label` 文本内容放在 `input` 元素之后。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the second `label` text content after the `input` element.
+你应该将第二个 `label` 文本内容放在 `input` 元素之后。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the third `label` text content after the `input` element.
+你应该将第三个 `label` 文本内容放在 `input` 元素之后。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should place the fourth `label` text content after the `input` element.
+你应该将第四个 `label` 文本内容放在 `input` 元素之后。
 
 ```js
 assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
 ```
 
-You should give the first `label` the text `True` or `False`.
+你应该给第一个 `label` 添加文本 `True` 或 `False`。
 
 ```js
 assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
 ```
 
-You should give the second `label` the text `True`.
+你应该给第二个`label` 添加文本 `True`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(0) === 'False' ? l(1) === 'True' : true);
 ```
 
-You should give the second `label` the text `False`.
+你应该给第二个`label` 添加文本 `False`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(0) === 'True' ? l(1) === 'False' : true);
 ```
 
-You should give the third `label` the text `True` or `False`.
+你应该给第三个 `label` 添加文本 `True` 或 `False`。
 
 ```js
 assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
 ```
 
-You should give the fourth `label` the text `True`.
+你应该给第四个`label` 添加文本 `True`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(2) === 'False' ? l(3) === 'True' : true);
 ```
 
-You should give the fourth `label` the text `False`.
+你应该给第四个`label` 添加文本 `False`。
 
 ```js
 const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
 assert(l(2) === 'True' ? l(3) === 'False' : true);
 ```
 
-You should give the first `input` a `value` matching the `label` text content.
+你应该给第一个 `input` 添加一个与 `label` 文本内容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
 ```
 
-You should give the second `input` a `value` matching the `label` text content.
+你应该给第二个 `input` 添加一个与 `label` 文本内容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
 ```
 
-You should give the third `input` a `value` matching the `label` text content.
+你应该给第三个 `input` 添加一个与 `label` 文本内容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
 ```
 
-You should give the fourth `input` a `value` matching the `label` text content.
+你应该给第四个 `input` 添加一个与 `label` 文本内容匹配的 `value`。
 
 ```js
 assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
index 07d1719675..a7fd9da75c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -7,7 +7,7 @@ dashedName: step-45
 
 # --description--
 
-Back to styling the page. Select the list elements within the navigation bar, and give them the following styles:
+继续为页面添加样式。 选择导航栏中的列表元素，并给它们添加下面的样式：
 
 ```css
 color: #dfdfe2;
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
index 019ae29abb..444404ee37 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -1,6 +1,6 @@
 ---
 id: 614796cb8086be482d60e0ac
-title: Step 46
+title: 步骤 46
 challengeType: 0
 dashedName: step-46
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
index 8b1535e90e..1acb78f654 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -1,6 +1,6 @@
 ---
 id: 614878f7a412310647873015
-title: Step 48
+title: 步骤 48
 challengeType: 0
 dashedName: step-48
 ---
@@ -9,29 +9,29 @@ dashedName: step-48
 
 Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them.
 
-Then, fix the `header` to the top of the viewport.
+然后，将 `header` 固定到视口的顶部。
 
 # --hints--
 
-You should give the `header` a `justify-content` of `space-between`.
+你应该给 `header` 添加 `justify-content` 值为 `space-between`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
 ```
 
-You should give the `header` an `align-items` of `center`.
+你应该给 `header` 添加 `align-items` 值为 `center`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
 ```
 
-You should give the `header` a `position` of `fixed`.
+你应该给 `header` 添加 `position` 值为 `fixed`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
 ```
 
-You should give the `header` a `top` of `0`.
+你应该给 `header` 添加 `top` 值为 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
index 54550b4156..e22f200123 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -1,6 +1,6 @@
 ---
 id: 614883b6fa720e09fb167de9
-title: Step 53
+title: 步骤 53
 challengeType: 0
 dashedName: step-53
 ---
@@ -11,31 +11,31 @@ Add padding to the top and left of the `.info` elements, and set the other value
 
 # --hints--
 
-You should use the `.info` selector.
+你应该使用 `.info` 选择器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
 ```
 
-You should give `.info` a `padding-top` of at least `1px`.
+你应该给 `.info` 添加 `padding-top` 值至少为 `1px`。
 
 ```js
 assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
 ```
 
-You should give `.info` a `padding-right` of `0`.
+你应该给 `.info` 添加 `padding-right` 值为 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
 ```
 
-You should give `.info` a `padding-bottom` of `0`.
+你应该给 `.info` 添加 `padding-bottom` 值为 `0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
 ```
 
-You should give `.info` a `padding-left` of at least `1px`.
+你应该给 `.info` 添加 `padding-left` 值至少为 `1px`。
 
 ```js
 assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
index c60a777f43..30b79621ed 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -1,6 +1,6 @@
 ---
 id: 6148dfab9b54c110577de165
-title: Step 62
+title: 步骤 62
 challengeType: 0
 dashedName: step-62
 ---
@@ -21,31 +21,31 @@ border: 3px solid #3b3b4f;
 
 # --hints--
 
-You should use the `button` element selector.
+你应该使用 `button` 元素选择器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
 ```
 
-You should give `button` a `display` of `block`.
+你应该给 `button` 添加 `display` 值为 `block`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
 ```
 
-You should give `button` a `margin` of `40px auto`.
+你应该给 `button` 添加 `margin` 值为 `40px auto`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
 ```
 
-You should give `button` a `width` of `40%`.
+你应该给 `button` 添加 `width` 值为 `40%`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
 ```
 
-You should give `button` a `padding` of `15px`.
+你应该给 `button` 添加 `padding` 值为 `15px`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
@@ -57,13 +57,13 @@ You should give `button` a `font-size` of `1.438rem`.
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '1.438rem');
 ```
 
-You should give `button` a `background` of `#d0d0d5`.
+你应该给 `button` 添加 `background` 值为 `#d0d0d5`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)');
 ```
 
-You should give `button` a `border` of `3px solid #3b3b4f`.
+你应该给 `button` 添加 `border` 值为 `3px solid #3b3b4f`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
index f297018271..80dc543e7c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -11,31 +11,31 @@ To let visitors know the cafe was founded in 2020, add a `p` element below the `
 
 # --hints--
 
-You should have an opening `<p>` tag.
+你应该有一个 `<p>` 开始标签。
 
 ```js
 assert(code.match(/<p>/i));
 ```
 
-You should have a closing `</p>` tag.
+你应该有一个 `</p>` 结束标签。
 
 ```js
 assert(code.match(/<\/p>/i));
 ```
 
-You should not change your existing `h1` element. Make sure you did not delete the closing tag.
+你不应该改变你现有的 `h1` 元素。 确认你没有删除结束标签。
 
 ```js
 assert.lengthOf(document.querySelectorAll('h1'),1);
 ```
 
-Your `p` element should be below your `h1` element.
+你的 `p` 元素应该在 `h1` 元素的下面。
 
 ```js
 assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'H1');
 ```
 
-Your `p` element should have the text `Est. 2020`.
+你的 `p` 元素应该有文本 `Est. 2020`。
 
 ```js
 assert(document.querySelector("p").innerText === "Est. 2020");
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
index 6d62eb9e33..23a11f866f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -1,29 +1,29 @@
 ---
 id: 5f344fad8bf01691e71a30eb
-title: Step 10
+title: 步骤 10
 challengeType: 0
 dashedName: step-10
 ---
 
 # --description--
 
-Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element.
+到目前为止，在你创建的内容的演示和外观方面，你一直受到限制。 To start taking control, add a `style` element within the `head` element.
 
 # --hints--
 
-Your code should have an opening `<style>` tag.
+你应该有一个 `<style>` 开始标签。
 
 ```js
 assert(code.match(/<style\s*>/i));
 ```
 
-Your code should have a closing `</style>` tag.
+你应该有一个 `</style>` 结束标签。
 
 ```js
 assert(code.match(/<\/style\s*>/));
 ```
 
-Your `style` element should be nested in your `head` element.
+你的 `style` 元素都应嵌套在 `head` 元素中。
 
 ```js
 assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
index da68438a6d..5b2c76be70 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -32,7 +32,7 @@ const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.
 assert(hasBackground)
 ```
 
-Your `body` element should have the coffee beans background image.
+你的 `body` 元素应该有咖啡豆的背景图片。
 
 ```js
 const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
index b7e91ba457..c07976f16b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -7,7 +7,7 @@ dashedName: step-38
 
 # --description--
 
-That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each.
+更接近了，但是价格没有保持在右边。 这是由于 `inline-block` 元素只会占用其内容的宽度。 为了将它们展开，请向 `flavor` 和 `price` 类选择器添加 `width` 属性，每个属性的值均为 `50%`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
index 2841b825d0..b9bb15c113 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -7,7 +7,7 @@ dashedName: step-32
 
 # --description--
 
-The flavors and prices are currently stacked on top of each other and centered with their respective `p` elements. It would be nice if the flavor was on the left and the price was on the right.
+风味和价格目前堆叠在一起，并以各自的 `p` 元素居中。 如果风味在左，价格在右，那就好看多了。
 
 给 `French Vanilla` `p` 元素添加 `flavor` class。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
index 40f5fb4cc8..c011a8856e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade99dda4e6071a85dfd
-title: Step 46
+title: 步骤 46
 challengeType: 0
 dashedName: step-46
 ---
@@ -11,19 +11,19 @@ You will come back to styling the menu in a few steps, but for now, go ahead and
 
 # --hints--
 
-You should have an opening `section` tag.
+你应该有一个 `section` 开始标签。
 
 ```js
 assert.lengthOf(code.match(/<section>/ig) ,2);
 ```
 
-You should have a closing `section` tag.
+你应该有一个 `section` 结束标签。
 
 ```js
 assert.lengthOf(code.match(/<\/section>/ig) ,2);
 ```
 
-You should not change the existing `main` element.
+你不应该改变你现有的 `main` 元素。
 
 ```js
 assert.lengthOf (document.querySelectorAll('main'), 1);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
index be70509ebe..8f443ff8ae 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -7,13 +7,13 @@ dashedName: step-66
 
 # --description--
 
-You can use an `hr` element to display a divider between sections of different content.
+你可以使用 `hr` 元素在不同内容的部分之间显示一个分隔符。
 
 首先，在具有 `established` 类的 `p` 元素和第一个 `section` 元素之间添加一个 `hr` 元素。
 
 # --hints--
 
-You should add an `hr` element.
+你应该添加一个 `hr` 元素。
 
 ```js
 assert.match(code, /<hr\s?\/?>/i);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
index 7da6878026..fedc5928ea 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -7,7 +7,7 @@ dashedName: step-56
 
 # --description--
 
-The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices.
+菜单的当前宽度将总是占到 `body` 元素宽度的80%。 在一个非常宽的屏幕上，咖啡和甜点看起来与它们的价格相差甚远。
 
 给 `menu` 类添加一个 `max-width` 的属性，其值为 `500px`，以防止它变得太宽。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
index add80c69ee..8d7f62b806 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -7,7 +7,7 @@ dashedName: step-54
 
 # --description--
 
-That looks better. Now try to add the same `20px` padding to the top and bottom of the menu.
+这看起来更好。 现在尝试在菜单的顶部和底部添加相同的 `20px` 填充。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
index 47b7916bf7..544a71f3e7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -13,21 +13,21 @@ It is a bit boring for all the text to have the same `font-family`. You can stil
 
 # --hints--
 
-You should use an `h1, h2` selector.
+你应该使用 `h1, h2` 选择器。
 
 ```js
 const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
 assert(h1h2Selector);
 ```
 
-You should set the `font-family` to `Impact`.
+你应该把 `font-family` 设置为 `Impact`。
 
 ```js
 const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact');
 assert(hasFontFamily);
 ```
 
-Your `h1` element should have a `font-family` of `Impact`.
+你的 `h1` 元素应该有一个 `Impact` 的 `font-family`。
 
 ```js
 const h1Element = document.querySelector("h1"); 
@@ -36,7 +36,7 @@ const headingFont = window.getComputedStyle(h1Element)?.getPropertyValue('font-f
 assert.match(headingFont,/impact/i);
 ```
 
-Your `h2` element should have a `font-family` of `Impact`.
+你的 `h2` 元素应该有一个 `Impact` 的 `font-family`。
 
 ```js
 const h2Element = document.querySelector("h2"); 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
index b64bbc0933..0049036376 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
@@ -1,40 +1,40 @@
 ---
 id: 5f3ef6e0f8c230bdd2349716
-title: Step 62
+title: 步骤 62
 challengeType: 0
 dashedName: step-62
 ---
 
 # --description--
 
-The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers.
+标题元素（如 `h1`、`h2`）的排版是由用户浏览器的默认值设置的。
 
-Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`.
+添加两个新的类型选择器（`h1` 和 `h2`）。 对两者都使用 `font-size` 属性，但对 `h1` 使用 `40px`，对 `h2` 使用 `30px` 的值。
 
 # --hints--
 
-You should use an `h1` selector.
+你应该使用 `h1` 选择器。
 
 ```js
 const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
 assert(hasH1);
 ```
 
-You should use an `h2` selector.
+你应该使用 `h2` 选择器。
 
 ```js
 const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
 assert(hasH2);
 ```
 
-Your `h1` element should have a `font-size` of `40px`.
+你的 `h1` 元素应该有一个 `40px` 的 `font-size`。
 
 ```js
 const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
 assert(h1FontSize === '40px');
 ```
 
-Your `h2` element should have a `font-size` of `30px`.
+你的 `h2` 元素应该有一个 `30px` 的 `font-size`。
 
 ```js
 const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
index fa5993fab0..739f7b8371 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
@@ -7,7 +7,7 @@ dashedName: step-86
 
 # --description--
 
-Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
+现在顶部的间隔看起来很好。 The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element.
 
 要减少地址 `p` 元素下方的默认 margin 空间，请创建一个名为 `address` 的 class 选择器，并为 `margin-bottom` 属性设置值 `5px`。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
index 0dfb88f527..565008f6fd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f4701b942c824109626c3d8
-title: Step 76
+title: 步骤 76
 challengeType: 0
 dashedName: step-76
 ---
@@ -11,13 +11,13 @@ Now add the `bottom-line` class to the second `hr` element so the styling is app
 
 # --hints--
 
-You should add the `class` attribute with the value `bottom-line`.
+你应该添加具有 `bottom-line` 值的 `class` 属性。
 
 ```js
 assert.match(code,/class=('|")bottom-line\1/i);
 ```
 
-Your `bottom-line` class should be applied to your second `hr` element.
+你的 `bottom-line` 类应该应用于你的第二个 `hr` 元素。
 
 ```js
 const hrList = document.querySelectorAll("hr"); 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
index 1d2cc83d12..4e8adace3a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -7,7 +7,7 @@ dashedName: step-34
 
 # --description--
 
-Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text.
+接着，你想要将价格（price）右对齐。 Add a class named `price` to your `p` element that has `3.00` as its text.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
index 741ac82bb8..9fad20baeb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
@@ -11,25 +11,25 @@ Create a selector for your `.wheel` element. Start by setting the `border` to `2
 
 # --hints--
 
-You should have a `.wheel` selector.
+你应该有一个 `.wheel` 选择器。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
 ```
 
-Your `.wheel` selector should have a `border` property set to `2px solid black`.
+你的 `.wheel` 选择器应该有一个 `border` 属性设置为 `2px solid black`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
 ```
 
-Your `.wheel` selector should have a `border-radius` property set to `50%`.
+你的 `.wheel` 选择器应该将 `border-radius` 属性设置为 `50%`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
 ```
 
-Your `.wheel` selector should have a `margin-left` property set to `50px`.
+你的 `.wheel` 选择器应该有一个 `margin-left` 属性设置为 `50px`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
index c7cc4432ee..b5df73162e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
@@ -1,6 +1,6 @@
 ---
 id: 617ace7d831f9c16a569b38a
-title: Step 5
+title: 步骤 5
 challengeType: 0
 dashedName: step-5
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
index aafa3ed834..4d3d83a4de 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
@@ -1,6 +1,6 @@
 ---
 id: 616d47bc9eedc4bc7f621bec
-title: Step 10
+title: 步骤 10
 challengeType: 0
 dashedName: step-10
 ---
@@ -11,25 +11,25 @@ Next, within the `div` element, add another `div` element and give it a class of
 
 # --hints--
 
-Your new `div` element should have an opening tag.
+你的新 `div` 元素应该有一个开始标签。
 
 ```js
 assert([...code.matchAll(/<div.*?>/gi)][1]);
 ```
 
-Your new `div` element should have a closing tag.
+你的新 `div` 元素应该有一个结束标签。
 
 ```js
 assert([...code.matchAll(/<\/div\s*>/gi)][1]);
 ```
 
-You should nest your new `div` element within the `div` with the class `container`.
+你应该使用类 `container` 将新的 `div` 元素嵌套在 `div` 中。
 
 ```js
 assert(document.querySelector('.container')?.children[0]?.localName === 'div');
 ```
 
-You should give your new `div` element a class of `marker`.
+你应该给你的新 `div` 元素一个 `marker` 类。
 
 ```js
 const containerChildren = [...document.querySelector('.container')?.children];
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
index a700b99247..a90598652a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
@@ -1,6 +1,6 @@
 ---
 id: 61764f7e5240eb7ccc7f6a0a
-title: Step 18
+title: 步骤 18
 challengeType: 0
 dashedName: step-18
 ---
@@ -11,13 +11,13 @@ Then, create a new CSS rule that targets the class `one` and set its `background
 
 # --hints--
 
-You should use a class selector to target the class `one`.
+你应该使用类选择器来定位类 `one`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one'));
 ```
 
-Your `.one` CSS rule should have a `background-color` property set to `red`.
+你的 `.one` CSS 规则应该将 `background-color` 属性设置为 `red`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
index 809eb2c4fc..470dc942d1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
@@ -9,7 +9,7 @@ dashedName: step-21
 
 There are two main color models: the <dfn>additive</dfn> RGB (red, green, blue) model used in electronic devices, and the <dfn>subtractive</dfn> CMYK (cyan, magenta, yellow, black) model used in print.
 
-In this project, you'll work with the RGB model. This means that colors begin as black, and change as different levels of red, green, and blue are introduced. An easy way to see this is with the CSS `rgb` function.
+在这个项目中，将使用 RGB 模型。 这意味着颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化。 一个简单的方法是使用 CSS `rgb` 函数。
 
 Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`.
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
index 84064621aa..65e9559ebb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
@@ -13,9 +13,9 @@ A function is a piece of code that can take an input and perform a specific acti
 rgb(red, green, blue);
 ```
 
-Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color.
+Each red, green, and blue value is a number from `0` to `255`. `0` 表示该颜色的 0%，并且是黑色。 `255` 意味着该颜色的 100%。
 
-In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`.
+在 `.one` 的CSS规则中，修改 `rgb` 函数中的 `red`的值。 对于 `rgb` 函数，将红色的值设置为 `255`，将绿色的值设置为 `0`，将蓝色的值设置为 `0`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
index 1798faa04c..5ffbe412d5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
@@ -1,6 +1,6 @@
 ---
 id: 617bb5624a75e86463b7e638
-title: Step 28
+title: 步骤 28
 challengeType: 0
 dashedName: step-28
 ---
@@ -9,11 +9,11 @@ dashedName: step-28
 
 <dfn>Secondary colors</dfn> are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values.
 
-To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green.
+要创建第一个间色，黄色，请在 `.one` CSS 规则中更新 `rgb` 函数，以组合纯红色和纯绿色。
 
 # --hints--
 
-Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`.
+你的 `.one` CSS 规则应该有一个 `background-color` 属性设置为 `rgb(255, 255, 0)`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
index 13d5d20368..e54eac56a8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
@@ -11,7 +11,7 @@ And in the `h1` CSS rule, remove the `background-color` property and value to go
 
 # --hints--
 
-Your `h1` CSS rule should not have a `background-color` property or value.
+你的 `h1` CSS 规则不应具有 `background-color` 属性或值。
 
 ```js
 const backgroundColorInstances = code.match(/background-color:.*;/gi);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
index 40896f1ea4..191419f2f2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
@@ -7,7 +7,7 @@ dashedName: step-71
 
 # --description--
 
-Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`.
+创建一个定位 `sleeve` 类的新 CSS 规则。 Set the `width` property to `110px`, and the `height` property to `25px`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
index abe6ce28aa..b65f3d6232 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
@@ -1,6 +1,6 @@
 ---
 id: 61b092eb9e7fc020b43b1bb2
-title: Step 72
+title: 步骤 72
 challengeType: 0
 dashedName: step-72
 ---
@@ -9,7 +9,7 @@ dashedName: step-72
 
 To make the marker look more realistic, give the sleeve a transparent white color.
 
-First, set the sleeve element's `background-color` to `white`.
+首先，将笔筒元素的 `background-color` 设置为 `white`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
index c3168768e8..d6fa3bc72d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
@@ -1,13 +1,13 @@
 ---
 id: 61b09f739aa6572d2064f9b8
-title: Step 84
+title: 步骤 84
 challengeType: 0
 dashedName: step-84
 ---
 
 # --description--
 
-The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border.
+The black color of your border looks pretty harsh against the more transparent sleeve. 你可以使用 Alpha 通道来降低黑色边框的不透明度。
 
 For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity.
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
index 71a23a1684..fe07edc653 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
@@ -9,11 +9,11 @@ dashedName: step-85
 
 太棒了。 Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers.
 
-Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers.
+为绿色和蓝色彩笔添加笔盖和笔筒。 你只需从红色笔中复制 `div` 元素，并将其粘贴到其他两支笔中。
 
 # --hints--
 
-Your green marker `div` should contain two `div` elements.
+你的绿色笔 `div` 应该包含两个 `div` 元素。
 
 ```js
 const greenMarkerChildren = [...document.querySelector('.green')?.children];
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
index 1cc0c1b359..d3160e381a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
@@ -1,6 +1,6 @@
 ---
 id: 61b3183655ec10efd8c0bb07
-title: Step 92
+title: 步骤 92
 challengeType: 0
 dashedName: step-92
 ---
@@ -9,17 +9,17 @@ dashedName: step-92
 
 The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors.
 
-In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now.
+在 `.green` 和 `.blue` CSS 规则中，更新 `box-shadow` 属性的值，使 `offsetX` 为`0`，`offsetY` 为 `0`，`blurRadius` 为 `20px`，`spreadRadius` 为 `0`。 将颜色保留为 `green` 和 `blue`。
 
 # --hints--
 
-Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`.
+你的 `.green` CSS 规则应该有一个 `box-shadow` 简写属性，其值为 `0 0 20px 0 green`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
 ```
 
-Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`.
+你的 `.blue` CSS 规则应该有一个 `box-shadow` 简写属性，并且其值为 `0 0 20px 0 blue`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
index c154229ceb..387153eacc 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -11,62 +11,62 @@ Next, give each `img` a `src` attribute according to its order in the document.
 
 # --hints--
 
-All nine of your `img` elements should have a `src` attribute.
+九个 `img` 元素都应该具有 `src` 属性。
 
 ```js
 const images = [...document.querySelectorAll('img')];
 assert(images.every(image => image.getAttribute('src')));
 ```
 
-Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
+第一个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
 ```
 
-Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
+第二个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
 ```
 
-Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
+第三个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
 ```
 
-Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
+第四个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
 ```
 
-Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
+第五个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
 ```
 
-Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
+第六个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
 ```
 
-Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
+第七个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
 ```
 
-Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
+第八个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
 ```
 
-Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
+第九个 `img` 元素的 `src` 属性的值应该设置为 `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`。
 
 ```js
 assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
index ec7852294b..17de0cb6f6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
@@ -1,6 +1,6 @@
 ---
 id: 6153893900438b4643590367
-title: Step 13
+title: 步骤 13
 challengeType: 0
 dashedName: step-13
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
index c1857ab186..e7bf57ce57 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -1,6 +1,6 @@
 ---
 id: 6153938dce8b294ff8f5a4e9
-title: Step 17
+title: 步骤 17
 challengeType: 0
 dashedName: step-17
 ---
@@ -9,7 +9,7 @@ dashedName: step-17
 
 The `justify-content` property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.
 
-Give your `.gallery` selector a `justify-content` property with `center` as the value.
+将 `.gallery` 选择器的 `justify-content` 属性设置为 `center`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
index 916aca0b17..cafd4bdde9 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
@@ -1,6 +1,6 @@
 ---
 id: 6143a778bffc206ac6b1dbe3
-title: Step 17
+title: 步骤 17
 challengeType: 0
 dashedName: step-17
 ---
@@ -15,13 +15,13 @@ Instead of a series of coding challenges, people will be in their code editor pa
 
 # --hints--
 
-You should add a sixth `p` element to the `.text` element.
+你应该将第六个 `p` 元素添加到 `.text` 元素。
 
 ```js
 assert(document.querySelectorAll('.text p')?.length === 7)
 ```
 
-Your sixth `p` element should have the provided text.
+你的第六个 `p` 元素应该包含提供的文本。
 
 ```js
 assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.')
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
index ae7cc74576..7c73e765e6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
@@ -11,13 +11,13 @@ Create an `h1` selector, and set the `font-family` property to `Anton` with the
 
 # --hints--
 
-You should have an `h1` selector.
+应该有一个 `h1` 选择器。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('h1'));
 ```
 
-Your `h1` selector should have a `font-family` property set to `Anton` with the fallback of `sans-serif`.
+你的 `h1` 选择器应该有一个 `font-family` 属性设置为 `Anton`，并使用 `sans-serif` 作为备用字体。
 
 ```js
 const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily;
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
index 5344cdbce7..1419a5e9bd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
@@ -1,6 +1,6 @@
 ---
 id: 6148d94fdf6a5d6899f8ff15
-title: Step 67
+title: 步骤 67
 challengeType: 0
 dashedName: step-67
 ---
@@ -11,7 +11,7 @@ Give the `.text-with-images` selector a `margin-bottom` property set to `3rem`.
 
 # --hints--
 
-Your `.text-with-images` selector should have a `margin-bottom` property set to `3rem`.
+你的 `.text-with-images` 选择器应该有一个 `margin-bottom` 属性，设置为 `3rem`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
index 125986fa42..d833ab559c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
@@ -9,11 +9,11 @@ dashedName: step-6
 
 Your image currently takes up a lot of space. To better see what you are working on, add a `width` attribute to the `img` element, with a value of `400`.
 
-You will remove this later on when you have worked on the CSS.
+稍后当你处理 CSS 时，你将删除它。
 
 # --hints--
 
-Your `img` element should have a `width` attribute set to `400`.
+你的 `img` 元素应该有一个 `width` 属性值为 `400`。
 
 ```js
 assert(document.querySelector('img')?.getAttribute('width') === '400');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
index 39d2becaa7..e58f227f96 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
@@ -1,6 +1,6 @@
 ---
 id: 6199429802b7c10dc79ff871
-title: Step 35
+title: 步骤 35
 challengeType: 0
 dashedName: step-35
 ---
@@ -11,19 +11,19 @@ Position the `.penguin-head` element `10%` from the top, and `25%` from the left
 
 # --hints--
 
-You should give `.penguin-head` a `top` property.
+应该设置 `.penguin-head` 的 `top` 属性。
 
 ```js
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
 ```
 
-You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+应该设置 `.penguin-head` 的 `top` 值为 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
 ```
 
-You should give `.penguin-head` a `left` property.
+应该设置 `.penguin-head` 的 `left` 属性。
 
 ```js
 assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
index 3330318260..3da96e5911 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
@@ -11,43 +11,43 @@ Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `backgr
 
 # --hints--
 
-You should use the `.face` selector.
+你应该使用 `.face` 选择器。
 
 ```js
 assert.match(code, /\.face\s*\{/);
 ```
 
-You should give `.face` a `width` property.
+你应该给 `.face` 元素一个 `width` 属性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
 ```
 
-You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+你应该给 `.face` 一个 `width` 为 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
 ```
 
-You should give `.face` a `height` property.
+你应该给 `.face` 元素一个 `height` 属性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
 ```
 
-You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+你应该给 `.face` 一个 `height` 为 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
 ```
 
-You should give `.face` a `background-color` property.
+你应该给 `.face` 元素一个 `background-color` 属性。
 
 ```js
 assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
 ```
 
-You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+你应该给 `.face` 一个 `background-color` 为 `--fcc-expected--`，而不是 `--fcc-actual--`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
index ca096090f1..8d838ac7f5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
@@ -7,7 +7,7 @@ dashedName: step-54
 
 # --description--
 
-So far, the `.face` and `.chin` elements have the same `background-color`.
+到目前为止，`.face` 和 `.chin` 具有相同的 `background-color`。
 
 Create a custom CSS property called `--penguin-face`, and set it to `white`.
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
index e650139f7e..e194b6b32d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -1,6 +1,6 @@
 ---
 id: 619d1e7a8e81a61c5a819dc4
-title: Step 78
+title: 步骤 78
 challengeType: 0
 dashedName: step-78
 ---
@@ -11,7 +11,7 @@ For the shirt's final touch, set the `color` to `#6a6969`.
 
 # --hints--
 
-You should give `.shirt` a `color` of `#6a6969`.
+你应该将 `.shirt` 的 `color` 设置为 `#6a6969`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
index ac97b33ea2..90025271f0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
@@ -1,6 +1,6 @@
 ---
 id: 619d333b738e3c2b5d58b095
-title: Step 98
+title: 步骤 98
 challengeType: 0
 dashedName: step-98
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
index 2d4a8b2c94..2ea0405e63 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
@@ -1,41 +1,41 @@
 ---
 id: 5d822fd413a79914d39e98ca
-title: Step 2
+title: 步骤 2
 challengeType: 0
 dashedName: step-2
 ---
 
 # --description--
 
-Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. Be sure to set the language to English.
+在 `DOCTYPE` 下方添加开始和结束 `html` 标签，以便你可以开始放置一些代码。 确保将语言设置为英语。
 
 # --hints--
 
-Your `DOCTYPE` declaration should be at the beginning of your HTML.
+`DOCTYPE` 声明应位于 HTML 的开头。
 
 ```js
 assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
 ```
 
-Your `html` element should have an opening tag, and `lang` attribute with value of `en`.
+`html` 元素应该有一个开始标签，`lang` 属性的值应该为 `en`。
 
 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
 ```
 
-Your `html` element should have a closing tag.
+`html` 元素应该有一个结束标签。
 
 ```js
 assert(code.match(/<\/html\s*>/));
 ```
 
-Your `html` tags should be in the correct order.
+`html` 标签顺序应该正确。
 
 ```js
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
 ```
 
-You should only have one `html` element.
+应该只有一个 `html` 元素。
 
 ```js
 assert(document.querySelectorAll('html').length === 1);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
index 73ab6e248e..7e4f8aed70 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e98d7
-title: Step 15
+title: 步骤 15
 challengeType: 0
 dashedName: step-15
 ---
@@ -9,17 +9,17 @@ dashedName: step-15
 
 To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on.
 
-Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class.
+将你在上一步创建的变量 `--building-color1` 作为 `.bb1a` 类的 `background-color` 属性的值。
 
 # --hints--
 
-The `background-color` of the `.bb1a` element should be set.
+`.bb1a` 元素的 `background-color` 应该被设置。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
 ```
 
-You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
+你应该使用 `var(--building-color1)` 来设置 `.bb1a` 元素的 `background-color`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
index a03529c163..c5c7dc5fd1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
@@ -7,23 +7,23 @@ dashedName: step-20
 
 # --description--
 
-The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element.
+The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. 使用 `align-items` 和 `justify-content` 在元素的底部均匀地排布建筑物。
 
 # --hints--
 
-You should add a `display` of `flex` to the `background-buildings` class.
+你应该给 `background-buildings` 类添加 `display` 为 `flex`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
 ```
 
-You should add an `align-items` of `flex-end` to the `background-buildings` class.
+你应该给 `background-buildings` 类添加 `align-items` 为 `flex-end`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
 ```
 
-You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
+你应该给 `background-buildings` 类添加 `justify-content` 为 `space-evenly`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
index edd11cb7ec..806dd2c05d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
+创建另一个名为 `--building-color4` 的变量，并为其赋值 `#538cc6`。 这次确保它在 `:root` 选择器中。 然后用它来填充最后一个建筑物。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
index fbf29ad992..0ba989ef83 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
@@ -7,29 +7,29 @@ dashedName: step-33
 
 # --description--
 
-You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
+你应该优化你的代码。 Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
 
 # --hints--
 
-You should not remove the `.foreground-buildings` declaration.
+你不应删除 `.foreground-buildings` 声明。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
 ```
 
-You should remove the `position` property from `.foreground-buildings`.
+你应该从 `.foreground-buildings` 中删除 `position` 属性。
 
 ```js
 assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
 ```
 
-You should remove the `top` property from `.foreground-buildings`.
+你应该从 `.foreground-buildings` 中删除 `top` 属性。
 
 ```js
 assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
 ```
 
-You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`.
+你应该将值为 `absolute` 的 `position` 属性添加到 `.background-buildings, .foreground-buildings`。
 
 ```js
 function eitherOr() {
@@ -39,7 +39,7 @@ function eitherOr() {
 assert.equal(eitherOr()?.position, 'absolute');
 ```
 
-You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`.
+你应该将值为 `0` 的 `top` 属性添加到 `.background-buildings, .foreground-buildings`。
 
 ```js
 function eitherOr() {
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
index f77822bffc..a353be7ef6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
@@ -7,17 +7,17 @@ dashedName: step-38
 
 # --description--
 
-Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
+Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. 如果你不记得了，CSS 中的注释看起来像这样：`/* Comment here */`。
 
 # --hints--
 
-You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
+你应该在 `.bb1` 选择器上方添加注释 `BACKGROUND BUILDINGS - "bb" stands for "background building"`。
 
 ```js
 assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
 ```
 
-You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
+你应该在 `.fb1` 选择器上方添加注释 `FOREGROUND BUILDINGS - "fb" stands for "foreground building"`。
 
 ```js
 assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
index b2e70b95f8..e916c06ba5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
@@ -7,7 +7,7 @@ dashedName: step-40
 
 # --description--
 
-Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
+CSS 中的渐变是一种跨元素距离在颜色之间过渡的方法。 它们应用于 `background` 属性，语法如下所示：
 
 ```css
 gradient-type(
@@ -16,29 +16,29 @@ gradient-type(
 );
 ```
 
-In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second.
+在示例中，`color1` 在顶部是实心的，`color2` 在底部是实心的，并且在它们之间均匀地从一个过渡到下一个。 在 `.bb1a` 中，在 `background-color` 属性下添加 `background` 属性。 将其设置为 `linear-gradient` 类型的梯度，使用 `--building-color1` 作为其第一种颜色，使用 `--window-color1` 作为第二种颜色。
 
 # --hints--
 
-You should apply a `background` to `.bb1a` right after the `background-color`.
+你应该给 `.bb1a` 应用 `background`，就在 `background-color` 后面。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
 ```
 
-You should give the `background` a `linear-gradient`.
+你应该给 `background` 一个 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
 ```
 
-You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
+你应该给 `background` 一个以 `var(--building-color1)` 开始的 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
 ```
 
-You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
+你应该给 `background` 一个以 `var(--window-color1)` 结束的 `linear-gradient`。
 
 ```js
 assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
index ddee853e85..28f06faf71 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
@@ -11,7 +11,7 @@ It's a little hidden behind the foreground buildings, but you can see the three
 
 # --hints--
 
-You should remove the `background-color` property and value from `.bb1d`
+你应该从 `.bb1d` 中删除 `background-color` 属性和值。
 
 ```js
 assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
index a44cec1e0e..b38a33977f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
@@ -7,7 +7,7 @@ dashedName: step-50
 
 # --description--
 
-Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
+Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. 这将被用作该建筑物的间色。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
index deecc90a48..e481514a77 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
@@ -7,7 +7,7 @@ dashedName: step-59
 
 # --description--
 
-On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
+构建下一栋楼！ Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
index 3f416454ef..3b3941c7aa 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
@@ -1,17 +1,17 @@
 ---
 id: 5d822fd413a79914d39e9915
-title: Step 106
+title: 步骤 106
 challengeType: 0
 dashedName: step-106
 ---
 
 # --description--
 
-You don't need the `background-color` for this building anymore so you can remove that property.
+你不再需要此建筑物的 `background-color`，因此你可以删除该属性。
 
 # --hints--
 
-You should remove the `background-color` of `.fb5`.
+你应该删除 `.fb5` 的 `background-color`。
 
 ```js
 assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
index 38a750c2e1..d5dcc8679c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e991a
-title: Step 81
+title: 步骤 81
 challengeType: 0
 dashedName: step-81
 ---
@@ -11,20 +11,20 @@ On to the next building! Nest two `div` elements within `.fb2` and give them cla
 
 # --hints--
 
-You should add two `div` elements within `.fb2`.
+你应该在 `.fb2` 中添加两个 `div` 元素。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
 ```
 
-You should give the first new `div` a class of `fb2a`.
+你应该给第一个新的 `div` 一个 `fb2a` 类。
 
 ```js
 assert.exists(document.querySelector("div.fb2 > div.fb2a"));
 assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
 ```
 
-You should give the second new `div` a class of `fb2b`.
+你应该给第二个新的 `div` 一个 `fb2b` 类。
 
 ```js
 assert.exists(document.querySelector("div.fb2 > div.fb2b"));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
index 98a329d9a5..8d45ed998a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e9927
-title: Step 94
+title: 步骤 94
 challengeType: 0
 dashedName: step-94
 ---
@@ -11,7 +11,7 @@ Add your `window-wrap` class to the `.fb3a` element to center and space the wind
 
 # --hints--
 
-You should give `.fb3a` a class of `window-wrap`.
+你应该给 `.fb3a` 一个 `window-wrap` 类。
 
 ```js
 assert.exists(document.querySelector("div.fb3a.window-wrap"));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
index 47bd92f34d..1a82d9c1dc 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e992c
-title: Step 99
+title: 步骤 99
 challengeType: 0
 dashedName: step-99
 ---
@@ -11,13 +11,13 @@ Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`
 
 # --hints--
 
-You should add six `div` elements within `.fb4b`.
+你应该在 `.fb4b` 中添加六个 `div` 元素。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
 ```
 
-You should give each new `div` a class of `fb4-window`.
+你应该给每个新的 `div` 一个 `fb4-window` 类。
 
 ```js
 assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
index 82ecd30f91..70895e0f55 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e9939
-title: Step 113
+title: 步骤 113
 challengeType: 0
 dashedName: step-113
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
index e1130fb698..d8e74e74f3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
@@ -1,6 +1,6 @@
 ---
 id: 5d822fd413a79914d39e993e
-title: Step 118
+title: 步骤 118
 challengeType: 0
 dashedName: step-118
 ---
@@ -9,29 +9,29 @@ dashedName: step-118
 
 Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night.
 
-Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great!
+变量主要与颜色一起使用，这就是你在此处使用它们的方式。 但它们可以被赋予任何值并用于任何属性。 你的项目看起来很棒！
 
 # --hints--
 
-You should add `--window-color1` with a value of `#777`.
+你应该添加 `--window-color1`，其值为 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
 ```
 
-You should add `--window-color2` with a value of `#777`.
+你应该添加 `--window-color2`，其值为 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
 ```
 
-You should add `--window-color3` with a value of `#777`.
+你应该添加 `--window-color3`，其值为 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
 ```
 
-You should add `--window-color4` with a value of `#777`.
+你应该添加 `--window-color4`，其值为 `#777`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
index b621a1a39b..1ddd988ecb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -49,9 +49,11 @@ assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
 你似乎使用了一个浏览器扩展，正在修改页面。 一定要关闭所有浏览器扩展。
 
 ```js
-assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 1);
-assert.equal(document.querySelectorAll('link').length, 0);
+if(__checkForBrowserExtensions){
+  assert.isAtMost(document.querySelectorAll('script').length, 2);
+  assert.equal(document.querySelectorAll('style').length, 1);
+  assert.equal(document.querySelectorAll('link').length, 0);
+}
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
index 1ec3725d8b..faf692e3f0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md
@@ -17,19 +17,19 @@ dashedName: step-12
 assert.lengthOf(document.querySelectorAll('a'), 1);
 ```
 
-The text inside the anchor element should not change, it must be `cat photos`.
+锚元素内的文字不应更改，必须是 `cat photos`。
 
 ```js
 assert.strictEqual(document.querySelector('a').innerText, "cat photos");
 ```
 
-You should have the words `See more` before the anchor element. Make sure you include the space after the last word.
+你应该在锚元素前添加文字 `See more`。 确保在最后一个单词后加上空格。
 
 ```js
 assert.match(code, /See more <a href=/)
 ```
 
-你应该在锚元素后添加文字 `in our gallery`。 Make sure you include the space before the first word.
+你应该在锚元素后添加文字 `in our gallery`。 确保在第一个单词前加上空格。
 
 ```js
 assert.match(code, /<\/a> in our gallery/)
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
index 85fdd4c12a..d1f1155acf 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
index 8dd39ff963..79b432fd1d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
@@ -35,19 +35,19 @@ You should have a closing `body` tag.
 assert(code.match(/<\/body\s*>/i));
 ```
 
-The `head` and `body` elements should be siblings.
+`head` 和 `body` 元素应该是同级元素。
 
 ```js
 assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
 ```
 
-The `head` element should be within the `html` element.
+`head` 元素应该在 `html` 元素内。
 
 ```js
 assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
 ```
 
-The `body` element should be within the `html` element.
+`body` 元素应该在 `html` 元素内。
 
 ```js
 assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
index 59588ecab7..7ae4969cd6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
@@ -9,17 +9,17 @@ dashedName: step-27
 
 You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related.
 
-To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time.
+给每一个单选按钮添加相同的 `name` 属性并设置其值为 `account-type`，以关联单选按钮。 现在，两个单选按钮就无法同时选中了。
 
 # --hints--
 
-You should give the first radio input the `name` attribute with a value of `account-type`.
+第一个单选按钮的 `name` 属性的值应该为 `account-type`。
 
 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
 ```
 
-You should give the second radio input the `name` attribute with a value of `account-type`.
+第二个单选按钮的 `name` 属性的值应该为 `account-type`。
 
 ```js
 assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
index 823860d095..5778d21e71 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
@@ -7,19 +7,19 @@ dashedName: step-34
 
 # --description--
 
-Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags.
+Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. 两个元素都需要结束标签。
 
-Start by adding a `select` element below the two `label` elements. Then nest 5 `option` elements within the `select` element.
+Start by adding a `select` element below the two `label` elements. 然后，在 `select` 元素内添加 5 个 `option` 元素。
 
 # --hints--
 
-You should add a `select` element to the third `fieldset`.
+应该在第三个 `fieldset` 内添加一个 `select` 元素。
 
 ```js
 assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
 ```
 
-You should nest 5 `option` elements inside the `select` element.
+应该在 `select` 元素内添加 5 个 `option` 元素。
 
 ```js
 assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
index fbcf5583ae..9708bc6613 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
@@ -1,6 +1,6 @@
 ---
 id: 60fc219d333e37046f474a6e
-title: Step 51
+title: 步骤 51
 challengeType: 0
 dashedName: step-51
 ---
@@ -11,13 +11,13 @@ Select only the `.inline` elements, and give them `width` of `unset`. This will
 
 # --hints--
 
-You should use the `.inline` selector.
+应该使用 `.inline` 选择器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.inline'));
 ```
 
-You should give the `.inline` elements a `width` of `unset`.
+应该将 `.inline` 元素的 `width` 设置为 `unset`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index ed9d1abcc0..3f97b359cd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -1,6 +1,6 @@
 ---
 id: 60ffefd6479a3d084fb77cbc
-title: Step 64
+title: 步骤 64
 challengeType: 0
 dashedName: step-64
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
index 4edaaef47b..05bf067568 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c48df8674cf2b91020ecc.md
@@ -11,7 +11,7 @@ dashedName: step-3
 
 # --hints--
 
-你应该有一个 `link` 元素。
+You should have a `link` element.
 
 ```js
 assert.match(code, /<link/)
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index b94073b21a..2e1c1e9267 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -18,49 +18,49 @@ dashedName: step-22
 你应该有 `.cat-right-ear` 选择器。
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 你的 `.cat-right-ear` 选择器应将 `height` 属性设置为 `100px`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '100px')
 ```
 
 你的 `.cat-right-ear` 选择器应将 `width` 属性设置为 `100px`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '100px')
 ```
 
 你的 `.cat-right-ear` 选择器应将 `background-color` 属性设置为 `white`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor, 'white')
 ```
 
 你的 `.cat-right-ear` 选择器应设置一个 `border-left` 属性为 `35px solid blue`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid blue')
 ```
 
 你的 `.cat-right-ear` 选择器应设置一个 `border-right` 属性为 `35px solid blue`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid blue')
 ```
 
 你的 `.cat-right-ear` 选择器应设置一个 `border-top` 属性为 `35px solid red`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid red')
 ```
 
 你的 `.cat-right-ear` 选择器应设置一个 `border-bottom` 属性为 `35px solid red`。 不要忘记加上分号。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
index a8ecd0589b..d48d852fd7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
@@ -1,6 +1,6 @@
 ---
 id: 646dec359bef3b7811fba5a6
-title: Step 52
+title: 步骤 52
 challengeType: 0
 dashedName: step-52
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
index 8325d10f6a..d7a435ed9c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
@@ -1,6 +1,6 @@
 ---
 id: 646f107abb89d00bb99f387a
-title: Step 69
+title: 步骤 69
 challengeType: 0
 dashedName: step-69
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
index da4184660d..bf09b65354 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -7,7 +7,7 @@ dashedName: step-26
 
 # --description--
 
-Within your `thead`, create a `tr` element. In that, add a `td` and three `th` elements. Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
+在的 `thead` 中，创建一个 `tr` 元素。 在那里，添加一个 `td` 和三个 `th` 元素。 Within each of the `th` elements, add a `span` element with the `class` set to `sr-only` and the following text, in order: `2019`, `2020`, and `2021`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
index e00bc5bec5..ed88c16a4b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -13,67 +13,67 @@ Then add three `td` elements, giving the third a `class` set to `current`, and g
 
 # --hints--
 
-Your `tbody` element should have one `tr` element.
+`tbody` 元素应该有一个 `tr` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
 ```
 
-Your `tr` element should have the `class` set to `total`.
+`tr` 元素应该将 `class` 设置为 `total`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
 ```
 
-Your `tr` should have a `th` element.
+`tr` 应该有一个 `th` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
 ```
 
-Your `th` element should have the text `Total Net Worth`.
+`th` 元素应包含文本 `Total Net Worth`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
 ```
 
-You should wrap the text `Net Worth` in a `span` element.
+应该将文本 `Net Worth` 包装在 `span` 元素中。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
 ```
 
-Your `span` element should have the `class` attribute set to `sr-only`.
+`span` 元素应该将 `class` 属性设置为 `sr-only`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
 ```
 
-You should have three `td` elements.
+应该有三个 `td` 元素。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
 ```
 
-Your first `td` element should have the text `$-171`.
+第一个 `td` 元素应该包含文本 `$-171`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
 ```
 
-Your second `td` element should have the text `$136`.
+第二个 `td` 元素应该包含文本 `$136`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
 ```
 
-Your third `td` element should have the text `$334`.
+第三个 `td` 元素应该包含文本 `$334`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
 ```
 
-Your third `td` element should have the `class` set to `current`.
+第三个 `td` 元素应该将 `class` 设置为 `current`。
 
 ```js
 assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
index 9d5f8f196a..03edb31423 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -7,7 +7,7 @@ dashedName: step-31
 
 # --description--
 
-The CSS `clip` property is used to define the visible portions of an element. Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
+CSS `clip` 属性用于定义元素的可见部分。 Set the `span[class~="sr-only"]` selector to have a `clip` property of `rect(1px, 1px, 1px, 1px)`.
 
 `clip-path` 属性决定了 `clip` 属性应该采用的形状。 设置 `clip-path` 属性的值为 `inset(50%)`，在元素内剪切形成一个矩形。
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
index f11d74f19c..c0b3bfe3d1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -7,7 +7,7 @@ dashedName: step-35
 
 # --description--
 
-Time to style your table heading. Create an `h1` selector. Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
+是时候为表格标题设置样式了。 创建一个 `h1` 选择器。 Give it a `max-width` property set to `37.25rem`, a `margin` property set to `0 auto`, and a `padding` property set to `1.5rem 1.25rem`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
index 7feae1e94e..ead14cf503 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
@@ -11,49 +11,49 @@ Remember that a `class` attribute can have multiple values. To separate your whi
 
 # --hints--
 
-Your second `.key` element should also have a `class` of `black--key`.
+第二个 `.key` 元素也应该有一个 `black--key` 的 `class`。
 
 ```js
 const key = document.querySelectorAll('.key')?.[1];
 assert(key?.className?.includes('black--key'));
 ```
 
-Your third `.key` should have `black--key` in the `class`.
+第三个 `.key` 应该在 `class` 中有 `black--key`。
 
 ```js
 const third = document.querySelectorAll('.key')?.[2];
 assert(third?.classList?.contains('black--key'));
 ```
 
-Your fifth `.key` should have `black--key` in the `class`.
+第五个 `.key` 应该在 `class` 中有 `black--key`。
 
 ```js
 const fifth = document.querySelectorAll('.key')?.[4];
 assert(fifth?.classList?.contains('black--key'));
 ```
 
-Your sixth `.key` should have `black--key` in the `class`.
+第六个 `.key` 应该在 `class` 中有 `black--key`。
 
 ```js
 const sixth = document.querySelectorAll('.key')?.[5];
 assert(sixth?.classList?.contains('black--key'));
 ```
 
-Your seventh `.key` should have `black--key` in the `class`.
+第七个 `.key` 应该在 `class` 中有 `black--key`。
 
 ```js
 const seventh = document.querySelectorAll('.key')?.[6];
 assert(seventh?.classList?.contains('black--key'));
 ```
 
-You should have five `.black--key` elements.
+应该有五个 `.black--key` 元素。
 
 ```js
 const blackKeys = document.querySelectorAll('.black--key');
 assert(blackKeys?.length === 5);
 ```
 
-You should have seven `.key` elements.
+应该有七个 `.key` 元素。
 
 ```js
 const keys = document.querySelectorAll('.key');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
index 44f76667c7..48004981b6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
@@ -11,28 +11,28 @@ Now copy the set of seven `.key` elements, and paste two more sets into the `.ke
 
 # --hints--
 
-You should have 21 `.key` elements.
+应该有 21 个 `.key` 元素。
 
 ```js
 const keys = document.querySelectorAll('.key');
 assert(keys?.length === 21);
 ```
 
-You should have 15 `.black--key` elements.
+应该有 15 个 `.black--key` 元素。
 
 ```js
 const blackKeys = document.querySelectorAll('.black--key');
 assert(blackKeys?.length === 15);
 ```
 
-All `.key` elements should be within your `.keys` element.
+所有 `.key` 元素都应该在 `.keys` 元素中。
 
 ```js
 const keys = document.querySelector('.keys');
 assert(keys?.querySelectorAll('.key')?.length === 21);
 ```
 
-All `.black--key` elements should be within your `.keys` element.
+所有 `.black--key` 元素都应该在 `.keys` 元素中。
 
 ```js
 const keys = document.querySelector('.keys');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
index f7eca336d9..447353f052 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -11,13 +11,13 @@ Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
 
 # --hints--
 
-Your `.key` selector should have a `margin` property set to `2px`.
+`.key` 选择器应该有一个 `margin` 属性设置为 `2px`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
 ```
 
-Your `.key` selector should have a `float` property set to `left`.
+`.key` 选择器应该有一个 `float` 属性设置为 `left`。
 
 ```js
 assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
index f6733afed9..14749ac949 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -1,6 +1,6 @@
 ---
 id: 60a3e3396c7b40068ad6996b
-title: Step 2
+title: 步骤 2
 challengeType: 0
 dashedName: step-2
 ---
@@ -9,40 +9,40 @@ dashedName: step-2
 
 Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko Painting`.
 
-Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+在 `body` 元素中，添加一个 `img` 元素，其中 `src` 为 `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`。
 # --hints--
 
-Your code should have a `meta` tag.
+代码应该有一个 `meta` 标记。
 
 ```js
 assert(document.querySelectorAll('meta').length === 1);
 ```
 
-The `meta` tag should set the `charset` to `UTF-8`.
+`meta` 标记应将 `charset` 设置为 `UTF-8`。
 
 ```js
 assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8');
 ```
 
-Your code should have a `title` element.
+代码应该有一个 `title` 元素。
 
 ```js
 assert(document.querySelectorAll('title').length === 1);
 ```
 
-The `title` should be `Rothko Painting`.
+`title` 应该是 `Rothko Painting`。
 
 ```js
 assert(document.querySelector('title').innerText === 'Rothko Painting');
 ```
 
-Your code should have an `img` element.
+代码应该有一个 `img` 元素。
 
 ```js
 assert(document.querySelectorAll('img').length === 1);
 ```
 
-The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+`img` 元素的 `src` 应该是 `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`。
 
 ```js
 assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
index 6e38ea0aac..68beb752d0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -1,13 +1,13 @@
 ---
 id: 60a3e3396c7b40068ad69973
-title: Step 10
+title: 步骤 10
 challengeType: 0
 dashedName: step-10
 ---
 
 # --description--
 
-Change the `background-color` of the canvas to `#4d0f00`.
+将画布的 `background-color` 更改为 `#4d0f00`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
index 34a33d9846..bc1fdf3c7d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -1,6 +1,6 @@
 ---
 id: 60a3e3396c7b40068ad69978
-title: Step 15
+title: 步骤 15
 challengeType: 0
 dashedName: step-15
 ---
@@ -9,18 +9,18 @@ dashedName: step-15
 
 Use margins to adjust the spacing outside of an element.
 
-Using the `margin` property, give the `.frame` element vertical margin of `20px`, and horizontal margin of `auto`. This will move the frame down 20 pixels and horizontally center it on the page.
+使用 `margin` 属性，为 `.frame` 元素提供 `20px` 的垂直边距和 `auto` 的水平边距。 这会将框架向下移动 20 像素并在页面上水平居中。
 
 # --hints--
 
-You should set the `margin` property to `20px auto`.
+应该将 `margin` 属性设置为 `20px auto`。
 
 ```js
 const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
 assert(hasMargin);
 ```
 
-Your `.frame` element should have a `margin` value of `20px auto`.
+`.frame` 元素的 `margin` 值应为 `20px auto`。
 
 ```js
 const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
index 084bd29527..83df029872 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -9,18 +9,18 @@ dashedName: step-20
 
 Use margins to position the `.one` element on the canvas.
 
-Add the shorthand `margin` property with a vertical margin of `20px` and a horizontal margin of `auto`.
+添加简写 `margin` 属性，垂直边距为 `20px`，水平边距为 `auto`。
 
 # --hints--
 
-You should set the `margin` property to `20px auto`.
+应该将 `margin` 属性设置为 `20px auto`。
 
 ```js
 const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
 assert(marginFilter.length === 2);
 ```
 
-Your `.one` element should have a `margin` value of `20px auto`.
+`.one` 元素的 `margin` 值应为 `20px auto`。
 
 ```js
 const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
index 5dddeed5c9..978021f3fb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Center the `.two` element by setting its `margin` to `auto`.
+将 `.two` 元素放在中心位置，将其 `margin` 设置为 `auto`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
index 75d57cb115..26687fa9e0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -11,14 +11,14 @@ Center the `.three` element on the canvas by setting its `margin` to `auto`.
 
 # --hints--
 
-You should set the `margin` property to `auto`.
+应该将 `margin` 属性设置为 `auto`。
 
 ```js
 const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
 assert(marginFilter.length === 2);
 ```
 
-Your `.three` element should have a `margin` value of `auto`.
+`.three` 元素的 `margin` 值应为 `auto`。
 
 ```js
 const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
index 61a5952523..9fc1b55758 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -9,18 +9,18 @@ dashedName: step-37
 
 The rectangles are too small and their edges don't have the soft quality of a painting.
 
-Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
+通过将 `box-shadow` 设置为 `0 0 3px 3px #efb762` 来增加区域并柔化 `.one` 的边缘。
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
+应该将 `box-shadow` 属性设置为 `0 0 3px 3px #efb762`。
 
 ```js
 const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
 assert(hasBoxShadow);
 ```
 
-Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
+`.one` 元素的 `box-shadow` 值应为 `0 0 3px 3px #efb762`。
 
 ```js
 const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
index 49ff4ff741..1acdfbad0a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -11,14 +11,14 @@ Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
 
 # --hints--
 
-You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
+应该将 `box-shadow` 属性设置为 `0 0 5px 5px #b20403`。
 
 ```js
 const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
 assert(hasBoxShadow);
 ```
 
-Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
+`.three` 元素的 `box-shadow` 值应为 `0 0 5px 5px #b20403`。
 
 ```js
 const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
index 7bacbe53b4..c4b160814a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -9,18 +9,18 @@ dashedName: step-45
 
 Rotate `.three` counter clockwise by 0.2 degrees.
 
-With this final step, your Rothko painting is now complete.
+通过这最后一步，你的 Rothko 画作现已完成。
 
 # --hints--
 
-You should set the `transform` property to `rotate(-0.2deg)`.
+应该将 `transform` 属性设置为 `rotate(-0.2deg)`。
 
 ```js
 const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
 assert(hasTransform);
 ```
 
-Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
+`.three` 元素的 `transform` 值应为 `rotate(-0.2deg)`。
 
 ```js
 const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
index ccc0e94eee..dc4ecaf952 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Fine-tune the placement of your `h1` by giving it a top and bottom margin of `-4px` and a left and right margin of `0`.
+微调 `h1` 的位置，将上下边距设为 `-4px`，左右边距设为 `0`。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
index 20749a332a..4a5dc77dd0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
@@ -19,25 +19,25 @@ Below your last `p` element, create another `p` element with the text `Sodium 16
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
 ```
 
-Your new `p` element should have the text `Sodium 160mg 7%`.
+新的 `p` 元素应包含文本 `Sodium 160mg 7%`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
 ```
 
-Your new `p` element should have three `span` elements.
+你的新的 `p` 元素应该有三个 `span` 元素。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
 ```
 
-A `span` element should wrap the text `Sodium 160mg`.
+一个 `span` 元素应该包含文本 `Sodium 160mg`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
 ```
 
-A `span` element should wrap the text `Sodium`.
+一个 `span` 元素应该包含文本 `Sodium`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
@@ -49,7 +49,7 @@ The `span` around `Sodium` should have the `class` attribute set to `bold`.
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
 ```
 
-A `span` element should wrap the text `7%`.
+一个 `span` 元素应该包含文本 `7%`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
index 62d80443e8..113ae7dc18 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
@@ -1,6 +1,6 @@
 ---
 id: 615f887466db4ba14b5342cc
-title: Step 62
+title: 步骤 62
 challengeType: 0
 dashedName: step-62
 ---
@@ -9,7 +9,7 @@ dashedName: step-62
 
 After your last divider, create another `p` element with the text `Protein 3g`. Use the necessary classes to remove the bottom border, and a `span` to make the `Protein` bold. Then wrap the text `Protein 3g` including the new `span` element, in a new `span` element.
 
-Following this element, create a large divider.
+在这个元素之后，创建一个大分隔线。
 
 # --hints--
 
@@ -20,13 +20,13 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.prev
 assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');
 ```
 
-Your new `p` element should have the text `Protein 3g`.
+新的 `p` 元素应包含文本 `Protein 3g`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
 ```
 
-Your new `p` element should have the `class` attribute set to `no-divider`.
+新的 `p` 元素应该将 `class` 属性设置为 `no-divider`。
 
 ```js
 assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
index 07e6e161fb..de765be3d1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
@@ -7,7 +7,7 @@ dashedName: step-63
 
 # --description--
 
-Create another `p` element below your large divider. Give the `p` element the text `Vitamin D 2mcg 10%`.
+在大分隔线下方创建另一个 `p` 元素。 Give the `p` element the text `Vitamin D 2mcg 10%`.
 
 `p` 元素只包含文本，你可以将百分比放在 `span` 元素中，这样它就可以被视为与其余文本分开的内容，并且它被移动到右边。
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md
index 5bd41edbaa..42e710efcb 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/build-a-palindrome-checker.md
@@ -25,12 +25,12 @@ dashedName: build-a-palindrome-checker
 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. 当 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，并且 `#check-btn` 元素被点击， `#result` 元素应该包含文本 `"A man, a plan, a canal. Panama is 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. 当 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，并点击 `#check-btn` 元素时，`#result` 元素应该包含文本 `"1 eye for of 1 eye." is not 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"`.
 
@@ -138,7 +138,7 @@ checkBtn.click();
 assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'not a palindrome is not a palindrome');
 ```
 
-当 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，并且 `#check-btn` 元素被点击时， `#result` 元素应该包含文本 `"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');
@@ -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');
 ```
 
-当 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，并且 `#check-btn` 元素被点击时，`#result` 元素应该包含文本 `"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');
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
index 9b5c4cb029..97a5ed19a5 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352fcb156834128001ea945.md
@@ -33,6 +33,12 @@ assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDiffere
 
 你的 `reduce` 回调应该返回 `acc` 和 `el` 的和。
 
+```js
+assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(\s*function\s*\(\s*acc\s*,\s*el\s*\)\s*\{\s*return\s*acc\s*\+\s*el\s*;\s*\}/);
+```
+
+You are missing the starting value of the `reduce`.
+
 ```js
 assert.match(getVariance.toString(), /sumSquaredDifferences\s*=\s*squaredDifferences\.reduce\(\s*function\s*\(\s*acc\s*,\s*el\s*\)\s*\{\s*return\s*acc\s*\+\s*el\s*;\s*\}\s*,\s*0\s*\)/);
 ```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
index 881898738c..655aaf65f1 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/65aac0678d51b3f1a0cb8061.md
@@ -14,7 +14,7 @@ dashedName: step-32
 要查看结果，输入数字 `4, 4, 2, 5` 并点击 `"Calculate"` 按钮。 打开控制台查看以下数组：
 
 ```js
-[ 2, 4, 4, 5 ]
+[ 4, 4, 2, 5 ]
 ```
 
 # --hints--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
index a0ca2920e6..291cc43bc5 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/644b6d20eabd7e0149383254.md
@@ -17,7 +17,7 @@ dashedName: step-32
 assert.match(code, /\s*let\s+selectedCategory\s*/);
 ```
 
-您应为 `selectedCategory` 变量分配一个空对象。
+You should assign an empty object to the `selectedCategory` variable.
 
 ```js
 assert.match(code, /\s*let\s+selectedCategory\s*=\s*{\s*}\s*/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
index 47b6758ef9..8f2752b07c 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660ae8ad1475698da3c3c37d.md
@@ -29,8 +29,45 @@ assert.match(code, /printGreeting\(\);?/);
 assert.isBelow(code.indexOf("const printGreeting = () => {"), code.indexOf("printGreeting()"));
 ```
 
+Your `printGreeting` function call should output `Hello there!` to the console.
+
+```js
+assert.strictEqual(logOutput, "Hello there!"); 
+```
+
 # --seed--
 
+## --before-user-code--
+
+```js
+let logOutput = "";
+const originalConsole = console;
+function capture() {
+    const nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          const nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+```
+
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
index e20869c7d3..febfce0071 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/660aea8782242e8f4bcc42d8.md
@@ -79,8 +79,47 @@ const functionDefinition = code.indexOf("printMessage =");
 assert.isBelow(functionDefinition, functionCall);
 ```
 
+Your `printMessage` function call should output `freeCodeCamp is awesome!` to the console.
+
+```js
+assert.strictEqual(logOutput, "freeCodeCamp is awesome!"); 
+```
+
 # --seed--
 
+
+## --before-user-code--
+
+```js
+let logOutput = "";
+const originalConsole = console;
+function capture() {
+    const nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          const nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+```
+
+
 ## --seed-contents--
 
 ```html
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
index 65b47cd86c..a3a992137f 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
@@ -14,65 +14,162 @@ dashedName: step-87
 你应该在模板文字中添加第二个 `p` 元素。
 
 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
-```
 
-你的第二个 `p` 元素应该位于新行上。
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-第二个 `p` 元素应该在现有的 `p` 元素之后。
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```
 
 你的第二个 `p` 元素应包含文本 `${consumedCalories} Calories Consumed`。
 
 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```
 
 你应该在模板字面量中添加第三个 `p` 元素。
 
 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```
 
-你的第三个 `p` 元素应该位于新行上。
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-你的第三个 `p` 元素应该位于现有的第二个 `p` 元素之后。
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.lengthOf(output.children,5);
 ```
 
 你的第三个 `p` 元素应该包含文本 `${exerciseCalories} Calories Burned`。
 
 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
-```
 
-# --seed--
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-## --after-user-code--
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
 
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
 ```
 
+# --seed--
+
 ## --seed-contents--
 
 ```html
@@ -270,7 +367,7 @@ function addEntry() {
   targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }
 
---fcc-editable-region--
+
 function calculateCalories(e) {
   e.preventDefault();
   isError = false;
@@ -292,6 +389,7 @@ function calculateCalories(e) {
     return;
   }
 
+--fcc-editable-region--
   const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
   const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
   const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
index 6f667d08e8..1f53ea6e00 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/64496d80bc174a158c973080.md
@@ -7,62 +7,29 @@ dashedName: step-25
 
 # --description--
 
-使用三元语法，使用 `isEven` 函数检查 `length` 是否均匀。 如果是，则返回 `middle` 索引处的数字与其后一个数字的平均值。 如果是奇数，则返回 `middle` 索引处的数字 - 你需要将 `middle` 值向上舍入。
+Check if `length` is even using your `isEven` function. 如果是，则返回 `middle` 索引处的数字与其后一个数字的平均值。 如果是奇数，则返回 `middle` 索引处的数字 - 你需要将 `middle` 值向上舍入。
 
 # --hints--
 
-你应该使用 `return` 关键字。
+You should return a value from the `median` function.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return/);
+assert.exists(median([2,4,6,8]));
 ```
 
-你应该在 `return` 关键字之后调用 `isEven()` 函数。
+If `length` is even, you should return the average of the number at the `middle` index and the number after it.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(/);
+assert.strictEqual(median([2,4,6,8]),5); 
+assert.strictEqual(median([6,12,18,24]),15); 
 ```
 
-你应该将 `length` 变量传递给 `isEven()` 调用。
 
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)/);
-```
-
-你应该使用三元语法来检查 `isEven()` 调用的真实性。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?/);
-```
-
-如果三元数是真的话，你应该调用 `average()` 函数。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(/);
-```
-
-你应该将一个数组传递给 `average()` 函数。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[/);
-```
-
-传递给 `average()` 的数组的第一个元素应该是 `sorted` 数组的 `middle` 索引处的元素。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]/);
-```
-
-传递给 `average()` 的数组的第一个元素应该是 `sorted` 数组的 `middle + 1` 索引处的元素。
-
-```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]\s*,\s*sorted\s*\[\s*middle\s*\+\s*1\s*\]\s*\]\s*\)/);
-```
-
-如果三元运算符为假，则应返回 `middle` 索引处的 `sorted` 值。 使用 `Math.ceil()` 将 `middle` 值向上舍入。
+If `length` is odd, you should return the value at the `middle` index.
 
 ```js
-assert.match(code, /const\s+median\s*=\s*nums\s*=>\s*\{\s*const\s+sorted\s*=\s*nums\.slice\(\s*\)\.sort\(\s*\(\s*a\s*,\s*b\s*\)\s*=>\s*a\s*-\s*b\s*\)\s*\s*;?\s*const\s+length\s*=\s*sorted\.length\s*;?\s*const\s+middle\s*=\s*length\s*\/\s*2\s*-\s*1\s*;?\s*return\s+isEven\(\s*length\s*\)\s*\?\s*average\(\s*\[\s*sorted\s*\[\s*middle\s*\]\s*,\s*sorted\s*\[\s*middle\s*\+\s*1\s*\]\s*\]\s*\)\s*:\s*sorted\s*\[\s*Math\.ceil\(\s*middle\s*\)\s*\]\s*;?/);
+assert.strictEqual(median([2,4,6,8,10]),6); 
+assert.strictEqual(median([3,6,9,12,15]),9); 
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
index 8db9b4ab70..a7b99d903e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-introductory-javascript-by-building-a-pyramid-generator/660f280dda5040f707c76b4a.md
@@ -38,6 +38,12 @@ assert.match(__helpers.removeJSComments(code), /character\.repeat\(/);
 assert.match(__helpers.removeJSComments(code), /character\.repeat\(\s*i\s*\)/)
 ```
 
+You should use the `.repeat()` method in the `.push()` method
+
+```js
+assert.match(__helpers.removeJSComments(code), /rows\.push\(\s*character\.repeat\(\s*i\s*\)\s*\)/);
+```
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
index 33514e2e27..b60b0e18c6 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
@@ -7,7 +7,7 @@ dashedName: step-37
 
 # --description--
 
-使用箭头语法创建 `updateTaskContainer` 函数。 然后将 `taskData.forEach()` 及其内容移入其中。
+使用箭头语法创建 `updateTaskContainer` 函数。 Then move the `taskData.forEach()` and its content from the `taskForm`'s `submit` event listener into the newly created function.
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{/)
 你应该将 `taskData.forEach()` 及其内容移至 `updateTaskContainer()` 函数中。
 
 ```js
-assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`\s*}\s*\)\s*;?\s*\}\s*;?/)
+assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`;?\s*}\s*\)\s*;?\s*\}\s*;?/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
index 3019490e1b..a4f78a3aa7 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/64ff04cc33779427a6412449.md
@@ -11,7 +11,7 @@ dashedName: step-57
 
 使用 `getItem()` 再次检索 `myTaskArr` 数组。 这次，将其包装在 `JSON.parse()` 中，将其分配给变量 `getTaskArrObj` 并将 `getTaskArrObj` 记录到控制台。
 
-检查控制台以查看 `getTaskArr` 和 `getTaskObj` 之间的区别。
+Check the console to see the difference between `getTaskArr` and `getTaskArrObj`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
index 02366a878b..11acebbe68 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/review-algorithmic-thinking-by-building-a-dice-game/657e230500602983e01fff6e.md
@@ -55,14 +55,44 @@ assert.strictEqual(scoreSpans[3].innerText, ", score = 30");
 
 如果没有掷出顺子，你的 `checkForStraights` 函数应该启用最后一个单选按钮，将值设为 `0`，并更新显示文本为 `, score = 0`。
 
+```js
+const assertNoStraight = (_diceValuesArr) => {
+  resetRadioOptions();
+  checkForStraights(_diceValuesArr);
+  assert.isTrue(scoreInputs[3].disabled);
+  assert.isTrue(scoreInputs[4].disabled);
+  assert.isFalse(scoreInputs[5].disabled);
+  assert.strictEqual(scoreInputs[5].value, "0");
+  assert.strictEqual(scoreSpans[5].innerText, ", score = 0");
+}
+
+assertNoStraight([1,1,1,1,1]);
+assertNoStraight([1,1,4,4,4]);
+```
+
+You should call the `checkForStraights` function when the `rollDiceBtn` is clicked.
+
 ```js
 resetRadioOptions();
-checkForStraights([1,1,1,1,1]);
-assert.isTrue(scoreInputs[3].disabled);
-assert.isTrue(scoreInputs[4].disabled);
-assert.isFalse(scoreInputs[5].disabled);
-assert.strictEqual(scoreInputs[5].value, "0");
-assert.strictEqual(scoreSpans[5].innerText, ", score = 0");
+const origMathRandom = Math.random;
+// Temporarily modifies Math.random to guarantee a straight.
+const myMathRandom = (() => {
+  let i = 0;
+  const values = [4/6,2/6,5/6,3/6,1/6];
+  return () => values[i++ % 5];
+})();
+
+Math.random = myMathRandom;
+
+try {
+  rollDiceBtn.click();
+} finally {
+  Math.random = origMathRandom;
+}
+
+assert.isFalse(scoreInputs[4].disabled);
+assert.strictEqual(scoreInputs[4].value, "40");
+assert.strictEqual(scoreSpans[4].innerText, ", score = 40");
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
index 6191b93743..220378bfee 100644
--- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
+++ b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
@@ -22,14 +22,14 @@ This is one of the possible permutations for $N = 20$.
 
 We can verify that $F(6) = 5$, $F(8) = 9$, $F(20) = 450$ and $F(1000) ≈ 8.8521816557e\\,21$.
 
-Find $F({10}^{18})$. Give as your answer as a string in its scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. 例如： if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
+Find $F({10}^{18})$. Give your answer as a string in scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. 例如： if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
 
 # --hints--
 
 `permutationOf3SmoothNumbers()` should return a string.
 
 ```js
-assert.strictEqual(typeof permutationOf3SmoothNumbers() === 'string');
+assert.strictEqual(typeof permutationOf3SmoothNumbers(), 'string');
 ```
 
 `permutationOf3SmoothNumbers()` should return the string `5.5350769703e1512`.
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
index 024ec955a0..cca60a9821 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b05367b59300bcb5f18ef.md
@@ -13,7 +13,10 @@ In English, you can use the verb `to be` to ask questions about feelings, states
 
 Here are some more examples of turning statements into questions using `to be`:
 
-`He is here.` -> `Is he here?` `They are ready.` -> `Are they ready?`
+| Affirmative       | Interrogative     |
+| ----------------- | ----------------- |
+| `He is here.`     | `Is he here?`     |
+| `They are ready.` | `Are they ready?` |
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
index 868723a4b3..feac4026e8 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b068e28a3bd135ced0042.md
@@ -21,7 +21,7 @@ What does `so far` mean in Sarah's question to Tom?
 
 ## --answers--
 
-It asks for Tom’s complete opinion about the workplace.
+It asks for Tom's complete opinion about the workplace.
 
 ### --feedback--
 
@@ -37,15 +37,15 @@ It does not ask about the future or what Tom expects.
 
 ---
 
-It asks about Tom’s feelings from his first day to the present time.
+It asks about Tom's feelings from his first day to the present time.
 
 ---
 
-It asks only about Tom’s first day at the workplace.
+It asks only about Tom's first day at the workplace.
 
 ### --feedback--
 
-It is about Tom’s experience until the time he is asked.
+It is about Tom's experience until the time he is asked.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
index e47bd84586..1701dc2ea8 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b190c4e736f5c4005b132.md
@@ -24,7 +24,7 @@ What is Sarah referring to when she says `these activities`?
 
 ## --answers--
 
-`Yes, it’s great!`
+`Yes, it's great!`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
index d4b1ae170f..5343d8fada 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b1ae0c2fb4c64071ade7a.md
@@ -19,7 +19,7 @@ dashedName: task-10
 
 选择 Tom 问 Sarah 的正确问题：
 
-`Absolutely! They are really fun. What is the team’s favorite?`
+`Absolutely! They are really fun. What is the team's favorite?`
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
index 40e2d8ab66..615db4032b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b23ad0df43588a6eadfa4.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-12
 ---
 
-<!-- (Audio) Tom: Absolutely! They are really fun. What is the team’s favorite?
+<!-- (Audio) Tom: Absolutely! They are really fun. What is the team's favorite?
 
 Sarah: Many of us enjoy the monthly game night. Are you into board games?
 
@@ -31,7 +31,7 @@ Tom: Yes, I love board games! -->
 
 ---
 
-`What is the team’s favorite?` 和 `Many of us enjoy the monthly game night.`。
+`What is the team's favorite?` and `Many of us enjoy the monthly game night.`
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ The first sentence is correct. The second sentence is a statement, not a questio
 
 ---
 
-`What is the team’s favorite?` and `Are you into playing board games?`
+`What is the team's favorite?` and `Are you into playing board games?`
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
index b62f41981f..cdb791e80a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b24e5edd7708e93549565.md
@@ -18,7 +18,7 @@ The present perfect is a tense used to indicate a link between the present and t
 
 `I have played this game before.` - This is in the present perfect tense. It states that the action of playing the game happened at an unspecified time in the past.
 
-`I’ve played this game before.` - This sentence is also in the present perfect tense, using the contraction `I've` for `I have`. Like the previous example, it states that the action of playing the game happened at an unspecified time in the past.
+`I've played this game before.` - This sentence is also in the present perfect tense, using the contraction `I've` for `I have`. Like the previous example, it states that the action of playing the game happened at an unspecified time in the past.
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
index 9b21a9cb80..1055ac5634 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b69e10d6606a0185d4d4f.md
@@ -11,13 +11,17 @@ dashedName: task-23
 
 So far you have learned how to create questions with the verb `to be`. In sentences with the verb `to be` (am, is, are) you just have to change the order of the noun and the verb to create a question. Like this:
 
-`You are a developer` -> `Are you a developer?`
+| Affirmative            | Interrogative          |
+| ---------------------- | ---------------------- |
+| `You are a developer.` | `Are you a developer?` |
 
-Changing the order of the noun and the verb doesn’t work in every situation. Most sentences need you to add an auxiliary verb to create questions. One of the most common auxiliary verbs is `Do`.
+Changing the order of the noun and the verb doesn’t work in every situation. Most sentences need you to add an auxiliary verb to create questions. One of the most common auxiliary verbs is `do`.
 
-You can use the verb `do` as an auxiliary to most verbs. In the present tense it assumes the form of `do` (I, you, we, they) and `does`(he, she, it). It is like a marker you will add to the beginning of your sentence and lets everyone know that sentence is a question. 例如：
+You can use the verb `do` as an auxiliary to most verbs. In the present tense it assumes the form of `do` (I, you, we, they) and `does` (he, she, it). It is like a marker you will add to the beginning of your sentence and lets everyone know that sentence is a question. 例如：
 
-Statement: `You debug on Fridays.` Question: `Do you debug on Fridays?`
+| Affirmative             | Interrogative              |
+| ----------------------- | -------------------------- |
+| `You debug on Fridays.` | `Do you debug on Fridays?` |
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
index d9ec792d47..a9e2d4afc7 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b6f641e5c3ab1afc6efc1.md
@@ -13,7 +13,7 @@ Before you learned to ask questions using `do`, you can also use it to create ne
 
 `It does not function` - (Subject + `does` + `not` + main verb)
 
-Often, to be more practical people abbreviate `do not` to `don't` and `does not` to `doesn’t`.
+Often, to be more practical people abbreviate `do not` to `don't` and `does not` to `doesn't`.
 
 Just like with questions, when you use `don't`, the main verb that comes after it will always be in its base form, no matter who you're talking about.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
index 60cc5f8afb..0f1defdcbe 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b70cc934e0ab83cab4dbe.md
@@ -29,7 +29,7 @@ Read the dialogue excerpt and fill in the blanks using `do` or `don't.`
 
 ### --feedback--
 
-In the first blank, Tom is asking a question about Sophie’s hobbies, which requires `do.`
+In the first blank, Tom is asking a question about Sophie's hobbies, which requires `do.`
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
index a1fb366e90..cafcdc2438 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657b92b25858f24caf6894aa.md
@@ -11,7 +11,7 @@ Tom: It's a deal! -->
 
 # --description--
 
-The expression `only if` is used to set a condition for something to happen. It’s like saying `this will happen if that happens.` It's a way of making an agreement where one action depends on another.
+The expression `only if` is used to set a condition for something to happen. It's like saying `this will happen if that happens.` It's a way of making an agreement where one action depends on another.
 
 For example: if your friend says, `I'll go out only if it doesn't rain,` it means they will go out but the weather must be good - no rain.
 
@@ -20,7 +20,7 @@ For example: if your friend says, `I'll go out only if it doesn't rain,` it mean
 
 ## --text--
 
-What is Sophie’s condition?
+What is Sophie's condition?
 
 ## --answers--
 
@@ -44,7 +44,7 @@ There is no mention of Sophie wanting to show pictures.
 
 ---
 
-She doesn’t want to hear Tom play.
+She doesn't want to hear Tom play.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
index 1304bd1675..7c4e708881 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cb68bf15f349a744b5fba.md
@@ -7,11 +7,11 @@ dashedName: task-43
 
 # --description--
 
-When you want to learn about a person’s character or personality without specifying their gender, you can use `they` as a singular pronoun and ask, `What are they like?`.
+When you want to learn about a person's character or personality without specifying their gender, you can use `they` as a singular pronoun and ask, `What are they like?`.
 
 This is a respectful and inclusive way to ask about someone. Using `they` in this way ensures that you don't make assumptions about people. Example:
 
-Imagine there is a new team member joining your programming project, but you haven’t met them yet. Instead of assuming their gender, you can ask your supervisor, `What are they like?`
+Imagine there is a new team member joining your programming project, but you haven't met them yet. Instead of assuming their gender, you can ask your supervisor, `What are they like?`
 
 This question helps you find out about the new member's personality, such as being organized, creative, or detail-oriented.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
index 076109b8da..28080229eb 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cd962b45f48127c183d7b.md
@@ -13,7 +13,17 @@ As you already studied, for most verbs conjugation can be simple. You just  add
 
 例如：
 
-`You talk` -> `He talks` `They do` -> `It does`
+Verb `to talk` conjugation:
+
+- `I talk`, `you talk`, `we talk`, and `they talk`.
+
+- `He talks`, `she talks`, and `it talks`.
+
+Verb `to do` conjugation:
+
+- `I do`, `you do`, `we do`, and `they do`.
+
+- `He does`, `she does`, and `it does`.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
index a1d512fed7..6ee041dcde 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cdc5a8e30191d1abec8b7.md
@@ -9,7 +9,7 @@ dashedName: task-58
 
 # --description--
 
-Let’s practice listening to verbs conjugated in the third person.
+Let's practice listening to verbs conjugated in the third person.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
index b5a7ed6dc1..dd804ae3ca 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ce061cda4a42a99c65d89.md
@@ -13,7 +13,7 @@ dashedName: task-60
 
 ## --text--
 
-Choose the correct question for asking about someone’s usual work location.
+Choose the correct question for asking about someone's usual work location.
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
index f206982476..7b9b413d19 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cfeeeabb34d946d437dc7.md
@@ -11,7 +11,7 @@ dashedName: task-75
 
 The expression `to be in good hands` means that someone is being taken care of by a competent or capable person.
 
-It’s like saying you can relax because you trust the person helping or looking after you.
+It's like saying you can relax because you trust the person helping or looking after you.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
index 0bc7dfb91e..adf48b7131 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657cff86dd812f98672e2649.md
@@ -35,7 +35,7 @@ Sophie's words are very positive, more than just average.
 
 ---
 
-She is unsure about Maria’s leadership skills.
+She is unsure about Maria's leadership skills.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
index a6504cbaf0..6729f470b2 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc1d18a0a6f25302badba.md
@@ -13,7 +13,7 @@ The word `reasonable` means something is fair, makes sense, or is acceptable in
 
 ## --text--
 
-What does `that’s reasonable` mean?
+What does `that's reasonable` mean?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
index 0952906e3a..de288e79d4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc50830f9be380105f1ee.md
@@ -9,7 +9,7 @@ dashedName: task-94
 
 In English, the verb `know` is conjugated to `knows` when the subject is singular and in third person.
 
-`Everyone` refers to a group but it is treated as a singular noun, that’s why in English the correct form is `everyone knows`.
+`Everyone` refers to a group but it is treated as a singular noun, that's why in English the correct form is `everyone knows`.
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
index 2593d34679..814f662f8f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc568fe84e53acc962fc3.md
@@ -10,7 +10,7 @@ Tom: Good to know! Do they involve everyone on the team? -->
 
 # --description--
 
-Listen carefully to Tom’s question about the team meetings.
+Listen carefully to Tom's question about the team meetings.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
index 3928c17591..61cee04b2c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dc9946a177a5938ad3854.md
@@ -13,7 +13,7 @@ dashedName: task-104
 
 How long it takes to make a website depends on how big or small the job is. Choosing the coding language depends on the computer or system we use.
 
-Notice that after `depends` there’s always the preposition `on`.
+Notice that after `depends` there's always the preposition `on`.
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
index acdbdfe1e3..47b1f59464 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dca763bc23c5fc3398d95.md
@@ -26,7 +26,7 @@ Definitely next Monday.
 
 ### --feedback--
 
-`Definitely` is too certain compared to `probably.`
+Sophie says `probably`, which does not imply anything definite.
 
 ---
 
@@ -34,7 +34,7 @@ Maybe in two weeks.
 
 ### --feedback--
 
-`Maybe in two weeks` suggests less certainty and a longer timeframe than indicated by `probably.`
+Sophie uses `probably`, which suggests a greater level of certainty than maybe.
 
 ---
 
@@ -46,7 +46,7 @@ On Friday.
 
 ### --feedback--
 
-`On Friday` is not mentioned and does not align with `probably next Monday.`
+Friday was not mentioned in the dialog. It has to do with another day of the week.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
index 6e9c5718ed..1f60f107db 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dce8ff35869721311a5e3.md
@@ -21,7 +21,7 @@ Which sentence is correct for describing one place near you?
 
 ### --feedback--
 
-`There are` is used for plural nouns, and `bank` is singular. You’ll learn about `there are` in the next few lessons.
+`There are` is used for plural nouns, and `bank` is singular. You'll learn about `there are` in the next few lessons.
 
 ---
 
@@ -29,7 +29,7 @@ Which sentence is correct for describing one place near you?
 
 ### --feedback--
 
-This option is a question form, not a statement. You’ll learn about questions later.
+This option is a question form, not a statement. You'll learn about questions later.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
index 10c0845779..cbbd43b132 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dcee413423174ca3747f5.md
@@ -9,7 +9,9 @@ dashedName: task-112
 
 To elaborate a question using `there is` you just need to change the order of the verb `to be`, like so:
 
-`There is an ATM nearby` -> `Is there an ATM nearby?`
+| Affirmative               | Interrogative             |
+| ------------------------- | ------------------------- |
+| `There is an ATM nearby.` | `Is there an ATM nearby?` |
 
 This form is useful when you're not sure if the place or item exists in that area and you want to ask about it.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
index 726e33791e..fd061f85d5 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657dd047e755e37d58f5084f.md
@@ -31,7 +31,7 @@ Absence of parks.
 
 ### --feedback--
 
-`Absence` suggests that there are no parks.
+`A couple of` suggests that there are some parks.
 
 ---
 
@@ -43,7 +43,7 @@ Many parks.
 
 ### --feedback--
 
-`Many` indicates a larger quantity, which doesn't match the context.
+`A couple of` indicates a small quantity, which doesn't match this answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
index cc6373a451..5311718220 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddaaf8d89b4a56e3fdf78.md
@@ -11,9 +11,9 @@ dashedName: task-123
 
 Maria mentions that she doesn't know of any theater in the area. When you want to express that something does not exist or is not present somewhere, you use `there isn't` for singular nouns or `there aren't` for plural nouns.
 
-`There isn’t` is an abbreviation of `there is not`.
+`There isn't` is an abbreviation of `there is not`.
 
-`There aren’t` is an abbreviation of `there are not`.
+`There aren't` is an abbreviation of `there are not`.
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
index f5cbb5fad1..dba3b3ff6b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/657ddd7d4fc512b03741d9a3.md
@@ -21,11 +21,11 @@ There are closed malls.
 
 ### --feedback--
 
-They don’t discuss the opening hours of malls.
+They don't discuss the opening hours of malls.
 
 ---
 
-There aren’t any malls.
+There aren't any malls.
 
 ### --feedback--
 
@@ -33,7 +33,7 @@ Malls are easy to locate.
 
 ---
 
-Malls aren’t very common in this area.
+Malls aren't very common in this area.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
index fadee714a6..7c17a7e534 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/656cd6a37495961c5f242c5d.md
@@ -46,7 +46,7 @@ She doesn't ask about his family. Try again.
 
 ### --feedback--
 
-She doesn’t ask for reasons. Try again.
+She doesn't ask for reasons. Try again.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
index 47cf8c442d..c43f91ef4e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md
@@ -13,9 +13,10 @@ There are some verbs you can't use `didn't` to create negative sentences in the
 
 If you want to create a negative sentence using the verb `to be` in the past, simply  add `not` after `was` or `were`. 例如：
 
-`It was working normally` -> `It wasn't working normally`.
-
-`They were informed earlier` -> `They weren't informed earlier`.
+| Affirmative                   | Negative                         |
+| ----------------------------- | -------------------------------- |
+| `It was working normally.`    | `It wasn't working normally.`    |
+| `They were informed earlier.` | `They weren't informed earlier.` |
 
 `Wasn't` is the abbreviation of `was not` and `weren't` the abbreviation of `were not`.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
index 8620b1cc27..60aa2bf8c4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-91
 ---
 
-<!-- (Audio) Anna: I saw that tech companies appreciate innovation and care for the employees’ well-being. -->
+<!-- (Audio) Anna: I saw that tech companies appreciate innovation and care for the employees' well-being. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
index 6c8694f2e4..3db34a46ba 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5111de04c216a38d998.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-61
 ---
 
-<!-- (Audio) Brian: They weren’t exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
+<!-- (Audio) Brian: They weren't exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
index a771e1f995..b950dd4104 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/65f3a5733a199c21ca589173.md
@@ -6,7 +6,7 @@ dashedName: task-62
 ---
 
 <!-- (Audio) Sophie: That sounds cool. Did you ever work on any big projects during your studies? 
-Brian: They weren’t exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
+Brian: They weren't exactly big projects. Most of them were smaller scale. But it was a great learning experience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
index 0685ff884a..8b2cdb1d4b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-for-clarification-on-code-understanding/65f52f761f23715bce60f9ce.md
@@ -15,7 +15,7 @@ Listen to the audio and answer the question.
 
 ## --text--
 
-What part of Sarah’s answer suggests a course of action?
+What part of Sarah's answer suggests a course of action?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
index 57b9aca791..93211e77fd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/66415d2fc70cf753ed0723a4.md
@@ -11,7 +11,7 @@ dashedName: task-76
 
 `That's strange` means you think something is unusual or unexpected. For example, if you see it snowing in the summer, you might say, `That's strange.` It means you did not expect that to happen.
 
-`I'm sure` means you are confident that something is true. For example, if you know your friend’s birthday is tomorrow, you can say, `I'm sure it's tomorrow.` It means you believe it without doubt.
+`I'm sure` means you are confident that something is true. For example, if you know your friend's birthday is tomorrow, you can say, `I'm sure it's tomorrow.` It means you believe it without doubt.
 
 Listen and fill in the blanks.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
index ac608c2860..9d837be0c0 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/664274a516894a70a9111cb6.md
@@ -11,7 +11,7 @@ dashedName: task-78
 
 `Now that I think about it` means you have remembered or realized something after thinking more. For example, if you forgot where you put your keys but then remember, you might say, `Now that I think about it, they are on the table.` It means you have thought again and found new information.
 
-`To confuse something with something else` means to mix up two things and think one is the other. For example, if you see someone’s twin and think it is your friend, you can say `Sorry. I confused your twin with you`. It means you mistake one thing for another.
+`To confuse something with something else` means to mix up two things and think one is the other. For example, if you see someone's twin and think it is your friend, you can say `Sorry. I confused your twin with you`. It means you mistake one thing for another.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
index 1b76c28733..a46cb43df1 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-clarify-information-in-different-interactions/6642914bd5def3734c59b763.md
@@ -11,7 +11,7 @@ dashedName: task-79
 
 A `tray` is a flat, shallow container used to carry or hold things. For example, you use a `tray` to bring food or drinks from the kitchen to the table.
 
-`Enough` means having as much as you need. For example, if you have `enough water`, it means you have all the water you need to drink and you don’t need more. It can be used to talk about quantity, like having `enough food`, or to talk about quality, like when something is `good enough`.
+`Enough` means having as much as you need. For example, if you have `enough water`, it means you have all the water you need to drink and you don't need more. It can be used to talk about quantity, like having `enough food`, or to talk about quality, like when something is `good enough`.
 
 Listen to the dialogue and fill in the blanks.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
index f57968bf06..dc1be3ff3b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655b76340ecb8285060ab6d5.md
@@ -23,7 +23,7 @@ Sophie helps her team and James checked cybersecurity
 
 ### --feedback--
 
-This option incorrectly uses the simple present tense for Sophie and the simple past tense for James. They don’t reflect the continuous, ongoing nature of their current activities.
+This option incorrectly uses the simple present tense for Sophie and the simple past tense for James. They don't reflect the continuous, ongoing nature of their current activities.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
index 5931c919ea..2c96c94fa4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655bdc7e9c4116509df13f34.md
@@ -9,13 +9,13 @@ dashedName: task-19
 
 # --description--
 
-To `Use` means to use something for a purpose.
+To `use` means to put something to a particular purpose.
 
 A `tool` is something that helps you do a job. In work, tools are often software or things on the computer. 例如：
 
-`Using tools can make hard jobs easier`
+- `Using tools can make hard jobs easier`
 
-`She uses tools to organize her work`
+- `She uses tools to organize her work`
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
index 5b42eaea90..77bd74e59b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9a89818e18606c18ca4b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-22
 ---
 
-<!-- (Audio) Mark: Hi Maria! I'm testing a new software to find problems. It’s a nice experience so far, but we're doing more tests to make sure everything works. -->
+<!-- (Audio) Mark: Hi Maria! I'm testing a new software to find problems. It's a nice experience so far, but we're doing more tests to make sure everything works. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ In this dialogue, Mark talks about his activities related to a project.
 
 ## --sentence--
 
-`Hi Maria! I'm BLANK a new software to BLANK problems. It’s a nice experience so far, but we're BLANK more tests to BLANK sure everything BLANK`
+`Hi Maria! I'm BLANK a new software to BLANK problems. It's a nice experience so far, but we're BLANK more tests to BLANK sure everything BLANK`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
index 9df14394f9..610becca4e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/655c9bcb5bedb4620acb6f18.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-24
 ---
 
-<!-- (Audio) Mark: It’s a nice experience so far, but we're doing more tests to make sure everything works. -->
+<!-- (Audio) Mark: It's a nice experience so far, but we're doing more tests to make sure everything works. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
index 2ddbd5a721..518f35e725 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a44b06bea9443b8ff45bd.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-34
 ---
 
-<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I’m getting information for the articles. It's keeping me busy, but I enjoy it. -->
+<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I'm getting information for the articles. It's keeping me busy, but I enjoy it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
index b2c15dc0a5..e583e3372d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a456b46b4b04437f2d3e9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-35
 ---
 
-<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I’m getting information for the articles. It's keeping me busy, but I enjoy it. -->
+<!-- (Audio) Amy: It's exciting. I'm interviewing some experts and I'm getting information for the articles. It's keeping me busy, but I enjoy it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
index 6c53bef079..4b740a4e90 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4ac4529e0f49ab900c3b.md
@@ -23,7 +23,7 @@ She is learning about project management
 
 ### --feedback--
 
-Sarah doesn’t mention project management.
+Sarah doesn't mention project management.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
index 4ca8187b27..ca588b3c4a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-describe-your-current-project/656a4d1943d8f24c030ded74.md
@@ -13,7 +13,7 @@ When someone uses `either` at the end of a negative sentence, it means the same
 
 `I don't like carrots. My sister doesn't like them, either.`
 
-Here, `either` means both the speaker and their sister don’t like carrots.
+Here, `either` means both the speaker and their sister don't like carrots.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
index 4c6e55a91c..a2eb451b0f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65fe10ef733aebd257f0677d.md
@@ -9,7 +9,7 @@ dashedName: task-2
 
 # --description--
 
-`AI` stands for Artificial Intelligence. It’s an abbreviation of Artificial Intelligence.
+`AI` stands for Artificial Intelligence. It's an abbreviation of Artificial Intelligence.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
index 203ca02e14..5fabe0b5d4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/65ff086669d84512c7d132f1.md
@@ -9,7 +9,7 @@ dashedName: task-4
 
 # --description--
 
-`like` is a preposition used to describe the similarity between two things, people, or concepts. It indicates that there are shared qualities or characteristics between the compared elements. It’s commonly used in comparisons to highlight similarities. Example: `Her eyes are blue like the sky.`
+`like` is a preposition used to describe the similarity between two things, people, or concepts. It indicates that there are shared qualities or characteristics between the compared elements. It's commonly used in comparisons to highlight similarities. Example: `Her eyes are blue like the sky.`
 
 Fill in the blank with proper word.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
index 1d4e672e11..13c884e97e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/6617e75a204e044552675f58.md
@@ -9,7 +9,7 @@ dashedName: task-5
 
 # --description--
 
-In this challenge, you’ll practice what you learned in previous challenges. Listen to the dialogue and choose the correct answer.
+In this challenge, you'll practice what you learned in previous challenges. Listen to the dialogue and choose the correct answer.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
index dae53352ee..e2cbb035ff 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ed01f09114567cc8fa939.md
@@ -9,7 +9,7 @@ dashedName: task-88
 
 # --description--
 
-You learned how to talk about an unspecified thing or information with a broad term that didn’t point to a specific item. Let’s review it in this challenge.
+You learned how to talk about an unspecified thing or information with a broad term that didn't point to a specific item. Let's review it in this challenge.
 
 Listen and fill in the blank.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
index 794626ff98..4c893335a0 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661edda6df434c6f2161bea5.md
@@ -39,7 +39,7 @@ This answer limits `AR` to one aspect, which is not what `it is a mix` suggests.
 
 ### --feedback--
 
-`It is a mix` doesn’t mean `AR` is separate from reality.
+`It is a mix` doesn't mean `AR` is separate from reality.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
index 27013db43b..550916df98 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661ee1436ecb9271c66be82c.md
@@ -9,7 +9,7 @@ dashedName: task-92
 
 # --description--
 
-Let’s review what Sophie and Tom talk about.
+Let's review what Sophie and Tom talk about.
 
 Listen and fill in the blanks to complete the dialogue.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
index a77f0cd3b5..b1cb3e9d4f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-popular-trends-in-technology/661eea69ca8a5177320d5e90.md
@@ -9,7 +9,7 @@ dashedName: task-97
 
 # --description--
 
-Let’s review what Sophie and Tom talk about, to understand how AR works.
+Let's review what Sophie and Tom talk about, to understand how AR works.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
index 238d994286..1371cfb6a4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22d1aeb5ecf1d590d30bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-6
 ---
 
-<!-- (Audio) Sophie: No, I haven’t seen her yet. What can you tell me about her? -->
+<!-- (Audio) Sophie: No, I haven't seen her yet. What can you tell me about her? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
index 9c22c387e3..c30c1dcfec 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b22e5388370c209a6b0b73.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Sophie: No, I haven’t seen her yet. What can you tell me about her? -->
+<!-- (Audio) Sophie: No, I haven't seen her yet. What can you tell me about her? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
index 3dc55c5e0f..a8a9cf5851 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25b541262654062a21e74.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-13
 ---
 
-<!-- (Audio) Bob: You’ll recognize her right away. -->
+<!-- (Audio) Bob: You'll recognize her right away. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ The phrase `right away` means quickly or very soon. For instance, `If you find a
 
 ## --sentence--
 
-`You’ll BLANK her BLANK BLANK.`
+`You'll BLANK her BLANK BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
index 25312a6618..d0c4b2e4a9 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65b25bcc98b00d41d06d2a2b.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-14
 ---
 
-<!-- (Audio) Bob: You’ll recognize her right away. -->
+<!-- (Audio) Bob: You'll recognize her right away. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
index 1ae3d4ed36..dd27e7fe51 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d86e08994c4a0436d92766.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-71
 ---
 
-<!-- (Audio) Tom: Ah, speaking of procedures, is there anything he’s told you that we need to do when it comes to office security? -->
+<!-- (Audio) Tom: Ah, speaking of procedures, is there anything he's told you that we need to do when it comes to office security? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
index dbe75f0260..041180b2a7 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65d89562dff69551e7683df3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-82
 ---
 
-<!-- (Audio) Bob: I also can’t disclose sensitive information to anyone outside of the company. -->
+<!-- (Audio) Bob: I also can't disclose sensitive information to anyone outside of the company. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
index 693c5e9d72..b420fd22f0 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8143ae77767ad914ba4.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-94
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, if you don't eat healthy food or exercise, you might be `neglecting
 
 ## --sentence--
 
-`I also don’t want to BLANK BLANK BLANK, so two months ago I started jogging regularly.`
+`I also don't want to BLANK BLANK BLANK, so two months ago I started jogging regularly.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
index 75b255753c..0028bed138 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daa8cce1b9206995e4aec3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-95
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, if you say `I moved here a year ago`, it means that one year has pa
 
 ## --sentence--
 
-`I also don’t want to neglect my health, so two months BLANK I started jogging regularly.`
+`I also don't want to neglect my health, so two months BLANK I started jogging regularly.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
index f2a02e232f..89cd460774 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65daab9b713d3e6e6272c8bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-97
 ---
 
-<!-- (Audio) Sophie: I also don’t want to neglect my health, so two months ago I started jogging regularly. -->
+<!-- (Audio) Sophie: I also don't want to neglect my health, so two months ago I started jogging regularly. -->
 
 # --description--
 
@@ -21,7 +21,7 @@ Adverbs describe how actions are done. They are often formed by adding `-ly` to
 
 ## --sentence--
 
-`I also don’t want to neglect my health, so two months ago I started BLANK BLANK.`
+`I also don't want to neglect my health, so two months ago I started BLANK BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
index 7f80a0719d..2c369859ad 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dab1186529467ee5e463a7.md
@@ -6,7 +6,7 @@ dashedName: task-99
 ---
 
 <!-- (Audio) Brian: Tell me about your responsibilities beyond work.
-Sophie: Well, I have to make time for my family – that's really important to me. I also don’t want to neglect my health, so two months ago I started jogging regularly. It helps me relax and stay fit. -->
+Sophie: Well, I have to make time for my family – that's really important to me. I also don't want to neglect my health, so two months ago I started jogging regularly. It helps me relax and stay fit. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
index df99b4a4fb..628162dd75 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-roles-and-responsibilies/65dad153fd675cb51e8423b0.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-106
 ---
 
-<!-- (Audio) Sophie: Sometimes, it’s the simple and free things that bring us the result we’re looking for. -->
+<!-- (Audio) Sophie: Sometimes, it's the simple and free things that bring us the result we're looking for. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
index 9741308c91..0ffe6bc690 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6636f834a7b32443a43fa4e0.md
@@ -43,7 +43,7 @@ It disconnects applications from the internet, focusing on internal networks.
 
 ### --feedback--
 
-Serverless computing still uses the internet as part of cloud services; it doesn’t focus on internal networks.
+Serverless computing still uses the internet as part of cloud services; it doesn't focus on internal networks.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
index 5b268a1a15..da642e989c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/663855865f5d53510f9cd9a5.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-38
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
@@ -17,7 +17,7 @@ For example, `He is hearing different opinions on the topic.` It shows he is cur
 
 ## --sentence--
 
-`Sarah, I’m BLANK a lot BLANK AI in programming these days, but I don't know how to use it. Any ideas?`
+`Sarah, I'm BLANK a lot BLANK AI in programming these days, but I don't know how to use it. Any ideas?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
index ccf0cb7fff..b358b37212 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/6638994f7dbcb3548e458202.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-41
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
index 0e0f408b60..0cfe1c0a8f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389a37bc8a4b5539eab451.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-42
 ---
 
-<!-- (Audio) Bob: Sarah, I’m hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
+<!-- (Audio) Bob: Sarah, I'm hearing a lot about AI in programming these days, but I don't know how to use it. Any ideas? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
index cce7ba6d10..1facf5d1cc 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-tech-trends-and-updates/66389e09cec2fa569567b15a.md
@@ -23,7 +23,7 @@ Using a program that automatically improves code efficiency
 
 ### --feedback--
 
-This is an example of AI, as it involves using technology to improve code, aligning with Sarah’s description.
+This is an example of AI, as it involves using technology to improve code, aligning with Sarah's description.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
index c333ed42df..a68a36e742 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556bc95e6ce5d850d37dd07.md
@@ -17,7 +17,8 @@ Instead of saying `It seems like you have a ton of energy this morning`, James c
 
 Here are some more examples:
 
-`She wakes up early every day` - `Early` describes the time of her waking up. `He has a quick shower in the morning` - `Quick` describes the short duration of the shower.
+* `She wakes up early every day` - `Early` describes the time of her waking up.
+* `He has a quick shower in the morning` - `Quick` describes the short duration of the shower.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
index 5f8cc58e67..ac5f047e0f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6556be93f9fcb88ac9e88b0d.md
@@ -13,9 +13,12 @@ Idiomatic expressions are phrases where the words together have a different mean
 
 `A ton of energy` is an idiomatic expression meaning having a lot of energy, similar to saying `loads of energy`.
 
-Another expression would be `I slept like a rock,` which means sleeping very deeply. Here are some more examples of Idiomatic Expressions:
+Another expression would be `I slept like a rock,` which means sleeping very deeply. Here are some more examples of idiomatic expressions:
 
-`She's feeling blue today.` (feeling sad) `This math problem is a piece of cake.` (very easy) `He's in hot water now.` (in trouble) `They see eye to eye.` (agree with each other)
+* `She's feeling blue today.` (feeling sad)
+* `This math problem is a piece of cake.` (very easy)
+* `He's in hot water now.` (in trouble)
+* `They see eye to eye.` (agree with each other)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
index eddc296afe..3cd1c2d89e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655792631f21afaa40c611e1.md
@@ -13,9 +13,8 @@ The words `before` and `after` are used to describe the order of events in time.
 
 `Before` is used to talk about something that happens earlier than another event, and `after` is used for something that happens later. 例如：
 
-`I brush my teeth before I have breakfast` (Brushing teeth happens first)
-
-`I go to work after I have breakfast` (Going to work happens later)
+* `I brush my teeth before I have breakfast` (Brushing teeth happens first)
+* `I go to work after I have breakfast` (Going to work happens later)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
index 094b3b25b6..bf0ff8694d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557985a95ab6db1c4a31b6c.md
@@ -9,7 +9,10 @@ dashedName: task-14
 
 The verb `take` is used in many common English expressions. When `take` is used with different nouns, it can have special meanings. 举个例子：
 
-`Take a shower` means to shower. `Take a walk` means to go for a walk. `Take a nap` means to sleep for a little while. `Take a chance` means to try something that might be risky.
+* `Take a shower` means to shower.
+* `Take a walk` means to go for a walk.
+* `Take a nap` means to sleep for a little while.
+* `Take a chance` means to try something that might be risky.
 
 These phrases are like fixed recipes in English; the words go together to mean something specific.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
index 1bed07f046..bcc79f9d70 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557995f0d97e1b2837a3081.md
@@ -9,7 +9,9 @@ dashedName: task-15
 
 Remember, adjectives are words that describe or give more information about nouns. They can tell you how something looks, feels, or acts. 举个例子：
 
-`Quick` describes something done in a short time. `Relaxed` describes something or someone calm and not strict. `Alert` describes being fully aware and paying attention.
+* `Quick` describes something done in a short time.
+* `Relaxed` describes something or someone calm and not strict.
+* `Alert` describes being fully aware and paying attention.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
index a7cb0c838a..a1deaaf7e4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/65579a0e1613d5b31a034ee5.md
@@ -9,7 +9,9 @@ dashedName: task-16
 
 The verb `get` is very common in English and has many uses. It can mean to receive, become, or reach a state. 举个例子：
 
-`Get dressed` means to put on clothes. `Get ready` means to prepare for something. `Get tired` means to start feeling tired.
+* `Get dressed` means to put on clothes.
+* `Get ready` means to prepare for something.
+* `Get tired` means to start feeling tired.
 
 Understanding how `get` is used will help you express different actions and states in English.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
index df8370ea5a..bd821c15d5 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557aee56ed7dcb5506a66d6.md
@@ -9,7 +9,8 @@ dashedName: task-19
 
 A `dress code` is a set of rules about what you should wear in a certain place or event. Different places have different dress codes. 举个例子：
 
-A `relaxed dress code` means you can wear casual, comfortable clothes. A `formal dress code` requires more official and elegant clothes.
+* A `relaxed dress code` means you can wear casual, comfortable clothes.
+* A `formal dress code` requires more official and elegant clothes.
 
 Note: Remember, dress codes can vary depending on the culture and the specific place.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
index 910e97ba55..cca71eb9e7 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d6a229e541bfde2c560d.md
@@ -13,7 +13,8 @@ dashedName: task-26
 
 `Late` means doing something after the expected or usual time, like arriving late to a meeting. Here are some examples:
 
-`She likes to start her day early with a jog.` `He often works late at the office.`
+* `She likes to start her day early with a jog.`
+* `He often works late at the office.`
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
index 43e6326d51..98cf0a85bd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557d782bc7613c06aa7dafd.md
@@ -11,7 +11,8 @@ dashedName: task-27
 
 The word `never` is an adverb used to mean `not at any time` or `not ever`. It's often used to talk about things that someone doesn't do or hasn't done. 举个例子：
 
-`I have never been to Australia.` (this means the person has not visited Australia at any time) `She never eats fast food.` (this means she does not eat fast food at any time)
+* `I have never been to Australia.` (this means the person has not visited Australia at any time)
+* `She never eats fast food.` (this means she does not eat fast food at any time)
 
 The word `thought` is the past tense of `think`. `Thought of that` means to have considered or come up with an idea in the past. For example:
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
index cf1c5b16a4..a3cbffae05 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557db51366bf6c15a966fb0.md
@@ -11,11 +11,9 @@ dashedName: task-28
 
 When a verb follows a preposition, it often takes the `-ing` form, known as a gerund. Gerunds are verbs acting as nouns. This rule is common in many English expressions. 举个例子：
 
-`After eating dinner, we watched a movie.` (`eating` follows the preposition `after`)
-
-`She is interested in learning Spanish.` (`learning` follows the preposition `in`)
-
-`Before going to bed, I like to read.` (`going` follows the preposition `before`)
+* `After eating dinner, we watched a movie.` (`eating` follows the preposition `after`)
+* `She is interested in learning Spanish.` (`learning` follows the preposition `in`)
+* `Before going to bed, I like to read.` (`going` follows the preposition `before`)
 
 
 # --questions--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
index 74abdc3ea9..560f31d2ac 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dc1aa6be93c1eb4e9efb.md
@@ -11,9 +11,8 @@ dashedName: task-29
 
 The word `if` is often used in conditional statements to talk about a possible situation and its consequences. 举个例子：
 
-`If it rains, I will bring an umbrella.` (The action of bringing an umbrella depends on the possibility of rain.)
-
-`If you need help, just ask.` (The offer to help is conditional on the other person needing it.)
+* `If it rains, I will bring an umbrella.` (The action of bringing an umbrella depends on the possibility of rain.)
+* `If you need help, just ask.` (The offer to help is conditional on the other person needing it.)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
index ed89cc5d71..9a652dc956 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557dea8c258c1c2a767deb7.md
@@ -13,9 +13,8 @@ The word `even` is used to add emphasis to a statement, often highlighting somet
 
 When combined with `before` in the phrase `even before`, it emphasizes that an action or event occurs earlier than usual or expected, adding a sense of surprise or admiration. 例如：
 
-`Even before the sun rises, she starts her workout.` (emphasizes that her workout begins unusually early)
-
-`He finished the project even before the deadline.` (implies that finishing before the deadline is surprisingly early)
+* `Even before the sun rises, she starts her workout.` (emphasizes that her workout begins unusually early)
+* `He finished the project even before the deadline.` (implies that finishing before the deadline is surprisingly early)
 
 In conversation, using `even` can express that something is more than what might be considered normal or usual. It makes the statement stronger.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
index 026dba2ea0..07936f106c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e0adbee371c3ac455a01.md
@@ -11,7 +11,8 @@ dashedName: task-32
 
 You probably remember that `I'll` is the contracted form of `I will`, a modal verb used to express future intentions, decisions, or plans made at the moment of speaking. 举个例子：
 
-`I'll call you tomorrow.` (future intention to call) `I'll take the bus to work.` (decision made about taking the bus)
+* `I'll call you tomorrow.` (future intention to call)
+* `I'll take the bus to work.` (decision made about taking the bus)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
index ea6b5bfb6b..189614775f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/6557e5c6a854bfcad48808c4.md
@@ -15,7 +15,7 @@ This challenge is designed to summarize and reinforce the understanding of James
 
 ## --sentence--
 
-`Sarah has a consistent morning routine. She BLANK up around 7 AM and starts her day by BLANK a bit. After making a cup of BLANK, she takes a BLANK shower and goes to the kitchen to BLANK a balanced breakfast. This helps her stay BLANK during the morning. She checks her BLANK and messages before BLANK to work. She likes to stay BLANK about the day’s tasks. James thinks her productivity BLANK coming to work is impressive and says he BLANK try some of her habits to become more BLANK in the morning as well.`
+`Sarah has a consistent morning routine. She BLANK up around 7 AM and starts her day by BLANK a bit. After making a cup of BLANK, she takes a BLANK shower and goes to the kitchen to BLANK a balanced breakfast. This helps her stay BLANK during the morning. She checks her BLANK and messages before BLANK to work. She likes to stay BLANK about the day's tasks. James thinks her productivity BLANK coming to work is impressive and says he BLANK try some of her habits to become more BLANK in the morning as well.`
 
 ## --blanks--
 
@@ -87,7 +87,7 @@ Going away from a place, in this case, her home. Try finishing the word with `in
 
 ### --feedback--
 
-Having knowledge or being aware of the day's tasks after acessing her email.
+Having knowledge or being aware of the day's tasks after accessing her email.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
index 1c72415d9d..e5c960336b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a235215bab7fa2a2e4bb7.md
@@ -11,7 +11,8 @@ The `y` ending can also turn nouns into adjectives that describe a characteristi
 
 `Healthy` comes from the noun `health` and means having or showing good health. Like `sleepy`, the `y` changes the noun into an adjective. Other examples:
 
-`Wealthy` (having a lot of wealth), `Cloudy` (full of or covered with clouds)
+* `Wealthy` (having a lot of wealth)
+* `Cloudy` (full of or covered with clouds)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
index 1b0e114c4b..0d8a9db177 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a33bb8f2009ff7a7abfaa.md
@@ -15,7 +15,9 @@ There's a difference between `may be` and `maybe`. Let's take a closer look.
 
 `Maybe` is an adverb indicating uncertainty or possibility. For example:
 
-`It may be raining outside.` (suggests a possibility of rain) `Maybe I will go out later.` (expresses uncertainty about going out) `May I ask a question?` (Asks for the permission to speak)
+* `It may be raining outside.` (suggests a possibility of rain)
+* `Maybe I will go out later.` (expresses uncertainty about going out)
+* `May I ask a question?` (Asks for the permission to speak)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
index 8afdad3c97..9892028d60 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a367638e3f401eb0235ea.md
@@ -11,7 +11,7 @@ dashedName: task-45
 
 `I feel groggy if I don't get enough sleep` (describes feeling tired due to lack of sleep)
 
-`Sluggish` is an adjective that describes a feeling of low energy, slow movement, or a lack of alertness. It's often used when someone feels tired, lethargic, or not able to think or move quickly. This term can apply to both physical and mental states. Here are some examples:
+`Sluggish` is an adjective that describes a feeling of low energy, slow movement, or a lack of alertness. It's often used when someone feels tired, lethargic, or not able to think or move quickly. This term can apply to both physical and mental states. Here is an example:
 
 `The computer was running sluggishly, taking a long time to respond` (describes slow performance, used metaphorically for an inanimate object)
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
index 755e4ada7f..3ae833f321 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3789069fc902eb2aaa4b.md
@@ -11,9 +11,8 @@ dashedName: task-46
 
 The verb `to ring` refers to the action of making a sound, particularly a clear resonant sound. It's commonly used to describe the sound made by bells, telephones, or alarms. 举个例子：
 
-`The phone will ring at 9 AM to remind me of the meeting.` (indicates the phone making a sound)
-
-`I wake up when my alarm clock rings.` (describes the alarm making a sound to wake someone up)
+* `The phone will ring at 9 AM to remind me of the meeting.` (indicates the phone making a sound)
+* `I wake up when my alarm clock rings.` (describes the alarm making a sound to wake someone up)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
index d5142d973f..905603774c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a39242197c9040ddedef2.md
@@ -11,9 +11,8 @@ dashedName: task-47
 
 The imperative form is used to give orders, instructions, or advice. It often starts with a verb in the base form for positive commands, or with `don't`/`do not` for negative commands. Understanding this form is important for following or giving instructions. 举个例子：
 
-`Drink plenty of water` (positive command)
-
-`Don't stay up too late` (negative command)
+* `Drink plenty of water` (positive command)
+* `Don't stay up too late` (negative command)
 
 # --fillInTheBlank--
 
@@ -27,7 +26,7 @@ The imperative form is used to give orders, instructions, or advice. It often st
 
 ### --feedback--
 
-Base form of the verb used for giving a positive command. 这个词首字母要大写。
+Base form of the verb used for giving a positive command. This word is capitalized.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
index 494d664acd..0a9a72fffb 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a3cc030fb970687d6444d.md
@@ -9,9 +9,8 @@ dashedName: task-50
 
 The word `later` is the comparative form of `late`, used to indicate a time or event that is after the expected, usual, or planned time. Comparatives are used to compare two things. 举个例子：
 
-`We will leave later than planned.` (means leaving after the planned time)
-
-`She arrived later than me.` (indicates she arrived after the speaker)
+* `We will leave later than planned.` (means leaving after the planned time)
+* `She arrived later than me.` (indicates she arrived after the speaker)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
index 63b91a2578..10a1168c12 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4a5af997350c187bd779.md
@@ -11,9 +11,8 @@ dashedName: task-52
 
 `Who` can be used as a relative pronoun to introduce a clause that gives more information about a person or people. It links a description or action specifically to a person. 举个例子：
 
-`She is someone who always knows what to do.` (links the knowing what to do to the person)
-
-`He's the data analyst who helped me a lot.` (describes the data analyst with the action of helping)
+* `She is someone who always knows what to do.` (links the knowing what to do to the person)
+* `He's the data analyst who helped me a lot.` (describes the data analyst with the action of helping)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
index 6f4eb4a783..f79353e9c9 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a4fc35818d90f73f63ba0.md
@@ -11,9 +11,8 @@ dashedName: task-54
 
 The verb `to rush` means to do something or move quickly or in a hurry, often due to time pressure. It's used to describe actions done with urgency. 举个例子：
 
-`I had to rush to catch the train.` (means moving quickly to not miss the train)
-
-`Don't rush your decision.` (suggests taking time to decide)
+* `I had to rush to catch the train.` (means moving quickly to not miss the train)
+* `Don't rush your decision.` (suggests taking time to decide)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
index b8a24b731b..c62470781b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a51cff12fb7117aa611f9.md
@@ -11,9 +11,8 @@ dashedName: task-56
 
 `Breathing exercises` are practices where you consciously control your breathing pattern. They are often used for relaxation, stress management, and to `clear your mind` – which means to free your mind from stress or worry. 举个例子：
 
-`Deep breathing helps to calm your nerves.` (uses controlled breathing for relaxation)
-
-`Clear your mind before the test to focus better.` (freeing the mind from distractions)
+* `Deep breathing helps to calm your nerves.` (uses controlled breathing for relaxation)
+* `Clear your mind before the test to focus better.` (freeing the mind from distractions)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
index 39f58f1562..8b693a469f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a54506b259313b2d59577.md
@@ -17,7 +17,7 @@ Conditional sentences often use `if` to describe a situation (cause) that will l
 
 ## --text--
 
-What is the cause and consequence of the expert’s advice?
+What is the cause and consequence of the expert's advice?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
index b69564f4fd..e7cf8023dd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5bfadf47e1199f9b65eb.md
@@ -11,11 +11,13 @@ dashedName: task-62
 
 Past tense verbs are used to talk about actions that happened in the past. Some verbs change their form in the past tense, like `say` to `said`. 举个例子：
 
-`Yesterday, she said she would join us` (Past tense of `say`) `He said the meeting was at noon` (Describes a past statement about the meeting time)
+* `Yesterday, she said she would join us` (Past tense of `say`)
+* `He said the meeting was at noon` (Describes a past statement about the meeting time)
 
-Another example of irregular verb is `tell`, which becomes `told` in the past tense. For example:
+Another example of an irregular verb is `tell`, which becomes `told` in the past tense. For example:
 
-`He told me about the plan last week` (Past tense of `tell`) `Last night, they told stories about our last project` (Using `told` to describe a past action)
+* `He told me about the plan last week` (Past tense of `tell`)
+* `Last night, they told stories about our last project` (Using `told` to describe a past action)
 
 Don't worry if irregular verbs seem tricky; with practice, you'll get the hang of them!
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
index 0a76f81d5c..963e21d55f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a5e76ca6f8d1b1a88e0f1.md
@@ -11,15 +11,13 @@ dashedName: task-63
 
 Regular verbs usually add `-ed` to form the past tense. This can also result in some adjectives as in the dialogue.
 
-`Complicated` is the past tense form of the regular verb `complicate`, as well as the adjective that means something is not simple or easy to do. One example of it as a verb can be: `The problems on the road complicated our trip.`
-
-`I walked to the store` (Past tense of `walk`)
-
-`She cleaned her room yesterday` (Past tense of `clean`)
+* `Complicated` is the past tense form of the regular verb `complicate`, as well as the adjective that means something is not simple or easy to do. One example of it as a verb can be: `The problems on the road complicated our trip.`
+* `I walked to the store` (Past tense of `walk`)
+* `She cleaned her room yesterday` (Past tense of `clean`)
 
 Extra note to help with the audio:
 
-`Running around` means moving about in a hurried or energetic way, often chaotically. 例如：
+`Running around` means moving about in a hurried or energetic way, often chaotically. For example:
 
 `The kids are running around the playground`
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
index 8e075f537f..7ed16d6426 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a78fdfac0e22b0c400e72.md
@@ -9,7 +9,7 @@ dashedName: task-64
 
 # --description--
 
-Listen to the audio and complente the sentence below.
+Listen to the audio and complete the sentence below.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
index f9823d54b5..73eaccb2ed 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a79e595bd202b4cd5e2d2.md
@@ -11,7 +11,8 @@ dashedName: task-65
 
 The modal verb `could` is often used to politely ask for help or suggestions. 举个例子：
 
-`Could you show me how to do this?` (asking for help in a polite way) `What could I do to improve my skills?` (asking for suggestions)
+* `Could you show me how to do this?` (asking for help in a polite way)
+* `What could I do to improve my skills?` (asking for suggestions)
 
 Understanding how to use `could` is important to create polite requests or questions.
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
index 5d143c6428..3fe3c2b5d8 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7c5211e5252cf8a4ed01.md
@@ -11,15 +11,13 @@ dashedName: task-67
 
 The modal verb `can` is used to express ability, possibility, or to ask permission. It's a versatile verb that's commonly used in everyday conversation. 举个例子：
 
-`I can speak three languages` (ability)
+* `I can speak three languages` (ability)
+* `Can I borrow your pen?` (asking permission)
 
-`Can I borrow your pen?` (asking permission)
+The word `tough` means difficult or challenging. It's often used to describe situations that require a lot of effort or endurance. For example:
 
-The word `tough` means difficult or challenging. It's often used to describe situations that require a lot of effort or endurance. 例如：
-
-`The API test was really tough` (indicates the test was challenging)
-
-`They'are going through a tough time right now` (implies a period of difficulty)
+* `The API test was really tough` (indicates the test was challenging)
+* `They're going through a tough time right now` (implies a period of difficulty)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
index 0432495669..c9abf2424f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a7d752ffc542e5874af0b.md
@@ -15,9 +15,10 @@ Understanding the difference between `can` and `could` is crucial in English.
 
 `Could` is often used for polite requests, suggestions, or to talk about ability in the past. For example:
 
-`I can code very well` (present ability) `Can I leave early today?` (asking for permission)
-
-`Could you pass me that tool, please?` (polite request) `When I first learned programming, I could spend hours debugging without getting tired` (past ability)
+* `I can code very well` (present ability)
+* `Can I leave early today?` (asking for permission)
+* `Could you pass me that tool, please?` (polite request)
+* `When I first learned programming, I could spend hours debugging without getting tired` (past ability)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
index e5d56a41bc..0177d0a6b0 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a896f31ca6a32913d1106.md
@@ -11,7 +11,7 @@ dashedName: task-69
 
 The words you use in a sentence can make a big difference in modulating the message it delivers. Let's look at some examples to understand this better.
 
-Prepositions like `by` affect the verb that comes after, When you use `by`, it often needs the verb to end with `-ing`. 这是一个示例：
+Prepositions like `by` affect the verb that comes after. When you use `by`, it often needs the verb to end with `-ing`. 这是一个示例：
 
 `I improved by practicing daily` (This means I got better at something because I practiced every day. You use the preposition `by` to show how something is done)
 
@@ -21,7 +21,8 @@ Adjectives can also change the meaning of the following word by adding details t
 
 Even words like `family` and `outdoor` can be used as adjectives, they describe the noun that follows them. 例如：
 
-`Family activities bring everyone together.` (`family` describes the type of activities) `Outdoor sports are enjoyable in good weather.` (`outdoor` describes where the sports happen)
+* `Family activities bring everyone together.` (`family` describes the type of activities)
+* `Outdoor sports are enjoyable in good weather.` (`outdoor` describes where the sports happen)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
index 047dbf8623..03e401fccd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655a8c9d2a0ea136a0fd3631.md
@@ -12,9 +12,8 @@ dashedName: task-72
 
 `While` is used in sentences to indicate that two actions or events are happening at the same time. It often sets the scene for one action that occurs during the time another action is taking place. 例如：
 
-`While I cook, I listen to music` (I listen to music at the same time as I am cooking)
-
-`She reads while waiting for the bus` (She reads during the time she is waiting)
+* `While I cook, I listen to music` (I listen to music at the same time as I am cooking)
+* `She reads while waiting for the bus` (She reads during the time she is waiting)
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
index b7ff58ac8d..19118c9527 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b266c2ea5495f43b97ea5.md
@@ -39,7 +39,7 @@ That is the wrong time.
 
 ### --feedback--
 
-That’s the wrong time of the day.
+That's the wrong time of the day.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
index a8fb4b11aa..5c36886336 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b2b5cc4ea3062f9811dec.md
@@ -14,9 +14,8 @@ A `night owl` is someone who stays up late. For example: `He's a night owl, ofte
 
 `Be back` means to return, and `tops` is used informally to indicate the maximum amount or time. For example:
 
-`I'll be back by dinner` (returning before a specific time)
-
-`The meeting will last one hour, tops` (no longer than one hour)
+* `I'll be back by dinner` (returning before a specific time)
+* `The meeting will last one hour, tops` (no longer than one hour)
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
index 4eaa07945b..fb7399551a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b3197bb31ca670081f6d7.md
@@ -19,7 +19,7 @@ Long adjectives: Just add `the most` before the adjective.
 
 `This is the most interesting book I've read.` (`the most` + `interesting`)
 
-This is an introduction to these adjectives. You’ll learn more in the future.
+This is an introduction to these adjectives. You'll learn more in the future.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
index 0a741780cf..c692c5191b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/655b363149b5ba6b15434574.md
@@ -39,7 +39,7 @@ Sophie specifically says she sleeps `until 9:30`, not `10:00`.
 
 ---
 
-`She wakes up early, goes out, and spends the afternoon reading at home`
+`She wakes up early, goes jogging, and spends the afternoon reading at home`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
index 5a061f5e27..01010895d1 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-document-code-for-a-project/65e46524078f872c3a871f9f.md
@@ -41,7 +41,7 @@ Transparent
 
 ### --feedback--
 
-It’s another meaning of `clear`, referring to something allowing light to pass through so that objects behind can be distinctly seen. In documentation, `clear` is about understandability, not transparency.
+It's another meaning of `clear`, referring to something allowing light to pass through so that objects behind can be distinctly seen. In documentation, `clear` is about understandability, not transparency.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
index 7d43ee80b5..b5b90ec310 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661757150c7a75961a574a39.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Bob: Thanks for your feedback. I’ll share this feedback with Tom and give him some extra time to work on these colors and fonts. -->
+<!-- (Audio) Bob: Thanks for your feedback. I'll share this feedback with Tom and give him some extra time to work on these colors and fonts. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
index b9a76f5429..c9f4eec380 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66175792ec93b19771c55c62.md
@@ -29,7 +29,7 @@ This option is incorrect. Sophie's comments suggest she sees areas for improveme
 
 ---
 
-She doesn’t know and needs more time to form an opinion.
+She doesn't know and needs more time to form an opinion.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
index 2a2e542d62..02e0e92150 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661772551b64ddd40c834b1e.md
@@ -35,7 +35,7 @@ Yes, she completely agrees with Brian and suggests additional features for the m
 
 ### --feedback--
 
-Sarah's statement indicates disagreement with Brian’s focus on the mobile app, as she believes the web app requires more attention.
+Sarah's statement indicates disagreement with Brian's focus on the mobile app, as she believes the web app requires more attention.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
index 0e528326a7..625f758645 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661796e4635cd3eb1c8c78a4.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-14
 ---
 
-<!-- (Audio) Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
@@ -19,7 +19,7 @@ To `allocate` means to distribute or assign resources or responsibilities to dif
 
 ## --sentence--
 
-`Well, here’s what I think we could do. Why don’t we BLANK resources to both platforms BLANK? We could give equal priority to BLANK the web app and the mobile app.`
+`Well, here's what I think we could do. Why don't we BLANK resources to both platforms BLANK? We could give equal priority to BLANK the web app and the mobile app.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
index 4e09b8e368..58ef00d0bd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/661797b505f2d3ed4b170d74.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-15
 ---
 
-<!-- (Audio) Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
index b0ffb9dd7a..64092c83de 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/66179829f664e3ee9b42ce5f.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-16
 ---
 
-<!-- (Audio) Sarah: I'm not sure I agree with that, Brian. The web app needs attention. It has more users. Prioritizing the web app makes more sense given its larger user base. Brian: Well, here’s what I think we could do. Why don’t we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
+<!-- (Audio) Sarah: I'm not sure I agree with that, Brian. The web app needs attention. It has more users. Prioritizing the web app makes more sense given its larger user base. Brian: Well, here's what I think we could do. Why don't we allocate resources to both platforms equally? We could give equal priority to both the web app and the mobile app. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
index 92d8b436f6..d8d0f27e07 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617994636fa13f16060b12b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-17
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal priority for a while. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal priority for a while. -->
 
 # --description--
 
@@ -23,7 +23,7 @@ Understanding these terms is key for discussing work plans and responsibilities.
 
 ## --sentence--
 
-`I BLANK think we should BLANK more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal BLANK for a while.`
+`I BLANK think we should BLANK more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal BLANK for a while.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
index 06bcab931b..ae12baa5c2 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617aea9ccdd68f7088368d1.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-18
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
index 21f5fc74a5..490e2fd867 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617af3ab73475f87b53a59d.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-19
 ---
 
-<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you’re coming from, Brian. I think we can try giving equal priority for a while. -->
+<!-- (Audio) Sarah: I still think we should dedicate more time to the web app, but I see where you're coming from, Brian. I think we can try giving equal priority for a while. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
index 2c2b75397c..d129d5b178 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b500a7049808f3a2a593.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-29
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ Focus on the word `greater`. `Greater` is used to describe something that is mor
 
 ## --sentence--
 
-`I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a BLANK chance of success with it.`
+`I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a BLANK chance of success with it.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
index a1e92f740a..ade52e374b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b53e5eda8e09c6c67d28.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-30
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
index 6346083145..034116cded 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b674eb480b0c8d3d6031.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-31
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
index 2c2e44d1b6..039cef7e99 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-express-agreement-or-disagreement/6617b81046e7b11287a7bef8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we’ll have a greater chance of success with it. -->
+<!-- (Audio) Sarah: I see what you mean. I strongly feel that Agile aligns with our team's strengths, though. I think we'll have a greater chance of success with it. -->
 
 # --description--
 
@@ -27,7 +27,7 @@ Sarah expresses a strong belief in Agile's alignment with the team's strengths.
 
 ---
 
-She disagrees with using Agile and thinks it won’t be successful.
+She disagrees with using Agile and thinks it won't be successful.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
index 39eeba344d..f89f23bc3a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/658157d104bbc92a95147e45.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
index ed8fa7575d..0b950ca78f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9a04edb4d56c8390bc3a.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-31
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ A `glitch` is a small problem that stops something from working right. Like when
 
 ## --sentence--
 
-`Yeah, technical BLANK are complicated and there’s not much we can do other than BLANK to solve them.`
+`Yeah, technical BLANK are complicated and there's not much we can do other than BLANK to solve them.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
index 36dd2d586f..12044b5a8d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-have-a-conversation-about-preferences-and-motivations/65fc9ab3635ebc6d167f86e6.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-33
 ---
 
-<!-- (Audio) Maria: Yeah, technical glitches are complicated and there’s not much we can do other than try to solve them. -->
+<!-- (Audio) Maria: Yeah, technical glitches are complicated and there's not much we can do other than try to solve them. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
index 6fecef3c11..fad6ce26b0 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/656bd968e52c34220164de8d.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-32
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
index 7be98bebd8..851ec95fa9 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84dad1595bbbc2e9cd895.md
@@ -5,11 +5,11 @@ challengeType: 22
 dashedName: task-34
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
-People often use `have already` to talk about something they have done before now, and `have never` to talk about something they have not done at any time in the past. Let’s practice using these phrases.
+People often use `have already` to talk about something they have done before now, and `have never` to talk about something they have not done at any time in the past. Let's practice using these phrases.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
index 5b2da21e64..1e8026833d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a84e922382a7bd112057ad.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-35
 ---
 
-<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I’ve already tried a few things to solve it. -->
+<!-- (Audio) Sarah: No problem, Tom. I noticed the issue you mentioned, and I've already tried a few things to solve it. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
index 5d2e2c04d5..6713e75053 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a85090914872be8ca97793.md
@@ -19,7 +19,7 @@ What is Tom asking Sarah about?
 
 ## --answers--
 
-Why she didn’t solve the issue
+Why she didn't solve the issue
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
index 38e1ae0830..fd69b98685 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65a9457392dfd7d564bc940e.md
@@ -27,7 +27,7 @@ It caused more problems, showing the current version is the issue.
 
 ### --feedback--
 
-Sarah said that going back didn’t solve the issue, not that it caused more problems.
+Sarah said that going back didn't solve the issue, not that it caused more problems.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
index 6cd03e3d42..ee99879008 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28bbe803df52c4e76dd15.md
@@ -13,7 +13,7 @@ Modal verbs like `might` and `can` are used to express possibility and ability.
 
 `Might` is used for something that could happen or be true, like saying, `It might rain today`.
 
-`Can` is used to talk about someone's ability to do something, like, `She can speak three languages`. Let’s practice using these words in sentences.
+`Can` is used to talk about someone's ability to do something, like, `She can speak three languages`. Let's practice using these words in sentences.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
index e3d5b6e2ee..2deb62cf81 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b28f840a0d962f2240e800.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-47
 ---
 
-<!-- (Audio) Sarah: Agreed. I’ll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
+<!-- (Audio) Sarah: Agreed. I'll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
 
 # --description--
 
@@ -15,7 +15,7 @@ In this task, you'll practice filling in key verbs and adjectives used in techni
 
 ## --sentence--
 
-`Agreed. I’ll BLANK a PR with the rollback and some BLANK logs for BLANK. That may help us find what the problem is.`
+`Agreed. I'll BLANK a PR with the rollback and some BLANK logs for BLANK. That may help us find what the problem is.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
index ad6a406201..80a091d208 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2af1545e34334b7573de9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-48
 ---
 
-<!-- (Audio) Sarah: Agreed. I’ll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
+<!-- (Audio) Sarah: Agreed. I'll create a PR with the rollback and some additional logs for debugging. That may help us find what the problem is. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
index c88c9cc689..9fd98e8f24 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2b2781c59e837a5e0beb2.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-51
 ---
 
-<!-- (Audio) Maria: Tom, I saw that you’ve fixed the issue on GitHub. Great job! -->
+<!-- (Audio) Maria: Tom, I saw that you've fixed the issue on GitHub. Great job! -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
index 32f6b903f4..3e3b843c39 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-help-a-coworker-troubleshoot-on-github/65b2bb073ac8d03dfe507810.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-60
 ---
 
-<!-- (Audio) Tom: It happens to all of us, Maria. I’ll make sure to document this for future reference, so we won't run into the same problem again. -->
+<!-- (Audio) Tom: It happens to all of us, Maria. I'll make sure to document this for future reference, so we won't run into the same problem again. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
index d1b4bbed14..0b36f45315 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6620e51c36d18c137b887081.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-29
 ---
 
-<!-- (Audio) Tom: I see. So by explaining the complex parts with comments, I’ll help other people understand the code. Is that right? Sarah: Precisely. It's a form of documentation within the code. Great job grasping these concepts! -->
+<!-- (Audio) Tom: I see. So by explaining the complex parts with comments, I'll help other people understand the code. Is that right? Sarah: Precisely. It's a form of documentation within the code. Great job grasping these concepts! -->
 
 # --description--
 
@@ -27,7 +27,7 @@ Writing complex code without comments
 
 ### --feedback--
 
-Tom’s focus is on explaining complex code with comments, not writing it without comments.
+Tom's focus is on explaining complex code with comments, not writing it without comments.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
index bc1aeed0c9..4cb8f054a9 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-offer-technical-support-and-guidance/6622346c798d906ee4d31846.md
@@ -37,7 +37,7 @@ In this context, it refers to the final point Maria wants to make.
 
 ### --feedback--
 
-It describes the team’s nature of working together and helping each other.
+It describes the team's nature of working together and helping each other.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
index 0588a1021a..5de5786ae6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-read-and-understand-code-documentation/65fd5f2abfdbc510942d76f8.md
@@ -35,7 +35,7 @@ Because it's a standard practice to read everything in order
 
 ### --feedback--
 
-The suggestion isn’t about reading everything in order but about finding specific information efficiently.
+The suggestion isn't about reading everything in order but about finding specific information efficiently.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
index 7ae6476494..d5a4710cfc 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661005bbe1801e14c303a57a.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-4
 ---
 
-<!-- (Audio) Bob: That's great, Sarah! I’ve also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
+<!-- (Audio) Bob: That's great, Sarah! I've also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
 
 # --description--
 
@@ -17,7 +17,7 @@ dashedName: task-4
 
 ## --sentence--
 
-`That's great, Sarah! I’ve also been BLANK busy this week. I tested the new BLANK we added last week. It BLANK to be working well. And I found a few BLANK issues that we need to fix.`
+`That's great, Sarah! I've also been BLANK busy this week. I tested the new BLANK we added last week. It BLANK to be working well. And I found a few BLANK issues that we need to fix.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
index 95f01ebace..ab08badfed 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66100646290700150caff732.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-5
 ---
 
-<!-- (Audio) Bob: That's great, Sarah! I’ve also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
+<!-- (Audio) Bob: That's great, Sarah! I've also been pretty busy this week. I tested the new feature we added last week. It seems to be working well. And I found a few minor issues that we need to fix. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
index b482a3aba7..526bb211a6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661216bbf6d9a51b409172a8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-7
 ---
 
-<!-- (Audio) Sarah: Thanks for catching those. As for me, I also finished the market research report. I presented it to the team yesterday. We’ve gathered valuable data that will help us make informed decisions. -->
+<!-- (Audio) Sarah: Thanks for catching those. As for me, I also finished the market research report. I presented it to the team yesterday. We've gathered valuable data that will help us make informed decisions. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
index 3eef7c2b3c..42b416b659 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/661256fe823f142fb9858beb.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-22
 ---
 
-<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I’m working on fully updated, and I intend to improve our customer support process based on the training I received. -->
+<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I'm working on fully updated, and I intend to improve our customer support process based on the training I received. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
index ccc0e31df6..267e755597 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-progress-and-accomplishments/66126744e24b0a31255718a7.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-23
 ---
 
-<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I’m working on fully updated, and I intend to improve our customer support process based on the training I received. -->
+<!-- (Audio) Brian: Of course. By the end of the quarter, I plan to have the documentation I'm working on fully updated, and I intend to improve our customer support process based on the training I received. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
index 192720a711..c8ac8f8876 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579cf81a9cec6d21f872959.md
@@ -9,7 +9,7 @@ dashedName: task-6
 
 # --description--
 
-The phrase `a fresh pair of eyes` is an idiomatic expression meaning to have someone new look at something to offer a different perspective. It’s often used when someone has been working on a problem for a long time and needs an outside opinion. The modal verb `may` suggests possibility or likelihood but not certainty.
+The phrase `a fresh pair of eyes` is an idiomatic expression meaning to have someone new look at something to offer a different perspective. It's often used when someone has been working on a problem for a long time and needs an outside opinion. The modal verb `may` suggests possibility or likelihood but not certainty.
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
index 3420065149..32ce8ef08a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d002683211d5c7d13ef3.md
@@ -9,7 +9,7 @@ dashedName: task-8
 
 # --description--
 
-Sophie implies, or suggests without directly stating, that she needs help with her coding problem. To 'imply' something means to suggest it in an indirect way. For example, saying 'It’s getting late' can imply that it's time to leave, without saying it directly.
+Sophie implies, or suggests without directly stating, that she needs help with her coding problem. To 'imply' something means to suggest it in an indirect way. For example, saying 'It's getting late' can imply that it's time to leave, without saying it directly.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
index 781b9859b8..5d2cc1abdf 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d4ca0578b4e95f1df60e.md
@@ -35,7 +35,7 @@ She should wait until the next meeting
 
 ### --feedback--
 
-Bob’s offer to help is immediate, contingent on Sophie sharing the code, not waiting until the next meeting.
+Bob's offer to help is immediate, contingent on Sophie sharing the code, not waiting until the next meeting.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
index 57051788c3..b0a65686ca 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d539b1e5c2ec64484e49.md
@@ -43,7 +43,7 @@ He doesn't think the problem can be solved
 
 ### --feedback--
 
-Bob’s statement implies he believes there are possible solutions, not that it's unsolvable.
+Bob's statement implies he believes there are possible solutions, not that it's unsolvable.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
index f051cf04a9..d11033e4fe 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579d827ebd50afcacb829fe.md
@@ -44,7 +44,7 @@ He is asking for a break from the meeting
 
 ### --feedback--
 
-Bob’s statement is about making a suggestion, not about taking a break from the meeting.
+Bob's statement is about making a suggestion, not about taking a break from the meeting.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
index 044542abf5..ca5bcc7836 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579dbf6a3e8a5161a592169.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-31
 ---
 
-<!-- (Audio) Bob: I’m sure we'll gain some valuable insights from our discussion. -->
+<!-- (Audio) Bob: I'm sure we'll gain some valuable insights from our discussion. -->
 
 # --description--
 
@@ -43,7 +43,7 @@ He is unsure about the usefulness of the discussion
 
 ### --feedback--
 
-Bob’s statement `I'm sure` shows confidence in the usefulness of the discussion.
+Bob's statement `I'm sure` shows confidence in the usefulness of the discussion.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
index 3d4c40e74f..f06470868d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579ddc94db61d2463022da3.md
@@ -35,7 +35,7 @@ Sophie specifically mentions a coding issue she's been working on, not a differe
 
 ---
 
-She requests Bob’s help on a coding issue she's struggling with
+She requests Bob's help on a coding issue she's struggling with
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
index 22fea697ce..47fb134f10 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579de040244fb274179f001.md
@@ -31,7 +31,7 @@ It means to give someone access to something, here referring to the code.
 
 ### --feedback--
 
-It suggests starting something with enthusiasm, indicating Bob’s readiness to examine the code closely.
+It suggests starting something with enthusiasm, indicating Bob's readiness to examine the code closely.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
index 51293a7ae7..dca3fb71d4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-share-your-progress-in-weekly-stand-up-meetings/6579e17ff05c5d451c2e4f35.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-56
 ---
 
-<!-- (Audio) Sophie: Yeah, consistency is essential. I’ll go ahead and start with defining those coding standards. -->
+<!-- (Audio) Sophie: Yeah, consistency is essential. I'll go ahead and start with defining those coding standards. -->
 
 # --description--
 
@@ -23,7 +23,7 @@ To wait for further instructions about coding standards
 
 ### --feedback--
 
-Sophie’s statement shows she is ready to start working on the standards, not waiting for instructions.
+Sophie's statement shows she is ready to start working on the standards, not waiting for instructions.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
index b0fd7eb87c..a53de0ae4b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e0868da73165e32763679.md
@@ -38,7 +38,7 @@ Which sentence correctly uses the word `most`?
 
 ### --feedback--
 
-This sentence doesn’t use `most`
+This sentence doesn't use `most`
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
index d8df09bccc..f338a2a4fe 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e15f175ecdf90b583ed01.md
@@ -19,7 +19,7 @@ What is Tom asking Sophie about?
 
 ## --answers--
 
-Sophie’s opinion on work.
+Sophie's opinion on work.
 
 ### --feedback--
 
@@ -39,7 +39,7 @@ The focus is on breaks during work, not after work.
 
 ---
 
-Sophie’s favorite coffee.
+Sophie's favorite coffee.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
index 813b147af9..32ab151cc1 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e1c10bc3f2ea8e1c1d7f7.md
@@ -7,7 +7,7 @@ dashedName: task-22
 
 # --description--
 
-Understanding someone’s routine, like their lunch habits, involves paying attention to specific details in the conversation.
+Understanding someone's routine, like their lunch habits, involves paying attention to specific details in the conversation.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
index 8d48e614c7..1668bd6f5f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e31b82090130535456f65.md
@@ -33,7 +33,7 @@ For helping him with a project.
 
 ### --feedback--
 
-Helping with a project isn’t mentioned in this context.
+Helping with a project isn't mentioned in this context.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
index d97918e009..6cbdbc24a3 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e358a40dd95143df6fe26.md
@@ -41,7 +41,7 @@ His favorite security equipment.
 
 ### --feedback--
 
-Equipment isn’t mentioned in Sophie's question.
+Equipment isn't mentioned in Sophie's question.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
index 210520379e..38d50d8972 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e3dfda31b534042d06e39.md
@@ -27,7 +27,7 @@ Company rules suggest an external obligation, more suited to `have to`.
 
 ---
 
-`I have to make sure the security cameras work because I believe it’s crucial.`
+`I have to make sure the security cameras work because I believe it's crucial.`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
index da3c53934b..4a128ff905 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4a245cc71782126b3316.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-68
 ---
 
-<!-- (audio) Jake: “Well, yeah, security is a top priority and I have to make sure everything goes as expected.” -->
+<!-- (audio) Jake: "Well, yeah, security is a top priority and I have to make sure everything goes as expected." -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
index 5f4fa4583b..9ad6479bab 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e4e482e3a38992b212c6f.md
@@ -9,7 +9,7 @@ dashedName: task-77
 
 A `policy` (in the plural, `policies`) is a principle or rule to guide decisions and achieve rational outcomes. Policies are often adopted by an organization to guide employees.
 
-For instance, `The company’s privacy policy protects client information.`
+For instance, `The company's privacy policy protects client information.`
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
index bb9c004796..8ca986ec69 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50576597e0a65cd97e24.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-75
 ---
 
-<!-- (audio) Linda: Hey, James. So what is the meaning of “compliance”. Can you tell me? -->
+<!-- (audio) Linda: Hey, James. So what is the meaning of "compliance". Can you tell me? -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
index 846f6b5a6c..9a4dfb86bf 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e50dd1f6ff2a9873f9ff0.md
@@ -44,7 +44,7 @@ Deciding what tasks to do.
 
 ### --feedback--
 
-It’s about following set tasks, not personal choice.
+It's about following set tasks, not personal choice.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
index 828885fedd..50cf4e1ee6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5c296bdba2ea26c67ca0.md
@@ -15,7 +15,7 @@ Listen to the audio to answer the question below.
 
 ## --text--
 
-What is the meaning of Linda’s question?
+What is the meaning of Linda's question?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
index e67c513fb1..b0ca04bd0a 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-a-typical-workday-and-tasks/657e5d8f7f2274f2b1a8efcc.md
@@ -25,7 +25,7 @@ What is the difference between `every` and `any`?
 
 ### --feedback--
 
-`Every` is for all items, not just in questions.
+`Every` is for all items, not just in questions; `any` is for one, some, or all.
 
 ---
 
@@ -41,7 +41,7 @@ Both words have broader meanings than just one item.
 
 ### --feedback--
 
-`Every` means all, not none.
+`Every` means all, not none; `any` means one, some, or all.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
index 1e90fd7b0c..acc0ee779f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e76356b6af6c07fe338c1.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-28
 ---
 
-<!-- (Audio) Linda: I've been a cyclist for more than 15 years. It's a love that hasn’t disappeared with time. -->
+<!-- (Audio) Linda: I've been a cyclist for more than 15 years. It's a love that hasn't disappeared with time. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
index e3d5149dc6..aafd786c69 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657e786b51f7eac240e92bcc.md
@@ -39,7 +39,7 @@ This sentence is not correct. A correct usage would be `Would you like me to mak
 
 ### --feedback--
 
-In this context, `like` doesn’t require the ending `-s` The correct form is `Would you like a glass of water?`
+In this context, `like` doesn't require the ending `-s` The correct form is `Would you like a glass of water?`
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
index a8fcedaafb..d06aaabd4c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/657fff7dabba2ff23993b08c.md
@@ -31,7 +31,7 @@ Partial acceptance
 
 ### --feedback--
 
-It suggests agreeing partially, which doesn’t fit the intention of the phrase.
+It suggests agreeing partially, which doesn't fit the intention of the phrase.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
index 4224498b86..746ebacce9 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-hobbies-and-interests/658010478daa16fe79d8113a.md
@@ -35,7 +35,7 @@ She's hesitant to include Brian.
 
 ### --feedback--
 
-Sophie's tone doesn’t suggest hesitation, but rather openness and enthusiasm for his participation.
+Sophie's tone doesn't suggest hesitation, but rather openness and enthusiasm for his participation.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
index d4a4e08426..4abf0566c6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d3fe6615374be0d10008.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-5
 ---
 
-<!-- (Audio) Brian: Well, we’re going to use a framework for the front-end, probably React. It's the technology we're most comfortable with, and it will make development faster. -->
+<!-- (Audio) Brian: Well, we're going to use a framework for the front-end, probably React. It's the technology we're most comfortable with, and it will make development faster. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
index a5e0e461c6..4ca794d4a8 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d46936e9374c24cfaaab.md
@@ -11,7 +11,7 @@ dashedName: task-6
 
 `Going to` can also be used when you have some evidence in the present that something will happen in the future.
 
-For example, `Look at those numbers! It's going to be a hard day.` or `They are going to feel upset if we don’t invite them to the meeting.`
+For example, `Look at those numbers! It's going to be a hard day.` or `They are going to feel upset if we don't invite them to the meeting.`
 
 # --fillInTheBlank--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
index e27a50f215..28efaf0969 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d550a08c194cd27607ec.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-8
 ---
 
-<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we’ll use Node.js. -->
+<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we'll use Node.js. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
index 4591795318..ad7f687770 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6613d6c3e74a984d6fcbd013.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-10
 ---
 
-<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we’ll use Node.js. It's a solid choice, and it will allow us to scale the application effectively. -->
+<!-- (Audio) Brian: Absolutely. And as for the back-end, I think we'll use Node.js. It's a solid choice, and it will allow us to scale the application effectively. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
index e5daa8082a..52473b3970 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ad58c102e15df06c96d5.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-15
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
@@ -21,7 +21,7 @@ An `audience` refers to the group of people who watch, read, or listen to someth
 
 ## --sentence--
 
-`I think we’re going to focus on social media marketing. It's BLANK, and it will BLANK a BLANK audience.`
+`I think we're going to focus on social media marketing. It's BLANK, and it will BLANK a BLANK audience.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
index 69bdc3c05e..eb465ae598 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614ae3e02cc465ebee68851.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-16
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
@@ -19,7 +19,7 @@ Which part of Sophie's sentence indicates that she is considering focusing on so
 
 ## --answers--
 
-`I think we’re going to focus on social media marketing.`
+`I think we're going to focus on social media marketing.`
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
index d03ccdc3ed..5086f7594c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b1f8ee220c5f79df89b8.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-17
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
index 5dcb9a6169..7360163ae6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects/6614b3e52a6aca60bc3417fb.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-20
 ---
 
-<!-- (Audio) Sophie: I think we’re going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. Brian: That sounds good. I suggest that we also invest in email marketing. It's more targeted, and it will allow us to engage with our subscribers directly. -->
+<!-- (Audio) Sophie: I think we're going to focus on social media marketing. It's cost-effective, and it will reach a broader audience. Brian: That sounds good. I suggest that we also invest in email marketing. It's more targeted, and it will allow us to engage with our subscribers directly. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
index a030bd6f2b..34da255b2d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/6629ce1a4f6581a7266d6ca9.md
@@ -11,7 +11,7 @@ dashedName: task-3
 
 The **Present Perfect Continuous tense** is used talk about actions or situations that started in the past and are still happening now. It is very useful when you want to emphasize the duration of an activity or that it is an ongoing process.
 
-Here’s how to form the **Present Perfect Continuous**: Subject + `has/have been` + `-ing` form of the verb. This tense is often used with expressions of time such as `for` and `since`. `For` is used with a period of time like two years or six months, while `since` is used with a specific point in time, like 2018 or this morning.
+Here's how to form the **Present Perfect Continuous**: Subject + `has/have been` + `-ing` form of the verb. This tense is often used with expressions of time such as `for` and `since`. `For` is used with a period of time like two years or six months, while `since` is used with a specific point in time, like 2018 or this morning.
 
 示例：
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
index c926609aa5..554e897708 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2779b2aeb80c10508bf2.md
@@ -23,7 +23,7 @@ She complains about the difficulty of learning them.
 
 ### --feedback--
 
-Sophie doesn’t mention any difficulty; she only expresses surprise at the number of programming languages.
+Sophie doesn't mention any difficulty; she only expresses surprise at the number of programming languages.
 
 ---
 
@@ -43,7 +43,7 @@ She ignores the comment and changes the subject.
 
 ### --feedback--
 
-Sophie directly responds to Brian’s observation by pointing out an interesting fact about programming languages.
+Sophie directly responds to Brian's observation by pointing out an interesting fact about programming languages.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
index 923ef2ea13..d3ecb1435e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a2b1f0c9314142ae87955.md
@@ -43,7 +43,7 @@ Who she was with when she spent the time
 
 ### --feedback--
 
-Brian’s question is specifically about the amount of time, not about who was with her.
+Brian's question is specifically about the amount of time, not about who was with her.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
index 6f856e8ec3..f422fa157d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662a304552f2631d63aa7cab.md
@@ -35,7 +35,7 @@ Sophie actually indicates she has free time and chooses to spend much of it on a
 
 ---
 
-She doesn’t enjoy what she does in her free time.
+She doesn't enjoy what she does in her free time.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
index 1646734219..51c949888c 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b74055c06e60af4f9b976.md
@@ -23,7 +23,7 @@ Brian needs help finding Python, the snake.
 
 ### --feedback--
 
-Brian’s question is about Python the programming language, not a snake.
+Brian's question is about Python the programming language, not a snake.
 
 ---
 
@@ -35,7 +35,7 @@ Brian is looking for someone to teach him Python next week.
 
 ### --feedback--
 
-Brian’s request implies an immediate need for clarification on a specific question, not seeking a teacher for future lessons.
+Brian's request implies an immediate need for clarification on a specific question, not seeking a teacher for future lessons.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
index 9a100640f8..7f7fb11d95 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662b8975b11107146a49ec58.md
@@ -35,7 +35,7 @@ Sarah needs help installing her code.
 
 ### --feedback--
 
-The audio does not mention installation issues; it focuses on trouble with existing code and understanding what’s wrong.
+The audio does not mention installation issues; it focuses on trouble with existing code and understanding what's wrong.
 
 ---
 
@@ -43,7 +43,7 @@ Sarah is confident about fixing the code herself.
 
 ### --feedback--
 
-Sarah’s description of not being able to figure out the issue suggests she is not confident about resolving it on her own.
+Sarah's description of not being able to figure out the issue suggests she is not confident about resolving it on her own.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
index 8de618ca83..9ec6648a33 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f074021418e2b24937af7.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-53
 ---
 
-<!-- (Audio) Tom: Depending on the IDE that you’re using, there are many extensions and plugins to use. -->
+<!-- (Audio) Tom: Depending on the IDE that you're using, there are many extensions and plugins to use. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
index 4d45b479d9..6934ab728e 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f0d350c37f42de48847fe.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-57
 ---
 
-<!-- (Audio) Tom: There are many debugging tools you can use. Depending on the IDE that you’re using, there are many extensions and plugins to use. They are super helpful. Sarah: I'll keep that in mind. Thanks, Tom. -->
+<!-- (Audio) Tom: There are many debugging tools you can use. Depending on the IDE that you're using, there are many extensions and plugins to use. They are super helpful. Sarah: I'll keep that in mind. Thanks, Tom. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
index 2fc64e245c..812e05036b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f2e4b96f60636d44eb7db.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-66
 ---
 
-<!-- (Audio) Tom: I understand that there are classes and methods, but I’ve never used them in my code. -->
+<!-- (Audio) Tom: I understand that there are classes and methods, but I've never used them in my code. -->
 
 # --description--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
index 0714228145..bdad8fee67 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f31024608f337c0bf53a9.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-67
 ---
 
-<!-- (Audio) Sarah: Object-oriented programming is used in many modern languages. How much do you know about it so far? Tom: Not much, really. I understand there are classes and methods, but I’ve never used them in my code. -->
+<!-- (Audio) Sarah: Object-oriented programming is used in many modern languages. How much do you know about it so far? Tom: Not much, really. I understand there are classes and methods, but I've never used them in my code. -->
 
 # --description--
 
@@ -31,11 +31,11 @@ Tom knows some things but hasn't tried them yet.
 
 ---
 
-Tom knows a lot about it but hasn’t used it.
+Tom knows a lot about it but hasn't used it.
 
 ### --feedback--
 
-Tom mentions understanding basic ideas like classes and methods, but he hasn’t used them, showing he knows a bit but not a lot.
+Tom mentions understanding basic ideas like classes and methods, but he hasn't used them, showing he knows a bit but not a lot.
 
 ---
 
@@ -43,7 +43,7 @@ Tom doesn't know anything about it.
 
 ### --feedback--
 
-Tom does know something because he talks about classes and methods, so he isn’t completely unfamiliar.
+Tom does know something because he talks about classes and methods, so he isn't completely unfamiliar.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md
index 53912865ad..b8dcdcfff8 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-use-basic-programming-vocabulary-in-conversations/662f3450de7c2139809fb72b.md
@@ -33,7 +33,7 @@ A coworker asks for a report urgently and you reply, `No worries`, without provi
 
 ### --feedback--
 
-This use might imply indifference or dismissal without addressing the coworker’s urgent need, which is not appropriate.
+This use might imply indifference or dismissal without addressing the coworker's urgent need, which is not appropriate.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
index cd6c4c0472..d5abc6f55f 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b400653813a1caa228aca.md
@@ -20,7 +20,7 @@ Sentences with the verb `to be` are often used to describe feelings and emotions
 
 ## --text--
 
-What does the expression `I’m happy` indicate in the present simple tense?
+What does the expression `I'm happy` indicate in the present simple tense?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
index d2cdcd9499..a2b46e9253 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657b68caf6debb2975503948.md
@@ -13,7 +13,7 @@ It's nice to have you here, Alice.
 
 # --description--
 
-`It’s nice to` is used to express a positive sentiment or feeling about something or someone.
+`It's nice to` is used to express a positive sentiment or feeling about something or someone.
 
 # --questions--
 
@@ -23,7 +23,7 @@ What is Bob expressing in his sentence?
 
 ## --answers--
 
-A negative opinion about Alice’s presence
+A negative opinion about Alice's presence
 
 ### --feedback--
 
@@ -31,7 +31,7 @@ Think about how the phrase `nice to` usually conveys positive feelings.
 
 ---
 
-A neutral statement about Alice’s presence
+A neutral statement about Alice's presence
 
 ### --feedback--
 
@@ -39,7 +39,7 @@ Consider the warmth usually conveyed by the phrase `nice to`.
 
 ---
 
-An apology for Alice’s presence
+An apology for Alice's presence
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ Reflect on the purpose of the phrase `nice to` in welcoming contexts.
 
 ---
 
-A positive and welcoming sentiment about Alice’s presence
+A positive and welcoming sentiment about Alice's presence
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
index a28f63c153..f05f4e9691 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ca50a95d1c3828ee5a991.md
@@ -34,7 +34,7 @@ He is pleased with the current team members.
 
 ### --feedback--
 
-While this might be true, it doesn’t directly relate to the phrase about new members.
+While this might be true, it doesn't directly relate to the phrase about new members.
 
 ---
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
index 53fb40f428..106f729788 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caa4012f1cf846dcaa619.md
@@ -7,7 +7,7 @@ dashedName: task-33
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years. He makes sure our data is secure and efficient.
+This is John, the database administrator. He's been here for three years. He makes sure our data is secure and efficient.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
index b107b99704..668d6f75a4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cad90d6745e85569cdc06.md
@@ -7,7 +7,7 @@ dashedName: task-34
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years. He makes sure our data is secure and efficient.
+This is John, the database administrator. He's been here for three years. He makes sure our data is secure and efficient.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
index aa9598cc79..8a8cd266dd 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657caec5163c6c85e5b31284.md
@@ -7,7 +7,7 @@ dashedName: task-35
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years.
+This is John, the database administrator. He's been here for three years.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
index 3e86402673..281122f6e4 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cafc142a867006734c3ed.md
@@ -7,7 +7,7 @@ dashedName: task-36
 
 <!--
 AUDIO REFERENCE:
-This is John, the database administrator. He’s been here for three years.
+This is John, the database administrator. He's been here for three years.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
index 1b6337ff6f..eeddb9eeaf 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ccfa7eeb47305177d4a45.md
@@ -7,7 +7,7 @@ dashedName: task-42
 
 <!--
 AUDIO REFERENCE:
-Everybody, let’s welcome Alice to the team.
+Everybody, let's welcome Alice to the team.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
index 293dc13f40..019bbdce77 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657cd816f3caf509f85e4d4a.md
@@ -7,7 +7,7 @@ dashedName: task-50
 
 <!--
 AUDIO REFERENCE:
-I'd like to introduce Lisa. She’s our new front-end developer.
+I'd like to introduce Lisa. She's our new front-end developer.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
index 4c0c43967b..0e1b862e7d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce387f809d60eb54f06d6.md
@@ -7,7 +7,7 @@ dashedName: task-58
 
 <!--
 AUDIO REFERENCE:
-Bob: Is there any specific area of design or development you're interested in? He’s your go-to guy for that.
+Bob: Is there any specific area of design or development you're interested in? He's your go-to guy for that.
 -->
 
 # --description--
@@ -20,7 +20,7 @@ For example, `He's the go-to guy for computer problems` means he is the person b
 
 ## --sentence--
 
-`Is there any BLANK area of design or development you're interested in? He’s your BLANK-to BLANK for that.`
+`Is there any BLANK area of design or development you're interested in? He's your BLANK-to BLANK for that.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
index 2db18719f9..868a16409b 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657ce691d6c57c107e650c5e.md
@@ -7,7 +7,7 @@ dashedName: task-61
 
 <!--
 AUDIO REFERENCE:
-Bob: This is Tom, our new graphic designer. Is there any specific area of design or development you're interested in? He’s your go-to guy for that.
+Bob: This is Tom, our new graphic designer. Is there any specific area of design or development you're interested in? He's your go-to guy for that.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
index 7768777883..56277dd8ba 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daa5ab8505427a5b99cd2.md
@@ -7,7 +7,7 @@ dashedName: task-64
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager.
+Bob: And I'm Bob, the team's project manager.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
index c26fda0327..eafc14ed67 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dab674b9de728828aa020.md
@@ -7,7 +7,7 @@ dashedName: task-66
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager. I’m the person you always need to talk to if you have any questions about the team’s goals and schedule.
+Bob: And I'm Bob, the team's project manager. I'm the person you always need to talk to if you have any questions about the team's goals and schedule.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
index 0878b60d8a..f617ef9400 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657dadfc7d21eb294c9f057e.md
@@ -7,7 +7,7 @@ dashedName: task-67
 
 <!--
 AUDIO REFERENCE:
-Bob: And I’m Bob, the team’s project manager. I’m the person you always need to talk to if you have any questions about the team’s goals and schedule.
+Bob: And I'm Bob, the team's project manager. I'm the person you always need to talk to if you have any questions about the team's goals and schedule.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
index b74e976b36..597beb2f90 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657daf702ed04a29ee42de69.md
@@ -7,7 +7,7 @@ dashedName: task-68
 
 <!--
 AUDIO REFERENCE:
-Lisa: Hi, Bob. It’s great to meet you too.
+Lisa: Hi, Bob. It's great to meet you too.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
index 71ee4c712f..35beb02fe6 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df21cc45b1f66112fb8fc.md
@@ -7,7 +7,7 @@ dashedName: task-69
 
 <!--
 AUDIO REFERENCE:
-Bob: Excellent! Lisa, it’s great to have you join our team, even if just online.
+Bob: Excellent! Lisa, it's great to have you join our team, even if just online.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
index efa8ac5345..71af118d4d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df2b22d7649667734d71e.md
@@ -7,7 +7,7 @@ dashedName: task-70
 
 <!--
 AUDIO REFERENCE:
-Bob: Excellent! Lisa, it’s great to have you join our team, even if just online.
+Bob: Excellent! Lisa, it's great to have you join our team, even if just online.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
index 94437caec1..d88c66f94d 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df5d14291b56887825276.md
@@ -7,7 +7,7 @@ dashedName: task-74
 
 <!--
 AUDIO REFERENCE:
-James: Good morning. I’m James and I’m here to help you with your training.
+James: Good morning. I'm James and I'm here to help you with your training.
 -->
 
 # --description--
@@ -18,7 +18,7 @@ Listen to the audio and fill in the missing words.
 
 ## --sentence--
 
-`I’m James and I’m BLANK to BLANK you with your BLANK.`
+`I'm James and I'm BLANK to BLANK you with your BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
index 7cf942fc3f..ec5afd0432 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657df6018a70e468f5dc016a.md
@@ -7,7 +7,7 @@ dashedName: task-75
 
 <!--
 AUDIO REFERENCE:
-James: Good morning. I’m James and I’m here to help you with your training.
+James: Good morning. I'm James and I'm here to help you with your training.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
index 57cb2df43b..53ec387ce7 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4b7d381d567e8d97967c.md
@@ -7,7 +7,7 @@ dashedName: task-88
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
index d17861b90a..3c09b26e81 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4c1f0bd3e97ef2d46644.md
@@ -7,7 +7,7 @@ dashedName: task-89
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
index 3608932d8f..8ed1d6bfdb 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4cd7f87d4f7f6954446d.md
@@ -7,7 +7,7 @@ dashedName: task-90
 
 <!--
 AUDIO REFERENCE:
-I'm Maria, the lead developer. I’m responsible for the technical aspects of the project. This is Bob, the project manager. He’s responsible for coordinating our efforts to meet your needs.
+I'm Maria, the lead developer. I'm responsible for the technical aspects of the project. This is Bob, the project manager. He's responsible for coordinating our efforts to meet your needs.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
index 8d7879228a..46d15fb380 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4db2e3fc8d7fb41b8b85.md
@@ -7,7 +7,7 @@ dashedName: task-91
 
 <!--
 AUDIO REFERENCE:
-David: Hey, Bob. How’s it going?
+David: Hey, Bob. How's it going?
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
index 2409dfaf7a..2cd8608c05 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e4fd2ecf31280ef673f0d.md
@@ -7,7 +7,7 @@ dashedName: task-94
 
 <!--
 AUDIO REFERENCE:
-Maria: And this is Linda, she’s our UX/UI designer. She works in user experience and she creates our interface design.
+Maria: And this is Linda, she's our UX/UI designer. She works in user experience and she creates our interface design.
 -->
 
 # --description--
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
index 357caad275..2755c0e762 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e539471b4aa82c7402c15.md
@@ -8,7 +8,7 @@ dashedName: task-97
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
index 03edc606d6..9d01733325 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e5477269b94834908826f.md
@@ -8,7 +8,7 @@ dashedName: task-98
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
@@ -20,7 +20,7 @@ David: I’ll be your point of contact and I’ll help make sure our collaborati
 
 ## --sentence--
 
-`I'll be your BLANK of contact and I’ll help make sure our BLANK is great.`
+`I'll be your BLANK of contact and I'll help make sure our BLANK is great.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
index 2942122d17..d0d5c04085 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e54f51fe1c983d840cb70.md
@@ -8,7 +8,7 @@ dashedName: task-99
 <!--
 AUDIO REFERENCE:
 
-David: I’ll be your point of contact and I’ll help make sure our collaboration is great.
+David: I'll be your point of contact and I'll help make sure our collaboration is great.
 
 -->
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
index 04529a558d..5b466bce30 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e55e612fac9847dc7ce03.md
@@ -8,7 +8,7 @@ dashedName: task-100
 <!--
 AUDIO REFERENCE:
 
-"We’re excited about this project. I’m confident that we can achieve great results."
+"We're excited about this project. I'm confident that we can achieve great results."
 
 -->
 
diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
index 6f137204cd..c381505fa1 100644
--- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
+++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/657e56e7034d2d858b6e9e00.md
@@ -8,7 +8,7 @@ dashedName: task-101
 <!--
 AUDIO REFERENCE:
 
-David: Wonderful to meet you all. I'm David, the project manager from FCC Corp. I’ll be your point of contact and I’ll help make sure our collaboration is great. We’re excited about this project. I’m confident that we can achieve great results.
+David: Wonderful to meet you all. I'm David, the project manager from FCC Corp. I'll be your point of contact and I'll help make sure our collaboration is great. We're excited about this project. I'm confident that we can achieve great results.
 
 -->
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
new file mode 100644
index 0000000000..ad2165f8fd
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0332ec59564081ec8b87.md
@@ -0,0 +1,196 @@
+---
+id: 674f0332ec59564081ec8b87
+title: "Dialogue 1: Scheduled Maintenance to Prevent DoS Attacks"
+challengeType: 21
+dashedName: dialogue-1-scheduled-maintenance-to-prevent-dos-attacks
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-boardroom.png",
+   "characters": [
+     {
+       "character": "Jessica",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Brian",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jessica",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jessica",
+     "startTime": 1,
+     "finishTime": 4.62,
+     "dialogue": {
+       "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 5.08,
+     "finishTime": 7.26,
+     "dialogue": {
+       "text": "Are you going to be online during the scheduled maintenance?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 7.7,
+     "finishTime": 11.06,
+     "dialogue": {
+       "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 11.22,
+     "finishTime": 14.94,
+     "dialogue": {
+       "text": "We've been preparing for it all week. Are you planning to join us?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 15.34,
+     "finishTime": 16.66,
+     "dialogue": {
+       "text": "Yes, I will be joining you.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 16.74,
+     "finishTime": 21.22,
+     "dialogue": {
+       "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 21.8,
+     "finishTime": 23.22,
+     "dialogue": {
+       "text": "When do we expect the maintenance to start?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 23.7,
+     "finishTime": 27.04,
+     "dialogue": {
+       "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 27.44,
+     "finishTime": 29.94,
+     "dialogue": {
+       "text": "We'll be testing the server load to ensure it's stable.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 29.94,
+     "finishTime": 33.3,
+     "dialogue": {
+       "text": "Sounds good. Are the other developers going to help you with the tests?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 33.9,
+     "finishTime": 39.34,
+     "dialogue": {
+       "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 39.78,
+     "finishTime": 42.26,
+     "dialogue": {
+       "text": "Do you think we'll need to update the users about the downtime?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 43,
+     "finishTime": 46.94,
+     "dialogue": {
+       "text": "Yes, I'll send out a notification to our users letting them know about the maintenance window.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jessica",
+     "startTime": 47.26,
+     "finishTime": 49,
+     "dialogue": {
+       "text": "It's better to inform them in advance.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 49.66,
+     "finishTime": 53.56,
+     "dialogue": {
+       "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 54.06
+   },
+   {
+     "character": "Jessica",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 54.56
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
new file mode 100644
index 0000000000..475545274e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0495e5f4b0485ed38cd4.md
@@ -0,0 +1,92 @@
+---
+id: 674f0495e5f4b0485ed38cd4
+title: Task 1
+challengeType: 22
+dashedName: task-1
+---
+
+<!-- (Audio) Jessica: Hey Brian, I heard we're running some tests on the website this weekend. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Brian, I heard we're running some BLANK on the BLANK this weekend.`
+
+## --blanks--
+
+`tests`
+
+### --feedback--
+
+This word in the plural form refers to activities or processes to check or evaluate something's performance or functionality.
+
+---
+
+`website`
+
+### --feedback--
+
+This word refers to an online location with related pages and content. It is something accessed using the internet.
+
+# --explanation--
+
+`Tests` are actions or procedures to check the quality, performance, or reliability of something. For example:
+
+`The team conducted tests to ensure the app doesn't crash.` - This means the team evaluated the app to make sure it works correctly without errors.
+
+`Website` is a collection of related web pages and content accessible on the internet. For example:
+
+`The company's website has information about their products and services.` - This means the company has an online platform where people can find details about what they offer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.62,
+      "dialogue": {
+        "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 5.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
new file mode 100644
index 0000000000..9cecd0b074
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f06b4b4d6eb4f6139ad61.md
@@ -0,0 +1,52 @@
+---
+id: 674f06b4b4d6eb4f6139ad61
+title: Task 2
+challengeType: 19
+dashedName: task-2
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+What might be involved in website tests?
+
+## --answers--
+
+Checking for grammar errors in blog posts.
+
+### --feedback--
+
+This is important for content quality but is not typically the focus of website tests, which are more about functionality and performance.
+
+---
+
+Evaluating the website's speed and functionality.
+
+---
+
+Designing new web pages for a marketing campaign.
+
+### --feedback--
+
+While creating new designs is important, it is not directly part of testing a website's existing features or performance.
+
+---
+
+Uploading new images to the homepage.
+
+### --feedback--
+
+This is a content update task, not part of testing the website's performance or functionality.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Website tests usually involve evaluating aspects like speed, functionality, and user experience to ensure the site operates smoothly.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
new file mode 100644
index 0000000000..7c27bafece
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f08fde55c2356b37e9b69.md
@@ -0,0 +1,92 @@
+---
+id: 674f08fde55c2356b37e9b69
+title: Task 3
+challengeType: 22
+dashedName: task-3
+---
+
+<!-- (Audio) Jessica: Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are you BLANK be BLANK during the scheduled maintenance?`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+This phrase of two words is used to talk about plans or intentions for the future. It often indicates what someone is planning or expecting to do.
+
+---
+
+`online`
+
+### --feedback--
+
+This word means being connected to the internet or using a device that is connected. It is often used in the context of digital communication or activities.
+
+# --explanation--
+
+`Going to` is a phrase used to describe actions that will happen in the future or intentions someone has. For example:
+
+`She is going to start her new job next week.` - It means that she plans to begin her new job in the future.
+
+`Online` means being connected to the internet or using internet-based tools. For example:
+
+`The developer worked online to collaborate with the team using a shared coding platform.` - This means the developer used the internet to connect and work with others on a digital platform for coding tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.88,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 3.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
new file mode 100644
index 0000000000..6e1a0654c9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0afcd85abc5d478e150c.md
@@ -0,0 +1,92 @@
+---
+id: 674f0afcd85abc5d478e150c
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Jessica: Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are you going to be online during the BLANK BLANK?`
+
+## --blanks--
+
+`scheduled`
+
+### --feedback--
+
+This word refers to something planned or arranged to happen at a specific time. It is often used in contexts where dates and times are set in advance.
+
+---
+
+`maintenance`
+
+### --feedback--
+
+This word refers to activities carried out to keep something in good condition or to fix issues.
+
+# --explanation--
+
+`Scheduled` means something has been planned or arranged to occur at a specific time. For example:
+
+`The scheduled meeting will start at 2 PM.` - This means that the meeting has been planned in advance to begin at the specified time.
+
+`Maintenance` refers to activities done to keep something functioning well or to fix any problems. For example:
+
+`The team performed maintenance on the server to ensure it runs smoothly.` - This means the team worked to keep the server in good condition by fixing or updating it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.88,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 3.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
new file mode 100644
index 0000000000..e53669607e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0d0dec2922641ce2c8e9.md
@@ -0,0 +1,111 @@
+---
+id: 674f0d0dec2922641ce2c8e9
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Jessica: Hey Brian, I heard we're running some tests on the website this weekend. Are you going to be online during the scheduled maintenance? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jessica want to know?
+
+## --answers--
+
+If Brian will update the website content.
+
+### --feedback--
+
+Jessica is not asking about making updates to the website content.
+
+---
+
+If Brian will manage the test results.
+
+### --feedback--
+
+Jessica does not mention anything about managing test results.
+
+---
+
+If Brian will schedule future tests.
+
+### --feedback--
+
+The scheduling of tests is not part of Jessica's question.
+
+---
+
+If Brian will be online during the maintenance planned in advance.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jessica's question is directly about Brian's availability online during the scheduled maintenance, not about tasks like updates, test management, or scheduling.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.62,
+      "dialogue": {
+        "text": "Hey Brian, I heard we're running some tests on the website this weekend.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 5.08,
+      "finishTime": 7.26,
+      "dialogue": {
+        "text": "Are you going to be online during the scheduled maintenance?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
new file mode 100644
index 0000000000..790466a2ad
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f0f8e84b4c76c0f6ae6d3.md
@@ -0,0 +1,94 @@
+---
+id: 674f0f8e84b4c76c0f6ae6d3
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) Brian: Yes, I'll be monitoring the system to make sure everything goes smoothly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, BLANK be BLANK the system to make sure everything goes smoothly.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is a contraction of `I will`, used to indicate a decision or plan for the future.
+
+---
+
+`monitoring`
+
+### --feedback--
+
+This word means observing or keeping track of something, especially to ensure it is functioning correctly. It ends in `-ing`.
+
+# --explanation--
+
+`Monitoring` refers to observing or tracking the performance or status of something, usually to ensure it operates smoothly or to identify issues. For example:
+
+`The team is monitoring the servers to prevent downtime.` - This means the team is actively watching the servers to ensure they work without interruptions.
+
+The `Future Continuous` tense describes actions that will be ongoing at a specific point in the future. It is formed using `will be` + verb ending in `-ing`. For example:
+
+`The IT team will be troubleshooting the network issues tomorrow afternoon.` - This indicates that the IT team will actively work on fixing network problems during a particular time in the future.
+
+Brian uses the `Future Continuous` tense to show that he will be actively tracking the system's performance to ensure everything runs smoothly.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 6.5,
+      "finishTimestamp": 10.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
new file mode 100644
index 0000000000..73f3247701
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1a33acb7717de4842822.md
@@ -0,0 +1,52 @@
+---
+id: 674f1a33acb7717de4842822
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses the `Future Continuous` tense?
+
+## --answers--
+
+`The team works on the project tomorrow morning.`
+
+### --feedback--
+
+This sentence uses the `Simple Present` tense, not the `Future Continuous` tense.
+
+---
+
+`The team will complete the project tomorrow.`
+
+### --feedback--
+
+This sentence is in the `Simple Future` tense, not the `Future Continuous` tense.
+
+---
+
+`The team will be working on the project tomorrow morning.`
+
+---
+
+`The team was working on the project yesterday.`
+
+### --feedback--
+
+This sentence is in the `Past Continuous` tense, not the `Future Continuous` tense.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The `Future Continuous` tense with the structure `will be` + verb ending in `-ing` describes actions that will be ongoing at a specific point in the future.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
new file mode 100644
index 0000000000..eeb64584d2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/674f1ba48f50b78294f89089.md
@@ -0,0 +1,102 @@
+---
+id: 674f1ba48f50b78294f89089
+title: Task 8
+challengeType: 19
+dashedName: task-8
+---
+
+<!-- (Audio) Brian: Yes, I'll be monitoring the system to make sure everything goes smoothly. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will Brian be doing?
+
+## --answers--
+
+Check the system for bugs and errors.
+
+### --feedback--
+
+Although Brian may notice problems while monitoring, he does not specifically mention checking for bugs.
+
+---
+
+Observe the system to ensure it works well.
+
+---
+
+Install updates to improve system performance.
+
+### --feedback--
+
+Brian does not mention installing updates. His focus is on monitoring, not making changes.
+
+---
+
+Manage the system's security settings.
+
+### --feedback--
+
+While monitoring might include checking security, Brian is not talking specifically about managing security settings.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian says he will be `monitoring the system`, which means he will be keeping track of its performance to ensure it runs smoothly. This includes observing the system but does not specifically involve checking for bugs, installing updates, or managing security settings.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 6.5,
+      "finishTimestamp": 10.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Yes, I'll be monitoring the system to make sure everything goes smoothly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
new file mode 100644
index 0000000000..61c35b670d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67504e15ec1851a15aad11c1.md
@@ -0,0 +1,92 @@
+---
+id: 67504e15ec1851a15aad11c1
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) Brian: We've been preparing for it all week. Are you planning to join us? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We've been BLANK for it all week. Are you BLANK to join us?`
+
+## --blanks--
+
+`preparing`
+
+### --feedback--
+
+This word in the `-ing` form means getting ready for something or making necessary arrangements.
+
+---
+
+`planning`
+
+### --feedback--
+
+This word in the `-ing` form refers to deciding in advance what you want to do or arranging activities.
+
+# --explanation--
+
+`Preparing` means getting ready or making arrangements for something. For example:
+
+`The team has been preparing for the product launch all month.` - This means the team has been getting everything ready for the product launch to ensure it is successful.
+
+`Planning` refers to making decisions or arrangements about future activities. For example:
+
+`She is planning the layout for the new website.` - This means she is organizing and deciding how the website will look and function in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.02,
+      "finishTimestamp": 13.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.92,
+      "dialogue": {
+        "text": "We've been preparing for it all week. Are you planning to join us?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
new file mode 100644
index 0000000000..e4765e9cef
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675052373a1887aaa89c9a22.md
@@ -0,0 +1,88 @@
+---
+id: 675052373a1887aaa89c9a22
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: Are you planning to join us? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which might be the affirmative answer to Brian's question?
+
+## --answers--
+
+`Yes, I will be joining you.`
+
+---
+
+`No, I have other plans.`
+
+### --feedback--
+
+This is a negative response, not an affirmative one.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+An affirmative answer to the question confirms the intent to join. `Yes, I will be joining you.` uses `Future Continuous` tense showing that the speaker has a plan or intention to join the group at a particular time in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.7,
+      "finishTimestamp": 13.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.24,
+      "dialogue": {
+        "text": "Are you planning to join us?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 2.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
new file mode 100644
index 0000000000..9808c8f818
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505766bad3bcbac2f16fe4.md
@@ -0,0 +1,113 @@
+---
+id: 67505766bad3bcbac2f16fe4
+title: Task 11
+challengeType: 22
+dashedName: task-11
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I will be joining you. I want to BLANK the new BLANK BLANK to prevent any potential DoS attacks.`
+
+## --blanks--
+
+`double-check`
+
+### --feedback--
+
+This means to check something again to make sure it is correct or complete. This is a compound word, remember to use `-`.
+
+---
+
+`security`
+
+### --feedback--
+
+This refers to measures taken to protect systems, networks, or data from harm or unauthorized access.
+
+---
+
+`features`
+
+### --feedback--
+
+This word in the plural form refers to the specific characteristics or components of something, such as a product or system.
+
+# --explanation--
+
+`Double-check` means to verify or check something again to ensure accuracy or correctness. For example:
+
+`I need to double-check the system settings before going live.` - It means you want to review the settings again to ensure everything is correct.
+
+`Security` refers to measures or practices that protect systems and data from threats. For example:
+
+`The company has implemented advanced security protocols to protect sensitive information.` - This means the company has set up strong protective measures to keep their data and systems safe.
+
+`Features` refer to the specific elements or components of a product, system, or service. For example:
+
+`The new software has many useful features, like an automatic backup system.` - This means the software has different tools or functions that make it more effective or valuable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
new file mode 100644
index 0000000000..68315f2fd1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67505903fa6affc0910b7a9d.md
@@ -0,0 +1,101 @@
+---
+id: 67505903fa6affc0910b7a9d
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I will be joining you. I want to double-check the new security features to BLANK any potential BLANK.`
+
+## --blanks--
+
+`prevent`
+
+### --feedback--
+
+This verb means to stop something from happening or avoid it.
+
+---
+
+`DoS attacks`
+
+### --feedback--
+
+This phrase of two words means a system or network gets overloaded with too much traffic, making it unable to work properly or respond to real users. The first word is an acronym for `Denial of Service`.
+
+# --explanation--
+
+`Prevent` means to stop something from happening or to make sure it does not occur. For example:
+
+`The new software update will prevent unauthorized access to the system.` - This means that the update will stop unauthorized people from gaining access to the system.
+
+`DoS attacks` refer to Denial of Service attacks, which are attempts to make a computer or network service unavailable by overwhelming it with traffic. For example:
+
+`The website was temporarily offline due to a large-scale DoS attack.` - This means the website was made unavailable because it was overloaded with harmful traffic.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
new file mode 100644
index 0000000000..c3f3e0d248
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675106629f2c07cec9bf2c71.md
@@ -0,0 +1,111 @@
+---
+id: 675106629f2c07cec9bf2c71
+title: Task 13
+challengeType: 19
+dashedName: task-13
+---
+
+<!-- (Audio) Jessica: Yes, I will be joining you. I want to double-check the new security features to prevent any potential DoS attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses the `Future Continuous` tense to describe what Jessica will do?
+
+## --answers--
+
+`I will double-check the new security features tomorrow.`
+
+### --feedback--
+
+This is `Simple Future` tense, not `Future Continuous` tense.
+
+---
+
+`I am double-checking the new security features tomorrow.`
+
+### --feedback--
+
+This is `Present Continuous` tense, not `Future Continuous` tense.
+
+---
+
+`I check the new security features tomorrow.`
+
+### --feedback--
+
+This is `Simple Present` tense, not `Future Continuous` tense.
+
+---
+
+`I will be double-checking the new security features tomorrow.`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The `Future Continuous` tense is used to describe an ongoing action that will happen in the future. Its structure is `will be` + verb ending in `-ing`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.34,
+      "finishTimestamp": 20.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.32,
+      "dialogue": {
+        "text": "Yes, I will be joining you.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 2.4,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "I want to double check the new security features to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
new file mode 100644
index 0000000000..51f2fef67c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67510809633277d10d4fff4f.md
@@ -0,0 +1,80 @@
+---
+id: 67510809633277d10d4fff4f
+title: Task 14
+challengeType: 22
+dashedName: task-14
+---
+
+<!-- (Audio) Jessica: When do we expect the maintenance to start? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`When do we BLANK the maintenance to start?`
+
+## --blanks--
+
+`expect`
+
+### --feedback--
+
+This word means to believe that something will happen in the future.
+
+# --explanation--
+
+`Expect` means to think that something will happen or to anticipate an event. For example:
+
+`We expect the meeting to begin at 10 AM.` - This means that you believe the meeting will start at 10 AM, based on plans or predictions.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.8,
+      "finishTimestamp": 22.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.42,
+      "dialogue": {
+        "text": "When do we expect the maintenance to start?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 2.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
new file mode 100644
index 0000000000..2a3fc67eda
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a781fd421fda55170fc8.md
@@ -0,0 +1,102 @@
+---
+id: 6751a781fd421fda55170fc8
+title: Task 15
+challengeType: 19
+dashedName: task-15
+---
+
+<!-- (Audio) Jessica: When do we expect the maintenance to start? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jessica want to know?
+
+## --answers--
+
+When the maintenance will start.
+
+---
+
+How long the maintenance will last.
+
+### --feedback--
+
+Jessica is not asking about the duration, but the start time.
+
+---
+
+Who is responsible for the maintenance.
+
+### --feedback--
+
+Jessica is asking about the start time, not the person in charge.
+
+---
+
+If the maintenance is necessary.
+
+### --feedback--
+
+Jessica is asking when the maintenance will start, not if it's necessary.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jessica is asking about the expected time the maintenance will begin.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.8,
+      "finishTimestamp": 22.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 2.42,
+      "dialogue": {
+        "text": "When do we expect the maintenance to start?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 2.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
new file mode 100644
index 0000000000..a6a925a83c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a827719c0fdb5b66b8e3.md
@@ -0,0 +1,92 @@
+---
+id: 6751a827719c0fdb5b66b8e3
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) Brian: It's going to start around 2 AM and should last a couple of hours. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's going to start BLANK 2 AM and should last BLANK hours.`
+
+## --blanks--
+
+`around`
+
+### --feedback--
+
+This word means approximately or close to a specific time or amount.
+
+---
+
+`a couple of`
+
+### --feedback--
+
+This phrase of three words means two or a small number, typically more than one but not many.
+
+# --explanation--
+
+`Around` means approximately or near a certain time, place, or amount. For example:
+
+`The meeting will start around 10 AM.` - This means the meeting is expected to start at approximately 10 AM, but not exactly at that time.
+
+`A couple of` means two or a small number. For example:
+
+`We need a couple of days to finish the project.` - This means that the project will take about two days, but it could be slightly more in some contexts.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.5,
+      "finishTimestamp": 26.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
new file mode 100644
index 0000000000..48e3b6e09d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751a990269891dd6f0ab1c2.md
@@ -0,0 +1,102 @@
+---
+id: 6751a990269891dd6f0ab1c2
+title: Task 17
+challengeType: 19
+dashedName: task-17
+---
+
+<!-- (Audio) Brian: It's going to start around 2 AM and should last a couple of hours. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+If the maintenance starts around 2 AM on December 5, what time does it most probably end?
+
+## --answers--
+
+Around 2:30 AM on December 5.
+
+### --feedback--
+
+The maintenance is expected to last longer than 30 minutes.
+
+---
+
+Around 4 AM on December 5.
+
+---
+
+Around 6 AM on December 5.
+
+### --feedback--
+
+The maintenance is not expected to last that long.
+
+---
+
+Around 2 AM on December 6.
+
+### --feedback--
+
+This is far beyond the estimated duration.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian says the maintenance will start around 2 AM on December 5. Adding `a couple of hours` (approximately 2) means it will most likely end around 4 AM.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.5,
+      "finishTimestamp": 26.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It's going to start around 2 a.m. and should last a couple of hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
new file mode 100644
index 0000000000..e9f44e8ead
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ab72ff11cae0021d02d8.md
@@ -0,0 +1,92 @@
+---
+id: 6751ab72ff11cae0021d02d8
+title: Task 18
+challengeType: 22
+dashedName: task-18
+---
+
+<!-- (Audio) Brian: We'll be testing the server load to ensure it's stable. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll be testing the BLANK BLANK to ensure it's stable.`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This refers to a computer or system that provides data, services, or resources to other devices.
+
+---
+
+`load`
+
+### --feedback--
+
+This refers to the amount of work or demand placed on a system or resource.
+
+# --explanation--
+
+`Server` refers to a powerful computer or system that provides services, data, or resources to other devices, often over a network. For example:
+
+`The server hosts the company's website.` - This means the server is responsible for storing and delivering the website's content to users who access it.
+
+`Load` refers to the amount of work, demand, or stress placed on a system or resource. For example:
+
+`The system crashed because it couldn't handle the high load during peak hours.` - This means the system became overwhelmed due to the large amount of demand placed on it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.24,
+      "finishTimestamp": 28.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.7,
+      "dialogue": {
+        "text": "We'll be testing the server load to ensure it's stable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
new file mode 100644
index 0000000000..67d7a30b74
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aca2701270e188b07df9.md
@@ -0,0 +1,102 @@
+---
+id: 6751aca2701270e188b07df9
+title: Task 19
+challengeType: 19
+dashedName: task-19
+---
+
+<!-- (Audio) Brian: We'll be testing the server load to ensure it's stable. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will they be doing?
+
+## --answers--
+
+Replace the server with a new one.
+
+### --feedback--
+
+The focus is on testing the server, not replacing it.
+
+---
+
+Evaluate how much traffic the server can handle.
+
+---
+
+Back up all data on the server.
+
+### --feedback--
+
+Backing up data is important, but the task here is not about it.
+
+---
+
+Shut down the server to perform maintenance.
+
+### --feedback--
+
+Testing the server load does not require shutting it down.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Testing the server load involves evaluating how much traffic or demand the server can handle while remaining stable. This is different from replacing the server, backing up data, or shutting it down.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.24,
+      "finishTimestamp": 28.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.7,
+      "dialogue": {
+        "text": "We'll be testing the server load to ensure it's stable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
new file mode 100644
index 0000000000..986453b16c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751ad79009d66e2f5878282.md
@@ -0,0 +1,102 @@
+---
+id: 6751ad79009d66e2f5878282
+title: Task 20
+challengeType: 19
+dashedName: task-20
+---
+
+<!-- (Audio) Jessica: Sounds good. Are the other developers going to help you with the tests? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jessica feel about the plan, and what does she want to know?
+
+## --answers--
+
+She is unsure about the plan and wants to know if it is finalized.
+
+### --feedback--
+
+Jessica thinks the plan is good and is not asking about whether it is finalized.
+
+---
+
+She agrees with the plan and wants to know if the other developers will assist.
+
+---
+
+She has concerns about the plan and wants to know if it will succeed.
+
+### --feedback--
+
+Jessica expresses no concerns about the plan's success.
+
+---
+
+She disagrees with the plan and wants to know if there are alternatives.
+
+### --feedback--
+
+Jessica clearly states `Sounds good`, showing agreement with the plan.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jessica says `Sounds good`, indicating that she agrees with the plan. She then asks if the other developers are going to assist, showing curiosity about who will be involved in the tests.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.94,
+      "finishTimestamp": 32.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Sounds good. Are the other developers going to help you with the tests?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 4.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
new file mode 100644
index 0000000000..cfa38f104c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751aeb422ef45e4af25434d.md
@@ -0,0 +1,92 @@
+---
+id: 6751aeb422ef45e4af25434d
+title: Task 21
+challengeType: 22
+dashedName: task-21
+---
+
+<!-- (Audio) Brian: Yes, they're going to run additional stress tests to ensure we don't have any unexpected issues. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, they're going to run additional BLANK to ensure we don't have any BLANK issues.`
+
+## --blanks--
+
+`stress tests`
+
+### --feedback--
+
+This phrase of two words refers to evaluations that push a system to its limits to check its performance under extreme conditions.
+
+---
+
+`unexpected`
+
+### --feedback--
+
+This means something that happens without warning or is not anticipated.
+
+# --explanation--
+
+`Stress tests` are evaluations designed to see how a system performs under high pressure or extreme conditions. For example:
+
+`The developers ran stress tests on the website to check its performance during peak traffic.` - This means the developers tested the website to ensure it could handle a large number of visitors at the same time.
+
+`Unexpected` means something unplanned or surprising. For example:
+
+`The system crashed due to unexpected behavior during the update.` - This means the system failed because of issues that were not anticipated during the update.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.7,
+      "finishTimestamp": 38.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.64,
+      "dialogue": {
+        "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
new file mode 100644
index 0000000000..e13611f690
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bc2826c791ea69d7e8f2.md
@@ -0,0 +1,102 @@
+---
+id: 6751bc2826c791ea69d7e8f2
+title: Task 22
+challengeType: 19
+dashedName: task-22
+---
+
+<!-- (Audio) Brian: Yes, they're going to run additional stress tests to ensure we don't have any unexpected issues. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How will the other developers help?
+
+## --answers--
+
+They will fix bugs in the system.
+
+### --feedback--
+
+The audio does not mention fixing bugs.
+
+---
+
+They will update the system with new features.
+
+### --feedback--
+
+There is no mention of adding new features in the audio.
+
+---
+
+They will conduct more tests to evaluate the system's performance under pressure.
+
+---
+
+They will monitor the system without performing tests.
+
+### --feedback--
+
+The audio specifies that they will do something else, not just monitor the system.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The developers will assist by running additional stress tests, as stated in the audio. This is to ensure the system can handle high demand and avoid unexpected issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.7,
+      "finishTimestamp": 38.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.64,
+      "dialogue": {
+        "text": "Yes, they're going to run additional stress tests to ensure that we don't have any unexpected issues.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
new file mode 100644
index 0000000000..ceb27c6152
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bd2301b9feebf3813ac3.md
@@ -0,0 +1,80 @@
+---
+id: 6751bd2301b9feebf3813ac3
+title: Task 23
+challengeType: 22
+dashedName: task-23
+---
+
+<!-- (Audio) Brian: Do you think we'll need to update the users about the downtime? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Do you think we'll need to update the users about the BLANK?`
+
+## --blanks--
+
+`downtime`
+
+### --feedback--
+
+This word refers to the period when a system or service is not available or functioning.
+
+# --explanation--
+
+`Downtime` means the period when a system, service, or device is unavailable or not working. For example:
+
+`The website experienced an hour of downtime due to server maintenance.` - This means the website could not be accessed for an hour because the server was being worked on.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 41.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Do you think we'll need to update the users about the downtime?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
new file mode 100644
index 0000000000..f71873f3b5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751bdd2f78adbed1ea0fa51.md
@@ -0,0 +1,102 @@
+---
+id: 6751bdd2f78adbed1ea0fa51
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Brian: Do you think we'll need to update the users about the downtime? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Brian's concern?
+
+## --answers--
+
+If users need to be informed about the downtime.
+
+---
+
+If the downtime will last too long.
+
+### --feedback--
+
+Brian is not asking about the length of the downtime.
+
+---
+
+If the users will experience technical issues.
+
+### --feedback--
+
+Brian does not mention technical issues in his concern.
+
+---
+
+If the downtime will affect the server's performance.
+
+### --feedback--
+
+Brian's concern is not about the server's performance.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Brian is asking if they should update users about the downtime, showing his concern is about communication with the users rather than the length of downtime, technical issues, or server performance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 41.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Do you think we'll need to update the users about the downtime?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
new file mode 100644
index 0000000000..c01866159a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6751beb68c063aee92555abe.md
@@ -0,0 +1,113 @@
+---
+id: 6751beb68c063aee92555abe
+title: Task 25
+challengeType: 22
+dashedName: task-25
+---
+
+<!-- (Audio) Jessica: Yes, I'll send out a notification to our users, letting them know about the maintenance window. It's better to inform them in advance. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I'll send out a BLANK to our users, letting them know about the BLANK. It's better to BLANK them in advance.`
+
+## --blanks--
+
+`notification`
+
+### --feedback--
+
+This word means a message or alert that gives information or warns about something.
+
+---
+
+`maintenance window`
+
+### --feedback--
+
+This phrase of two words refers to the scheduled time during which a system is unavailable for updates or repairs.
+
+---
+
+`inform`
+
+### --feedback--
+
+This word means to let someone know or share information with them.
+
+# --explanation--
+
+`Notification` refers to a message or alert sent to inform people about something important. For example:
+
+`We received a notification about the upcoming software update.` - This means a message was sent to alert users about the software update.
+
+`Maintenance window` is the scheduled time set aside for system updates, repairs, or tests. For example:
+
+`The website will be down during the maintenance window from 2 AM to 4 AM.` - This means the website will not be available while maintenance work is being done during the specified period.
+
+`Inform` means to share information or let someone know about something. For example:
+
+`The team will inform the users about the new feature rollout.` - This means the team will tell the users about the introduction of the new feature.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jessica",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42,
+      "finishTimestamp": 48
+    }
+  },
+  "commands": [
+    {
+      "character": "Jessica",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jessica",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "Yes, I'll send out a notification to our users letting them know about the maintenance window.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "startTime": 5.26,
+      "finishTime": 7,
+      "dialogue": {
+        "text": "It's better to inform them in advance.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jessica",
+      "opacity": 0,
+      "startTime": 7.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
new file mode 100644
index 0000000000..f4b54aa48e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e404804c1c044c804b79.md
@@ -0,0 +1,52 @@
+---
+id: 6752e404804c1c044c804b79
+title: Task 26
+challengeType: 19
+dashedName: task-26
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence correctly uses `Future Continuous` tense to inform users about the maintenance in advance?
+
+## --answers--
+
+`We will perform maintenance on Friday night.`
+
+### --feedback--
+
+This sentence uses `Future Simple` tense rather than `Future Continuous` tense.
+
+---
+
+`We will be performing maintenance on Friday night.`
+
+---
+
+`Maintenance will be done on Friday night.`
+
+### --feedback--
+
+This sentence uses `Future Simple` tense instead of `Future Continuous` tense.
+
+---
+
+`We might do maintenance on Friday night.`
+
+### --feedback--
+
+This sentence uses `might` to indicate a possibility, not `Future Continuous` tense.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The `Future Continuous` tense describes an action that will be in progress at a specific time in the future. In this case, it refers to the maintenance that will occur on Friday night, letting users know about it ahead of time.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
new file mode 100644
index 0000000000..00662ffeea
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e54369231d06538b4ac0.md
@@ -0,0 +1,92 @@
+---
+id: 6752e54369231d06538b4ac0
+title: Task 27
+challengeType: 22
+dashedName: task-27
+---
+
+<!-- (Audio) Brian: Good idea. We don't want anyone getting frustrated because they can't access the site. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Good idea. We don't want anyone getting BLANK because they can't BLANK the site.`
+
+## --blanks--
+
+`frustrated`
+
+### --feedback--
+
+This means feeling annoyed or upset because something is not working as expected or desired.
+
+---
+
+`access`
+
+### --feedback--
+
+This means the ability to enter, use, or connect to something, such as a system or website.
+
+# --explanation--
+
+`Frustrated` means feeling annoyed, upset, or disappointed because of difficulties or obstacles. For example:
+
+`She was frustrated because the software kept crashing.` - This means she felt annoyed and upset because the software was not functioning properly.
+
+`Access` means the ability to use or connect to something, especially technology or information. For example:
+
+`The team couldn't access the server due to a network issue.` - This means the team was unable to connect to the server because of a problem with the network.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.46,
+      "finishTimestamp": 52.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
new file mode 100644
index 0000000000..b9d378b329
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752e83a806f520923bd28fa.md
@@ -0,0 +1,102 @@
+---
+id: 6752e83a806f520923bd28fa
+title: Task 28
+challengeType: 19
+dashedName: task-28
+---
+
+<!-- (Audio) Jessica: It's better to inform them in advance. Brian: Good idea. We don't want anyone getting frustrated because they can't access the site. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Brian agree with Jessica's plan?
+
+## --answers--
+
+No, he thinks it's unnecessary to inform users in advance.
+
+### --feedback--
+
+Brian clearly agrees with Jessica's plan, calling it a `Good idea`.
+
+---
+
+Yes, he agrees that informing users in advance is a good idea.
+
+---
+
+No, he wants to inform users after the maintenance is complete.
+
+### --feedback--
+
+Brian supports informing users in advance, not afterward.
+
+---
+
+Yes, but he prefers a different approach to informing users.
+
+### --feedback--
+
+There is no indication in the audio that Brian suggests a different approach.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian's response, `Good idea`, shows he agrees with Jessica's plan to inform users in advance. He emphasizes the importance of avoiding user frustration by ensuring they are aware of the maintenance ahead of time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.46,
+      "finishTimestamp": 52.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Good idea. We don't want anyone getting frustrated because they can't access the site.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
new file mode 100644
index 0000000000..a61f296074
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752eb5797ad390c7f40ef08.md
@@ -0,0 +1,86 @@
+---
+id: 6752eb5797ad390c7f40ef08
+title: Task 29
+challengeType: 22
+dashedName: task-29
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`I'll`, `joining`, `monitoring`, `testing`, `be`, and `going`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jessica: Hey Brian, I heard we're running some tests on the website this weekend. Are you going to be online during the scheduled maintenance?`
+
+`Brian: Yes, I'll BLANK BLANK the system to make sure everything goes smoothly. We've been preparing for it all week. Are you planning to join us?`
+
+`Jessica: Yes, I will be BLANK you. I want to double-check the new security features to prevent any potential DoS attacks. When do we expect the maintenance to start?`
+
+`Brian: It's going to start around 2 AM and should last a couple of hours. We'll be BLANK the server load to ensure it's stable.`
+
+`Jessica: Sounds good. Are the other developers going to help you with the tests?`
+
+`Brian: Yes, they're BLANK to run additional stress tests to ensure we don't have any unexpected issues. Do you think we'll need to update the users about the downtime?`
+
+`Jessica: Yes, BLANK send out a notification to our users, letting them know about the maintenance window. It's better to inform them in advance.`
+
+`Brian: Good idea. We don't want anyone getting frustrated because they can't access the site.`
+
+## --blanks--
+
+`be`
+
+### --feedback--
+
+This word is a part of `Future Continuous` tense.
+
+---
+
+`monitoring`
+
+### --feedback--
+
+This word describes Brian's ongoing action of checking the system during the maintenance.
+
+---
+
+`joining`
+
+### --feedback--
+
+This word indicates Jessica's plan to participate in the maintenance.
+
+---
+
+`testing`
+
+### --feedback--
+
+This word describes the action of evaluating the server load during the maintenance.
+
+---
+
+`going`
+
+### --feedback--
+
+This word is part of `Simple Future` tense, describing the other developers' plans to run stress tests.
+
+---
+
+`I'll`
+
+### --feedback--
+
+This contraction refers to Jessica's intention to send a notification to users.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
new file mode 100644
index 0000000000..c659cbae06
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f4680f2d251372d4ae64.md
@@ -0,0 +1,68 @@
+---
+id: 6752f4680f2d251372d4ae64
+title: Task 30
+challengeType: 19
+dashedName: task-30
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What is the main purpose of the maintenance?
+
+## --answers--
+
+To add new features to the website.
+
+### --feedback--
+
+The text does not mention adding new features.
+
+---
+
+To evaluate the system's security measures only.
+
+### --feedback--
+
+Although security measures are part of the process, the text mentions something else.
+
+---
+
+To improve the systems and ensure smooth performance.
+
+---
+
+To reduce downtime during peak hours.
+
+### --feedback--
+
+The text does not mention downtime during peak hours.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, pay attention to where the notification explains the primary goal of the maintenance.
+
+It specifically mentions improving system performance and ensuring everything runs smoothly.
+
+Look for the option that reflects these objectives.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
new file mode 100644
index 0000000000..18a44d3f34
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752f6ebff95ee1781462c02.md
@@ -0,0 +1,68 @@
+---
+id: 6752f6ebff95ee1781462c02
+title: Task 31
+challengeType: 19
+dashedName: task-31
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What will the developers be doing during the maintenance?
+
+## --answers--
+
+Running stress tests and double-checking security features.
+
+---
+
+Adding new functionalities to the website.
+
+### --feedback--
+
+The text does not mention adding new functionalities.
+
+---
+
+Monitoring user activity on the website.
+
+### --feedback--
+
+The text does not focus on monitoring user activity.
+
+---
+
+Fixing issues reported by customers.
+
+### --feedback--
+
+Fixing customer issues is not mentioned as part of the maintenance.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find the correct answer, focus on where the notification details the tasks the developers will be performing during maintenance.
+
+It mentions specific actions like running stress tests and double-checking security features.
+
+Choose the option that includes these activities.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
new file mode 100644
index 0000000000..a9f52b0c4a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb3e6257c91b93721288.md
@@ -0,0 +1,66 @@
+---
+id: 6752fb3e6257c91b93721288
+title: Task 32
+challengeType: 19
+dashedName: task-32
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What is the expected duration of the maintenance?
+
+## --answers--
+
+About 30 minutes.
+
+### --feedback--
+
+The text mentions that the maintenance will last longer than 30 minutes.
+
+---
+
+About 1 hour.
+
+### --feedback--
+
+The expected duration is not mentioned as 1 hour.
+
+---
+
+About 2 hours.
+
+---
+
+All day.
+
+### --feedback--
+
+The text does not specify an all-day maintenance.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, refer to the part of the notification where the duration of the maintenance is mentioned.
+
+It explicitly states that the maintenance is expected to last about 2 hours, so look for the option that matches this information.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
new file mode 100644
index 0000000000..8f1c54019e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fb92ecc7811d3a0f3320.md
@@ -0,0 +1,66 @@
+---
+id: 6752fb92ecc7811d3a0f3320
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+What does the text suggest about potential downtime?
+
+## --answers--
+
+Downtime will last all night.
+
+### --feedback--
+
+The text does not state that downtime will last all night; it mentions a maintenance window of 2 hours.
+
+---
+
+Downtime may occur during the maintenance period.
+
+---
+
+There will be no downtime at all.
+
+### --feedback--
+
+The text warns users that the website may experience downtime.
+
+---
+
+Downtime will occur during peak hours.
+
+### --feedback--
+
+The text specifies that the maintenance is scheduled for late at night, not during peak hours.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, look at the part of the notification that discusses downtime.
+
+It highlights that the website may experience downtime during the maintenance period, making this a key detail to identify the correct option.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
new file mode 100644
index 0000000000..8da5cbbdcb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6752fc06607eba1e73a89929.md
@@ -0,0 +1,68 @@
+---
+id: 6752fc06607eba1e73a89929
+title: Task 34
+challengeType: 19
+dashedName: task-34
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing with Brian, Jessica wrote this scheduled maintenance notification:
+
+`We will conduct scheduled maintenance to improve our systems and ensure everything runs smoothly. During the maintenance window, starting at 2:00 AM on Friday night, our team will be monitoring the system and testing the server load to prevent any unexpected issues. The maintenance is expected to last about 2 hours.`
+
+`Our developers will double-check the security features to make sure the system is protected against potential DoS attacks. At the same time, we will run stress tests to evaluate performance and stability under heavy traffic.`
+
+`We are publishing this notification to inform you in advance, as the website may experience downtime during this period. Thank you for your understanding as we continue preparing updates and improvements to provide you with a better experience.`
+
+`Thank you,` `Support Team`
+
+Why was this notification published?
+
+## --answers--
+
+To explain the purpose of the website.
+
+### --feedback--
+
+The text does not focus on informing users about the purpose of the website.
+
+---
+
+To inform users in advance about the scheduled maintenance.
+
+---
+
+To announce new features for the website.
+
+### --feedback--
+
+The text does not mention new features.
+
+---
+
+To warn users about a system failure.
+
+### --feedback--
+
+The text is not about a system failure.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, consider the purpose of the notification.
+
+It clearly states that it is being published to inform users about the maintenance in advance.
+
+Look for the option that matches this intention.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
new file mode 100644
index 0000000000..69176c51a1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675948c97c0d4fd3d596960a.md
@@ -0,0 +1,232 @@
+---
+id: 675948c97c0d4fd3d596960a
+title: "Dialogue 2: Troubleshooting Authentication Errors"
+challengeType: 21
+dashedName: dialogue-2-troubleshooting-authentication-errors
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Alice",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Mark",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-2.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Alice",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Mark",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Alice",
+     "startTime": 1,
+     "finishTime": 4.7,
+     "dialogue": {
+       "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 5.6,
+     "finishTime": 9.16,
+     "dialogue": {
+       "text": "Yes, we have. Some users are complaining that they can't log in.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 9.38,
+     "finishTime": 11.02,
+     "dialogue": {
+       "text": "Did you figure out what's causing the problem?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 11.46,
+     "finishTime": 13.44,
+     "dialogue": {
+       "text": "I think it's related to our session management.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 13.76,
+     "finishTime": 15.9,
+     "dialogue": {
+       "text": "The tokens aren't being refreshed properly, are they?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 16.32,
+     "finishTime": 17.62,
+     "dialogue": {
+       "text": "That seems to be the case.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 17.86,
+     "finishTime": 21.38,
+     "dialogue": {
+       "text": "The system is supposed to renew tokens every 30 minutes, isn't it?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 21.8,
+     "finishTime": 23.82,
+     "dialogue": {
+       "text": "Yes, it should, but something's going wrong.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 24.02,
+     "finishTime": 26.36,
+     "dialogue": {
+       "text": "Are you going to check the server logs to find out what happened?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 26.36,
+     "finishTime": 31.24,
+     "dialogue": {
+       "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 31.58,
+     "finishTime": 34.88,
+     "dialogue": {
+       "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 34.98,
+     "finishTime": 36.1,
+     "dialogue": {
+       "text": "Will you help me with that?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 36.64,
+     "finishTime": 39.96,
+     "dialogue": {
+       "text": "Sure. We can do some tests on the staging server, can't we?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 40.54,
+     "finishTime": 42.86,
+     "dialogue": {
+       "text": "Yes, we can. That should give us more information.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 43.22,
+     "finishTime": 46.46,
+     "dialogue": {
+       "text": "By the way, have the support tickets been piling up because of this?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 47.8,
+     "finishTime": 51.06,
+     "dialogue": {
+       "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 51.48,
+     "finishTime": 53.86,
+     "dialogue": {
+       "text": "Absolutely. Let's work together to find a solution.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Alice",
+     "startTime": 54.16,
+     "finishTime": 56.06,
+     "dialogue": {
+       "text": "We don't want our users getting frustrated, do we?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Mark",
+     "startTime": 56.48,
+     "finishTime": 60.22,
+     "dialogue": {
+       "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Mark",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 60.72
+   },
+   {
+     "character": "Alice",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 61.22
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
new file mode 100644
index 0000000000..e42b4a420d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594c1c9c8fc90a8e6f2f75.md
@@ -0,0 +1,80 @@
+---
+id: 67594c1c9c8fc90a8e6f2f75
+title: Task 35
+challengeType: 22
+dashedName: task-35
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Mark, we've been having some trouble with our BLANK, haven't we?`
+
+## --blanks--
+
+`user authentication`
+
+### --feedback--
+
+This phrase of two words refers to the process of verifying a user's identity to allow access to a system or resource.
+
+# --explanation--
+
+`User authentication` is the process of verifying that a user is who they claim to be. It typically involves entering a username and password, scanning a fingerprint, or using another method to confirm identity. For example:
+
+`Our company uses two-factor user authentication. Users must enter their password and a code sent to their phone to log in.` - This means that the company adds an extra layer of security by requiring users to provide two separate pieces of information — a password and a code — to verify their identity and gain access to the system.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
new file mode 100644
index 0000000000..0fa629ecba
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67594e4ad681381278cee337.md
@@ -0,0 +1,94 @@
+---
+id: 67594e4ad681381278cee337
+title: Task 36
+challengeType: 22
+dashedName: task-36
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey Mark, we've been having some trouble with our user authentication, BLANK BLANK?`
+
+## --blanks--
+
+`haven't`
+
+### --feedback--
+
+This word is the negative form of `have` used in a tag question. It matches the `Present Perfect` tense in the sentence.
+
+---
+
+`we`
+
+### --feedback--
+
+This word is the subject of the tag question, matching the subject of the main sentence.
+
+# --explanation--
+
+Tag questions are short questions added to the end of a sentence. They are used to confirm information or ask for agreement. A tag question includes a helping verb and a pronoun that matches the subject of the main sentence. The verb in the tag question must match the verb tense of the main sentence.
+
+`Haven't` and `hasn't` are negative contractions of `have` and `has`, used in tag questions to confirm or check information.
+
+Use `haven't` when the subject is plural (like `we` or `they`) or when the subject is `I`. Use `hasn't` when the subject is singular (like `he`, `she`, or `it`). For example:
+
+- `We've been working hard, haven't we?` - The main sentence uses `we've` (`we have`), so the tag question uses `haven't we?` to confirm the statement.
+
+- `She's finished her report, hasn't she?` - The main sentence uses `she's` (`she has`), so the tag question uses `hasn't she?` to confirm the statement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
new file mode 100644
index 0000000000..6e1f0f7113
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675950eed633ac1ac3884471.md
@@ -0,0 +1,102 @@
+---
+id: 675950eed633ac1ac3884471
+title: Task 37
+challengeType: 19
+dashedName: task-37
+---
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice mean, and how does she convey this meaning?
+
+## --answers--
+
+She means everything is fine, and she conveys this by asking a direct question.
+
+### --feedback--
+
+Alice mentions having trouble, so this doesn't match her statement.
+
+---
+
+She means there is a problem with user authentication, and she conveys this by giving a detailed explanation.
+
+### --feedback--
+
+Alice doesn't give a detailed explanation; she uses a tag question to confirm the issue.
+
+---
+
+She means there is an issue with user authentication, and she conveys this using a tag question.
+
+---
+
+She means she needs Mark's help, and she conveys this by giving him instructions.
+
+### --feedback--
+
+Alice is not asking for help or giving instructions; she is highlighting a shared concern using a tag question.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Alice means there is a problem with their user authentication system. She uses a tag question (`haven't we?`) to involve Mark in the conversation and confirm that he is aware of the issue. Tag questions are a polite way to confirm shared understanding or agreement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
new file mode 100644
index 0000000000..821a5b7449
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675961ce80a70e23e933fa8c.md
@@ -0,0 +1,52 @@
+---
+id: 675961ce80a70e23e933fa8c
+title: Task 38
+challengeType: 19
+dashedName: task-38
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which option correctly uses `haven't` or `hasn't` in a tag question?
+
+## --answers--
+
+`She's completed the report, haven't she?`
+
+### --feedback--
+
+`Has` is used in the main sentence, so the tag question should be `hasn't she?`.
+
+---
+
+`We've been waiting for hours, hasn't we`
+
+### --feedback--
+
+`Have` is used in the main sentence, so the tag question should be `haven't we?`.
+
+---
+
+`They've solved the issue, hasn't they?`
+
+### --feedback--
+
+`Have` is used in the main sentence, so the tag question should be `haven't they?`.
+
+---
+
+`You've checked the logs, haven't you?`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Tag questions must match the auxiliary verb in the main sentence. Use `haven't` when the main sentence uses `have`. Use `hasn't` when the main sentence uses `has`.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
new file mode 100644
index 0000000000..e0ec293569
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675963eadf3bcf2ae50f74fe.md
@@ -0,0 +1,88 @@
+---
+id: 675963eadf3bcf2ae50f74fe
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Alice: Hey Mark, we've been having some trouble with our user authentication, haven't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct affirmative reply to Alice's question?
+
+## --answers--
+
+`No, we haven't.`
+
+### --feedback--
+
+This reply contradicts Alice's statement, as she is confirming there has been trouble.
+
+---
+
+`Yes, we have.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Alice uses a tag question to confirm that they have been experiencing trouble with their user authentication. The correct reply, `Yes, we have`, agrees with and confirms her statement.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.8,
+      "finishTimestamp": 4.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.7,
+      "dialogue": {
+        "text": "Hey, Mark. We've been having some trouble with our user authentication, haven't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
new file mode 100644
index 0000000000..52bd54cf43
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675966e572894133e1b3b275.md
@@ -0,0 +1,80 @@
+---
+id: 675966e572894133e1b3b275
+title: Task 40
+challengeType: 22
+dashedName: task-40
+---
+
+<!-- (audio) Mark: Yes, we have. Some users are complaining that they can't log in. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we have. Some users are BLANK that they can't log in.`
+
+## --blanks--
+
+`complaining`
+
+### --feedback--
+
+This word in the `-ing` form means saying someone is unhappy or upset about something.
+
+# --explanation--
+
+The word `complaining` is the `Present Participle` form of the verb `complain`. It means to express dissatisfaction, annoyance, or a problem about something. For example:
+
+`The customer is complaining about the delay in service.` - It means that the customer is expressing unhappiness about the late service.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.2,
+      "finishTimestamp": 8.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.76,
+      "dialogue": {
+        "text": "Yes, we have. Some users are complaining that they can't log in.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
new file mode 100644
index 0000000000..2fd2cc9bf9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a3d84d89c4474d6a06b6.md
@@ -0,0 +1,102 @@
+---
+id: 6759a3d84d89c4474d6a06b6
+title: Task 41
+challengeType: 19
+dashedName: task-41
+---
+
+<!-- (audio) Mark: Yes, we have. Some users are complaining that they can't log in. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the trouble that Mark mentions?
+
+## --answers--
+
+Users are unhappy with the design of the system.
+
+### --feedback--
+
+Mark does not mention the design; he talks about a specific issue.
+
+---
+
+Some users cannot log in.
+
+---
+
+The system is running too slowly.
+
+### --feedback--
+
+Mark does not mention the system's speed; the issue is about something else.
+
+---
+
+Users are unable to reset their passwords.
+
+### --feedback--
+
+Mark does not mention password resets; he specifically refers to something else.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark clearly says that the problem is with certain users being unable to access the system due to login issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.2,
+      "finishTimestamp": 8.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.76,
+      "dialogue": {
+        "text": "Yes, we have. Some users are complaining that they can't log in.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
new file mode 100644
index 0000000000..a1aea7722f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a570761b794ba1dc57e5.md
@@ -0,0 +1,102 @@
+---
+id: 6759a570761b794ba1dc57e5
+title: Task 42
+challengeType: 19
+dashedName: task-42
+---
+
+<!-- (audio) Mark: Did you figure out what's causing the problem? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark want to know?
+
+## --answers--
+
+If the cause of the problem has been identified.
+
+---
+
+If the problem has been fixed.
+
+### --feedback--
+
+Mark is not asking whether the problem is fixed.
+
+---
+
+What steps were taken to solve the problem.
+
+### --feedback--
+
+Mark is not asking about the steps taken.
+
+---
+
+If there will be future problems.
+
+### --feedback--
+
+Mark is focusing on the current issue, not on potential future problems.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Mark's question shows he is specifically interested in identifying the cause of the issue, rather than focusing on its resolution or future concerns.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.18,
+      "finishTimestamp": 10.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 2.64,
+      "dialogue": {
+        "text": "Did you figure out what's causing the problem?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 3.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
new file mode 100644
index 0000000000..2bbc6c3b21
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a679b6934850b6b0a31d.md
@@ -0,0 +1,92 @@
+---
+id: 6759a679b6934850b6b0a31d
+title: Task 43
+challengeType: 22
+dashedName: task-43
+---
+
+<!-- (audio) Alice: I think it's related to our session management. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I think it's related to our BLANK BLANK.`
+
+## --blanks--
+
+`session`
+
+### --feedback--
+
+This word refers to a period of time during which a user interacts with a system.
+
+---
+
+`management`
+
+### --feedback--
+
+This word refers to the process of handling or organizing something.
+
+# --explanation--
+
+The word `session` refers to a specific period during which a user interacts with a system or application. For example:
+
+`The user's session timed out after 30 minutes of inactivity.` - This means that the system ended the user's active connection because they did not perform any actions for 30 minutes.
+
+The word `management` means the process of handling, controlling, or organizing something. For example:
+
+`Good management of resources is essential for project success.` - This sentence highlights the importance of planning and organizing resources effectively to ensure the success of a project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.26,
+      "finishTimestamp": 13.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 2.98,
+      "dialogue": {
+        "text": "I think it's related to our session management.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
new file mode 100644
index 0000000000..6f45bd2477
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a7cc60ea94557c578ed4.md
@@ -0,0 +1,92 @@
+---
+id: 6759a7cc60ea94557c578ed4
+title: Task 44
+challengeType: 22
+dashedName: task-44
+---
+
+<!-- (audio) Alice: The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The BLANK aren't being BLANK properly, are they?`
+
+## --blanks--
+
+`tokens`
+
+### --feedback--
+
+This word in the plural form refers to small pieces of information used to authenticate or identify users in a system.
+
+---
+
+`refreshed`
+
+### --feedback--
+
+This word ended with `-ed` means updated or renewed to ensure that something continues to function.
+
+# --explanation--
+
+The word `tokens` refers to pieces of information, often in digital form, that are used in authentication systems to verify or identify a user. For example:
+
+`The system uses tokens to verify each user's session.` - This means the system relies on pieces of information as a secure way to confirm that a user is authorized to access specific resources or continue a session.
+
+The word `refreshed` means updated or renewed to ensure continued validity or functionality. For example:
+
+`The page was refreshed to display the latest updates.` - In this case, `refreshed` means the page was reloaded to show new or updated information, ensuring that the user sees the most current version of the content.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.36,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.14,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.64
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
new file mode 100644
index 0000000000..528025cf73
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6759a98f5028cb5bdf0a6f4b.md
@@ -0,0 +1,90 @@
+---
+id: 6759a98f5028cb5bdf0a6f4b
+title: Task 45
+challengeType: 22
+dashedName: task-45
+---
+
+<!-- (audio) Alice: The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The tokens aren't being refreshed properly, BLANK BLANK?`
+
+## --blanks--
+
+`are`
+
+### --feedback--
+
+This word is part of the tag question and matches `aren't` from the main sentence.
+
+---
+
+`they`
+
+### --feedback--
+
+This word refers to the subject `tokens` in the main sentence and ensures the tag question agrees with it.
+
+# --explanation--
+
+Tag questions are negative if the main sentence is positive, and positive if the main sentence is negative.
+
+The phrase `are they?` is a tag question added to the end of a negative sentence to confirm or check information. For example:
+
+`The updates aren't applied automatically, are they?` - Here, `are they?` checks for confirmation that updates are not being applied automatically. The main sentence is negative, so the tag question is positive.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.36,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.14,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 3.64
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
new file mode 100644
index 0000000000..87a1126580
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675beaae0511b83217778531.md
@@ -0,0 +1,111 @@
+---
+id: 675beaae0511b83217778531
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- (audio) Alice: I think it's related to our session management. The tokens aren't being refreshed properly, are they? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Alice explain the problem?
+
+## --answers--
+
+She thinks the problem is with how the session management is working, especially the way the tokens are not being updated correctly.
+
+---
+
+She thinks the problem is with the design of the tokens.
+
+### --feedback--
+
+Alice does not talk about the design of the tokens.
+
+---
+
+She thinks the problem is with the login process.
+
+### --feedback--
+
+Alice does not mention the login process.
+
+---
+
+She thinks the problem is caused by the network connection.
+
+### --feedback--
+
+Alice does not mention the network connection.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Alice's statement shows that the issue is about session management, particularly how the system handles refreshing the tokens.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.26,
+      "finishTimestamp": 15.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 2.98,
+      "dialogue": {
+        "text": "I think it's related to our session management.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.3,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "The tokens aren't being refreshed properly, are they?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
new file mode 100644
index 0000000000..7ac906e65d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d10fd9150e00d5ea464c2.md
@@ -0,0 +1,52 @@
+---
+id: 675d10fd9150e00d5ea464c2
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which of the following sentences uses a tag question correctly?
+
+## --answers--
+
+`The tokens are updated, are they?`
+
+### --feedback--
+
+Since the main sentence is positive, the tag question should be negative: `aren't they?`.
+
+---
+
+`The tokens are updated, aren't they?`
+
+---
+
+`The tokens are updated, are them?`
+
+### --feedback--
+
+The tag question must use the subject `they` instead of the object `them`. The correct form is `are they?`.
+
+---
+
+`The tokens are updated, do they?`
+
+### --feedback--
+
+`Do they?` is used for the verb `do`, not `are`. For a sentence with `are`, the correct tag question is `aren't they?`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In tag questions, when the main sentence is positive and the subject is plural (like `tokens`), you use a negative tag question, `aren't they?`. This confirms or checks the information. The other options do not follow the correct tag question structure.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
new file mode 100644
index 0000000000..c23a9e0f40
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d1437a379f517d766a249.md
@@ -0,0 +1,92 @@
+---
+id: 675d1437a379f517d766a249
+title: Task 48
+challengeType: 22
+dashedName: task-48
+---
+
+<!-- (audio) Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That seems to be the case. The system is supposed to BLANK tokens every 30 minutes, BLANK?`
+
+## --blanks--
+
+`renew`
+
+### --feedback--
+
+It means to make something valid again or to refresh it.
+
+---
+
+`isn't it`
+
+### --feedback--
+
+These two words form a tag question that confirms or checks the information in the main sentence. The first word is contraction of `is not`.
+
+# --explanation--
+
+`Renew` means to refresh, extend, or restore something to its original condition. For example:
+
+`The subscription needs to renew every year.` - It means to extend or refresh the subscription to keep it active for another year, similar to how tokens need to be refreshed every 30 minutes.
+
+`Isn't it` is used in tag questions to confirm or check information. For example:
+
+`The UI is nice, isn't it?` - The main statement is positive, so the tag question is negative. It asks for confirmation that the UI is, indeed, nice.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 15.92,
+      "finishTimestamp": 21.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 6.26,
+      "dialogue": {
+        "text": "That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
new file mode 100644
index 0000000000..3e6fea5f4b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d16180e3c3f1e843ed138.md
@@ -0,0 +1,102 @@
+---
+id: 675d16180e3c3f1e843ed138
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- (audio) Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Mark further analyze the cause of the problem?
+
+## --answers--
+
+The system needs more time to update tokens.
+
+### --feedback--
+
+Mark's analysis does not mention more time being needed to update tokens. Instead, he discusses the specific action of token renewal every 30 minutes.
+
+---
+
+The system should not update tokens every 30 minutes.
+
+### --feedback--
+
+Mark mentions that the system is supposed to renew tokens every 30 minutes, so this answer does not reflect his analysis correctly.
+
+---
+
+The system is supposed to renew tokens every 30 minutes.
+
+---
+
+The system isn't working properly because of a bug.
+
+### --feedback--
+
+Mark doesn't mention a bug causing the issue. Instead, he is discussing the intended behavior of the system regarding token renewal.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Mark is explaining that the system is designed to renew tokens every 30 minutes. He is confirming whether the system is functioning as expected, rather than suggesting a different cause or problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 15.92,
+      "finishTimestamp": 21.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 6.26,
+      "dialogue": {
+        "text": "That seems to be the case. The system is supposed to renew tokens every 30 minutes, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
new file mode 100644
index 0000000000..f6db41151f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d177b1b7aca23c7f1b6d9.md
@@ -0,0 +1,97 @@
+---
+id: 675d177b1b7aca23c7f1b6d9
+title: Task 50
+challengeType: 22
+dashedName: task-50
+---
+
+<!-- (audio) Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, it should. But something's going wrong. Are you going to check the BLANK BLANK to find out what happened?`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This word refers to a computer system or software that provides data or services to other computers over a network.
+
+---
+
+`logs`
+
+### --feedback--
+
+It refers to records or files that automatically track events, processes, or activities on a system, such as error messages or system updates.
+
+# --explanation--
+
+`Logs` refer to recorded data that a system keeps to track events and actions. They are very helpful for finding out what happened during a process or diagnosing problems. For example:
+
+`The IT team checked the system logs to find out why the server crashed.` - Here, `logs` are used to track and record system activity, helping the team understand what caused the server failure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 21.6,
+      "finishTimestamp": 26.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.02,
+      "dialogue": {
+        "text": "Yes, it should, but something's going wrong.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.22,
+      "finishTime": 5.56,
+      "dialogue": {
+        "text": "Are you going to check the server logs to find out what happened?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
new file mode 100644
index 0000000000..b1d9ebb8be
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d18c725ee4928ba83fa7c.md
@@ -0,0 +1,111 @@
+---
+id: 675d18c725ee4928ba83fa7c
+title: Task 51
+challengeType: 19
+dashedName: task-51
+---
+
+<!-- (audio) Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice ask about?
+
+## --answers--
+
+If the server logs are being checked to understand the problem.
+
+### --feedback--
+
+Alice asks if the server logs will be checked, not if they are already being checked.
+
+---
+
+If something is going wrong with the server.
+
+### --feedback--
+
+Alice mentions that something is going wrong, but her main question is about checking the server logs, not just the problem.
+
+---
+
+If the server logs contain useful information.
+
+### --feedback--
+
+Alice's question is about whether the server logs will be checked, not whether they contain useful information.
+
+---
+
+If the server logs will be checked to find out what happened.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice is asking whether the server logs will be checked to investigate what caused the issue. The focus is on reviewing the logs to find out what happened.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 21.6,
+      "finishTimestamp": 26.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.02,
+      "dialogue": {
+        "text": "Yes, it should, but something's going wrong.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.22,
+      "finishTime": 5.56,
+      "dialogue": {
+        "text": "Are you going to check the server logs to find out what happened?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
new file mode 100644
index 0000000000..0f233ccf84
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6e0e52e8ee2d7b2b69cf.md
@@ -0,0 +1,90 @@
+---
+id: 675d6e0e52e8ee2d7b2b69cf
+title: Task 52
+challengeType: 22
+dashedName: task-52
+---
+
+<!-- (audio) Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I already did. There's nothing BLANK in the logs. This is strange, BLANK it?`
+
+## --blanks--
+
+`unusual`
+
+### --feedback--
+
+This word means something that is not normal or expected.
+
+---
+
+`isn't`
+
+### --feedback--
+
+This is part of the tag question and is used to confirm or check information after a positive statement.
+
+# --explanation--
+
+`Unusual` means something that is not common, normal, or expected. It describes something out of the ordinary. For example:
+
+`It's unusual for him to be late for a meeting.` - It means that it is not normal or expected for the person to arrive late. It suggests that the behavior is out of the ordinary.
+
+`Isn't` is used in tag questions to confirm or check information. It's used after a positive statement using `is`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.26,
+      "finishTimestamp": 31.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
new file mode 100644
index 0000000000..99b9220e3d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d6f815fb6c83276d12870.md
@@ -0,0 +1,103 @@
+---
+id: 675d6f815fb6c83276d12870
+title: Task 53
+challengeType: 19
+dashedName: task-53
+---
+
+<!-- (audio) Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark find about the logs?
+
+## --answers--
+
+There are multiple errors in the logs.
+
+### --feedback--
+
+Mark does not mention finding errors in the logs.
+
+---
+
+The logs indicate a server crash.
+
+### --feedback--
+
+Mark does not mention any indication of a server crash.
+
+---
+
+There are no unexpected things in the logs.
+
+---
+
+The logs are missing important data.
+
+### --feedback--
+
+Mark does not say that data is missing.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Mark says, `There's nothing unusual in the logs.` This means he has reviewed the logs and found no unexpected or abnormal entries.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.26,
+      "finishTimestamp": 31.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "I already did. There's nothing unusual in the logs. This is strange, isn't it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
new file mode 100644
index 0000000000..8812758cf0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d710fb8118237e416155a.md
@@ -0,0 +1,89 @@
+---
+id: 675d710fb8118237e416155a
+title: Task 54
+challengeType: 22
+dashedName: task-54
+---
+
+<!-- (audio) Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It is. Let's run a few more tests to see if we can BLANK the issue. Will you help me with that?`
+
+## --blanks--
+
+`replicate`
+
+### --feedback--
+
+The word means to copy or repeat something exactly.
+
+# --explanation--
+
+`Replicate` means to reproduce or repeat something, especially to test or confirm results. For example:
+
+`The scientists tried to replicate the experiment to confirm the results.` - It means the scientists tried to repeat the experiment under the same conditions to see if the same results occur.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.38,
+      "finishTimestamp": 35.9
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.4,
+      "finishTime": 5.52,
+      "dialogue": {
+        "text": "Will you help me with that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
new file mode 100644
index 0000000000..5bdba665a4
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72320c09a53c1020e59d.md
@@ -0,0 +1,111 @@
+---
+id: 675d72320c09a53c1020e59d
+title: Task 55
+challengeType: 19
+dashedName: task-55
+---
+
+<!-- (audio) Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice suggest doing?
+
+## --answers--
+
+Stopping all tests and checking the logs again.
+
+### --feedback--
+
+Alice does not suggest stopping tests; she wants to run more tests to replicate the issue.
+
+---
+
+Running only one test to see if it works.
+
+### --feedback--
+
+Alice suggests running a few tests, not just one.
+
+---
+
+Ignoring the issue and waiting for more data.
+
+### --feedback--
+
+Alice wants to actively test and replicate the issue, not ignore it.
+
+---
+
+Running more tests to try to replicate the issue.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice says, `Let's run a few more tests to see if we can replicate the issue.` This means she is suggesting performing additional tests to reproduce the problem and understand it better.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.38,
+      "finishTimestamp": 35.9
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "It is. Let's run a few more tests to see if we can replicate the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.4,
+      "finishTime": 5.52,
+      "dialogue": {
+        "text": "Will you help me with that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
new file mode 100644
index 0000000000..9e48e9028b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d72b7d86e163e326979e5.md
@@ -0,0 +1,92 @@
+---
+id: 675d72b7d86e163e326979e5
+title: Task 56
+challengeType: 22
+dashedName: task-56
+---
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sure. We can do some tests on the BLANK, BLANK we?`
+
+## --blanks--
+
+`staging server`
+
+### --feedback--
+
+This phrase of two words means a separate environment used for testing changes before they go live. It mirrors the production server to ensure updates work as expected.
+
+---
+
+`can't`
+
+### --feedback--
+
+It is part of a tag question, used here to confirm or check agreement after a positive main statement using `can`.
+
+# --explanation--
+
+`Staging server` refers to a testing environment where changes to a system or application are tested before being implemented on the live, production server. For example:
+
+`We uploaded the new website features to the staging server for testing.` - In this sentence, `staging server` is the testing space used to ensure that the new website features function correctly before they go live.
+
+`Can't` in this context is part of a tag question. It follows a positive statement to confirm or check agreement in a polite or conversational way. For example:
+
+`We can finish the task today, can't we?` - In this sentence, the positive statement (`We can finish the task today`) is followed by the negative tag question (`can't we?`) to check for agreement or confirmation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
new file mode 100644
index 0000000000..7b5c89d8a0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d7493249c24447ca9e166.md
@@ -0,0 +1,102 @@
+---
+id: 675d7493249c24447ca9e166
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Mark agree with Alice?
+
+## --answers--
+
+Yes, he agrees with her suggestion.
+
+---
+
+No, he suggests doing something different.
+
+### --feedback--
+
+Mark is agreeing with Alice's suggestion and proposing to test on the staging server.
+
+---
+
+No, he thinks the issue cannot be tested.
+
+### --feedback--
+
+Mark agrees to do tests on the staging server, showing he believes the issue can be tested.
+
+---
+
+Yes, but only if they use the production server.
+
+### --feedback--
+
+Mark specifically mentions doing tests on the staging server, not the production server.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Mark's statement shows he agrees with Alice and suggests proceeding with testing in the staging environment.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
new file mode 100644
index 0000000000..174f44390b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d86beee48ab4941767200.md
@@ -0,0 +1,52 @@
+---
+id: 675d86beee48ab4941767200
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence uses `can't` in a tag question correctly?
+
+## --answers--
+
+`We can fix this issue, can't they?`
+
+### --feedback--
+
+The subject of the main sentence is `we`, but the tag uses `they`, which is a mismatch.
+
+---
+
+`She can't help us, can't she?`
+
+### --feedback--
+
+The main sentence is negative, so the tag should be positive: `can she?`.
+
+---
+
+`We can finish the task today, can't we?`
+
+---
+
+`They can join the meeting later, can't she?`
+
+### --feedback--
+
+The subject of the main sentence is `they`, but the tag uses `she`, which does not match.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In tag questions, the subject and auxiliary verb in the tag must match the main sentence.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
new file mode 100644
index 0000000000..81638489b1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d87ed627c734d9ee5c028.md
@@ -0,0 +1,88 @@
+---
+id: 675d87ed627c734d9ee5c028
+title: Task 59
+challengeType: 19
+dashedName: task-59
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Mark: Sure. We can do some tests on the staging server, can't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct affirmative answer to Mark's question?
+
+## --answers--
+
+`No, we can't.`
+
+### --feedback--
+
+This is a negative response, but Mark is seeking agreement for his suggestion.
+
+---
+
+`Yes, we can.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark's question, `can't we?`, is a tag question seeking confirmation. The correct affirmative answer is `Yes, we can`, to agree with his suggestion of doing tests on the staging server.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.44,
+      "finishTimestamp": 39.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.32,
+      "dialogue": {
+        "text": "Sure. We can do some tests on the staging server, can't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 4.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
new file mode 100644
index 0000000000..d4007e923e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d88ce781849512cd7d426.md
@@ -0,0 +1,101 @@
+---
+id: 675d88ce781849512cd7d426
+title: Task 60
+challengeType: 22
+dashedName: task-60
+---
+
+<!-- (audio) Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we can. That should give us more information. By the way, have the BLANK been BLANK because of this?`
+
+## --blanks--
+
+`support tickets`
+
+### --feedback--
+
+This phrase of two words refers to requests or reports submitted by users needing help or reporting issues to a support team. The second word is in the plural form.
+
+---
+
+`piling up`
+
+### --feedback--
+
+This phrase of two words means accumulating or increasing in number, often to an overwhelming amount. The first word is in `-ing` form.
+
+# --explanation--
+
+`Support tickets` are messages or requests sent by users to a support team to report problems or ask for assistance. For example:
+
+`The support team resolved over 50 support tickets this week.` - It means more than 50 issues reported by users were addressed by the support team.
+
+`Piling up` means accumulating or gathering in a large quantity, often more than expected or manageable. For example:
+
+`The homework assignments are piling up as the deadline approaches.` - This example highlights how the number of homework assignments is growing significantly, creating a sense of urgency or pressure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.14,
+      "finishTimestamp": 46.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "Yes, we can. That should give us more information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.78,
+      "finishTime": 7.12,
+      "dialogue": {
+        "text": "By the way, have the support tickets been piling up because of this?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 7.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
new file mode 100644
index 0000000000..feeccda8b8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8aabc2397c583c081ea9.md
@@ -0,0 +1,111 @@
+---
+id: 675d8aabc2397c583c081ea9
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (audio) Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice want to know?
+
+## --answers--
+
+If the problem is resolved.
+
+### --feedback--
+
+Alice does not ask if the problem is resolved; she asks about the number of support tickets.
+
+---
+
+If users have stopped reporting issues.
+
+### --feedback--
+
+Alice is not asking if users stopped reporting issues; she asks if the support tickets are increasing.
+
+---
+
+If the support tickets have increased because of the problem.
+
+---
+
+If the support team is resolving the tickets quickly.
+
+### --feedback--
+
+Alice does not ask about the speed of resolving tickets; she asks if the number of tickets has grown.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Alice's question shows she wants to know if the number of support tickets has increased as a result of the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.14,
+      "finishTimestamp": 46.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "Yes, we can. That should give us more information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 3.78,
+      "finishTime": 7.12,
+      "dialogue": {
+        "text": "By the way, have the support tickets been piling up because of this?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 7.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
new file mode 100644
index 0000000000..c18ab2b4c5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8b482d5fa45b0226a891.md
@@ -0,0 +1,92 @@
+---
+id: 675d8b482d5fa45b0226a891
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (audio) Mark: Unfortunately, yes. We need to resolve this quickly, don't we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Unfortunately, yes. We need to BLANK this quickly, BLANK we?`
+
+## --blanks--
+
+`resolve`
+
+### --feedback--
+
+This word means to find a solution to a problem or deal with an issue effectively.
+
+---
+
+`don't`
+
+### --feedback--
+
+It is part of a tag question, used to confirm or check agreement after a positive main sentence.
+
+# --explanation--
+
+`Resolve` means to solve or fix a problem or situation. It implies taking action to address and settle an issue. For example:
+
+`The team worked hard to resolve the customer complaints.` - It indicates that the team took steps to solve the issues raised by customers.
+
+`Don't` in tag questions is used after a positive main sentence to seek agreement or confirmation in a polite or conversational way. For example:
+
+`We need to leave now, don't we?` - The main sentence is positive, and the tag question (`don't we?`) is used to confirm or check agreement about the urgency to leave.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 46.7,
+      "finishTimestamp": 50.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.86,
+      "dialogue": {
+        "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
new file mode 100644
index 0000000000..3360968cb7
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8c5d1a1d775f78424011.md
@@ -0,0 +1,102 @@
+---
+id: 675d8c5d1a1d775f78424011
+title: Task 63
+challengeType: 19
+dashedName: task-63
+---
+
+<!-- (audio) Mark: Unfortunately, yes. We need to resolve this quickly, don't we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Mark say about the status of the support tickets?
+
+## --answers--
+
+The support tickets have already been resolved.
+
+### --feedback--
+
+Mark says they still need to resolve the support tickets quickly, which indicates they haven't been resolved yet.
+
+---
+
+The support tickets still need to be resolved.
+
+---
+
+The support tickets are not urgent.
+
+### --feedback--
+
+Mark emphasizes urgency by saying they need to resolve the support tickets quickly.
+
+---
+
+There is no mention of any support ticket.
+
+### --feedback--
+
+Mark emphasizes resolving the support tickets quickly, so he admits there are support tickets.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark says, `We need to resolve this quickly`, which indicates the support tickets are still there and require immediate attention.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 46.7,
+      "finishTimestamp": 50.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.86,
+      "dialogue": {
+        "text": "Unfortunately, yes. We need to resolve this quickly, don't we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
new file mode 100644
index 0000000000..82f41cb2b8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8dfaad5f4765cbd8c013.md
@@ -0,0 +1,52 @@
+---
+id: 675d8dfaad5f4765cbd8c013
+title: Task 64
+challengeType: 19
+dashedName: task-64
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+Which sentence uses `don't` correctly in a tag question?
+
+## --answers--
+
+`She likes coffee, don't she?`
+
+### --feedback--
+
+The subject `she` requires `doesn't`, not `don't`.
+
+---
+
+`We need to resolve this quickly, don't we?`
+
+---
+
+`They know the answer, don't it?`
+
+### --feedback--
+
+The subject `they` requires `don't they`, not `don't it`.
+
+---
+
+`The system is working fine, don't it?`
+
+### --feedback--
+
+The subject `it` requires `doesn't`, not `don't`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Tag questions must match the subject and auxiliary verb of the main sentence.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
new file mode 100644
index 0000000000..5fa7d60824
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d8eddf05fb469a75ef543.md
@@ -0,0 +1,113 @@
+---
+id: 675d8eddf05fb469a75ef543
+title: Task 65
+challengeType: 22
+dashedName: task-65
+---
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. Let's work together to find a BLANK. We don't want our users getting BLANK, BLANK we?`
+
+## --blanks--
+
+`solution`
+
+### --feedback--
+
+It refers to an answer or way to fix a problem or difficulty.
+
+---
+
+`frustrated`
+
+### --feedback--
+
+It describes feeling annoyed or upset because something is not working as expected or taking too long.
+
+---
+
+`do`
+
+### --feedback--
+
+It is part of a tag question and is used here after a negative main sentence to confirm or check agreement.
+
+# --explanation--
+
+`Solution` means an answer or way to fix a problem. For example:
+
+`The engineers worked hard to find a solution to the network issue.` - It means the engineers worked hard to resolve the network problem.
+
+`Frustrated` describes a feeling of being upset or annoyed when something doesn't work or takes too long. For example:
+
+`The customers were frustrated by the long wait times.` - It describes the annoyance and dissatisfaction customers felt because of delays.
+
+`Do` in tag questions is used after a negative main sentence to confirm or check agreement. For example:
+
+`We don't need to leave now, do we?` - The main sentence is negative, and the tag (`do we?`) is positive, asking for confirmation in a conversational way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.88,
+      "finishTimestamp": 55.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Absolutely. Let's work together to find a solution.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.08,
+      "finishTime": 5.98,
+      "dialogue": {
+        "text": "We don't want our users getting frustrated, do we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
new file mode 100644
index 0000000000..fca818dd8c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675d91adb9fb7173f4a7a4c7.md
@@ -0,0 +1,111 @@
+---
+id: 675d91adb9fb7173f4a7a4c7
+title: Task 66
+challengeType: 19
+dashedName: task-66
+---
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Alice propose?
+
+## --answers--
+
+That they analyze the problem separately.
+
+### --feedback--
+
+Alice suggests working together, not separately.
+
+---
+
+That they stop working on the issue for now.
+
+### --feedback--
+
+Alice emphasizes finding a solution, not stopping work.
+
+---
+
+That they wait for users to report more problems.
+
+### --feedback--
+
+Alice wants to prevent users from getting frustrated, not wait for more problems.
+
+---
+
+That they work together to find a solution.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Alice's statement shows she is proposing a collaborative approach to resolving the issue.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "company2-center.png",
+     "characters": [
+       {
+         "character": "Alice",
+         "position": {
+           "x": 50,
+           "y": 0,
+           "z": 1.4
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-2.mp3",
+       "startTime": 1,
+       "startTimestamp": 51.28,
+       "finishTimestamp": 55.86
+     }
+   },
+   "commands": [
+     {
+       "character": "Alice",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Alice",
+       "startTime": 1,
+       "finishTime": 3.38,
+       "dialogue": {
+         "text": "Absolutely. Let's work together to find a solution.",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Alice",
+       "startTime": 3.68,
+       "finishTime": 5.58,
+       "dialogue": {
+         "text": "We don't want our users getting frustrated, do we?",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Alice",
+       "opacity": 0,
+       "startTime": 6.08
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
new file mode 100644
index 0000000000..ca19f996d6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6dfe0160bb66faa60a68.md
@@ -0,0 +1,97 @@
+---
+id: 675e6dfe0160bb66faa60a68
+title: Task 67
+challengeType: 19
+dashedName: task-67
+---
+
+<!-- SPEAKING -->
+
+<!-- (audio) Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, do we? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the correct negative answer to Alice's question?
+
+## --answers--
+
+`No, we don't.`
+
+---
+
+`Yes, we don't.`
+
+### --feedback--
+
+This is not grammatically correct as a negative response.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Alice's question expects a confirmation. The correct negative answer is `No, we don't`, to agree that they don't want users to get frustrated.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Alice",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.88,
+      "finishTimestamp": 55.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Alice",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Alice",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Absolutely. Let's work together to find a solution.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "startTime": 4.08,
+      "finishTime": 5.98,
+      "dialogue": {
+        "text": "We don't want our users getting frustrated, do we?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Alice",
+      "opacity": 0,
+      "startTime": 6.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
new file mode 100644
index 0000000000..40d5986e5b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e6f0bf7f7eb69ddffef81.md
@@ -0,0 +1,80 @@
+---
+id: 675e6f0bf7f7eb69ddffef81
+title: Task 68
+challengeType: 22
+dashedName: task-68
+---
+
+<!-- (audio) Mark: No, we don't. Okay, let's get to work and see if we can sort this out. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`No, we don't. Okay, let's get to work and see if we can BLANK.`
+
+## --blanks--
+
+`sort this out`
+
+### --feedback--
+
+This phrase of three words means to solve a problem or deal with a difficult situation.
+
+# --explanation--
+
+`Sort this out` means to solve or fix a specific problem. It is a casual way of saying `figure out a solution` or `resolve an issue`. The general phrase `sort out` can also be used more broadly for organizing or dealing with problems. For example:
+
+`We need to sort out the issues with the payment system before launch.` - It means you need to fix or resolve the problems with the payment system to ensure everything works correctly before launching it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 56.08,
+      "finishTimestamp": 60.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.44
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
new file mode 100644
index 0000000000..7bdf7263b2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e70d7b854926d7f18693c.md
@@ -0,0 +1,102 @@
+---
+id: 675e70d7b854926d7f18693c
+title: Task 69
+challengeType: 19
+dashedName: task-69
+---
+
+<!-- (audio) Mark: No, we don't. Okay, let's get to work and see if we can sort this out. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Does Mark agree with Alice?
+
+## --answers--
+
+No, he wants to stop working on the issue.
+
+### --feedback--
+
+Mark does not suggest stopping work. He is ready to address the issue and work on a solution.
+
+---
+
+Yes, he agrees and is ready to work on the solution.
+
+---
+
+No, he disagrees and wants to work on something else.
+
+### --feedback--
+
+Mark agrees with Alice's suggestion to solve the issue and does not propose working on something else.
+
+---
+
+Yes, but he wants Alice to handle it alone.
+
+### --feedback--
+
+Mark does not suggest that Alice handle it alone. He shows willingness to collaborate on solving the problem.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Mark's reply shows he agrees with Alice's approach and is ready to collaborate on solving the issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Mark",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 56.08,
+      "finishTimestamp": 60.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Mark",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Mark",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "No, we don't. Okay, let's get to work and see if we can sort this out.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Mark",
+      "opacity": 0,
+      "startTime": 5.44
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
new file mode 100644
index 0000000000..6185adbb98
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7387be428072d95baeac.md
@@ -0,0 +1,94 @@
+---
+id: 675e7387be428072d95baeac
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`haven't`, `isn't`, `have`, `can't`, `do`, and `don't`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Alice: Hey Mark, we've been having some trouble with our user authentication, BLANK we?`
+
+`Mark: Yes, we BLANK. Some users are complaining that they can't log in. Did you figure out what's causing the problem?`
+
+`Alice: I think it's related to our session management. The tokens aren't being refreshed properly, are they?`
+
+`Mark: That seems to be the case. The system is supposed to renew tokens every 30 minutes, BLANK it?`
+
+`Alice: Yes, it should. But something's going wrong. Are you going to check the server logs to find out what happened?`
+
+`Mark: I already did. There's nothing unusual in the logs. This is strange, isn't it?`
+
+`Alice: It is. Let's run a few more tests to see if we can replicate the issue. Will you help me with that?`
+
+`Mark: Sure. We can do some tests on the staging server, BLANK we?`
+
+`Alice: Yes, we can. That should give us more information. By the way, have the support tickets been piling up because of this?`
+
+`Mark: Unfortunately, yes. We need to resolve this quickly, BLANK we?`
+
+`Alice: Absolutely. Let's work together to find a solution. We don't want our users getting frustrated, BLANK we?`
+
+`Mark: No, we don't. Okay, let's get to work and see if we can sort this out.`
+
+## --blanks--
+
+`haven't`
+
+### --feedback--
+
+This is a contraction of `have not` used in a tag question.
+
+---
+
+`have`
+
+### --feedback--
+
+This is a part of a confirmation response for questions like `haven't they?`.
+
+---
+
+`isn't`
+
+### --feedback--
+
+This is a contraction of `is not` used in a tag question.
+
+---
+
+`can't`
+
+### --feedback--
+
+This is a contraction of `can not` used in a tag question.
+
+---
+
+`don't`
+
+### --feedback--
+
+This is a contraction of `do not` used in a tag question.
+
+---
+
+`do`
+
+### --feedback--
+
+This is an auxiliary verb used in a tag question. It pairs with a negative main sentence like `We don't want our users getting frustrated`, to check for agreement.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
new file mode 100644
index 0000000000..c7b8e7801d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e79e6ecfda37e1f49be65.md
@@ -0,0 +1,64 @@
+---
+id: 675e79e6ecfda37e1f49be65
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What is the first step to solving login problems?
+
+## --answers--
+
+Testing on the staging server.
+
+### --feedback--
+
+Testing on the staging server is done after analyzing the logs, not as the first step.
+
+---
+
+Analyzing the server logs.
+
+---
+
+Replicating the issue in the live system.
+
+### --feedback--
+
+Issues should not be replicated in the live system; they are tested on the staging server.
+
+---
+
+Waiting for more support tickets to pile up.
+
+### --feedback--
+
+Waiting for more support tickets delays the resolution of problems and frustrates users further.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, look at the sequence Mark suggests.
+
+He mentions that analyzing server logs is the first step to identifying errors and unusual behavior. This makes logs the starting point in solving login issues.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
new file mode 100644
index 0000000000..b5623c50f7
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e7cc999813e83379b139c.md
@@ -0,0 +1,64 @@
+---
+id: 675e7cc999813e83379b139c
+title: Task 72
+challengeType: 19
+dashedName: task-72
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+Why are staging servers important?
+
+## --answers--
+
+They help users log in faster.
+
+### --feedback--
+
+Staging servers are for testing, not for directly improving login speed.
+
+---
+
+They replace server logs in testing.
+
+### --feedback--
+
+Staging servers don't replace server logs; both are tools used for different purposes during testing.
+
+---
+
+They allow safe testing of solutions.
+
+---
+
+They prevent tokens from expiring.
+
+### --feedback--
+
+Tokens are managed through session management, not staging servers.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, consider what Mark says about staging servers.
+
+He highlights their role in testing solutions safely without affecting the live system. This makes them critical for troubleshooting and resolving problems effectively.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
new file mode 100644
index 0000000000..a5683adcde
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8013d40d0d860143c14f.md
@@ -0,0 +1,64 @@
+---
+id: 675e8013d40d0d860143c14f
+title: Task 73
+challengeType: 19
+dashedName: task-73
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What happens if tokens aren't renewed on time?
+
+## --answers--
+
+Support tickets are automatically resolved.
+
+### --feedback--
+
+Tokens being renewed on time prevents user access issues, not ticket resolution.
+
+---
+
+Users can log in securely.
+
+### --feedback--
+
+If tokens aren't renewed, users lose access rather than gain it.
+
+---
+
+Users may lose access or face errors.
+
+---
+
+Logs are updated with new activity.
+
+### --feedback--
+
+Logs record activity but do not directly address the issue of tokens not being renewed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, look at Mark's explanation.
+
+He states that when tokens aren't renewed, users lose access or face errors. This makes renewing tokens crucial for maintaining user sessions.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
new file mode 100644
index 0000000000..4ca1daf961
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e80709ee205871518ba9b.md
@@ -0,0 +1,64 @@
+---
+id: 675e80709ee205871518ba9b
+title: Task 74
+challengeType: 19
+dashedName: task-74
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+Why is solving login problems quickly important?
+
+## --answers--
+
+To maintain user trust and satisfaction.
+
+---
+
+To avoid replicating the issue in staging servers.
+
+### --feedback--
+
+Replicating issues in staging servers is part of the solution process, not a problem to avoid.
+
+---
+
+To stop users from accessing the system.
+
+### --feedback--
+
+The goal is to help users log in, not prevent access.
+
+---
+
+To reduce the size of the server logs.
+
+### --feedback--
+
+Solving login problems is about user trust, not the size of server logs.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find the correct answer, focus on Mark's comment about user satisfaction.
+
+He emphasizes that resolving login problems maintains user trust and prevents frustration, which are critical for a good user experience.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
new file mode 100644
index 0000000000..ce96bfe762
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675e8133c874a588f947de57.md
@@ -0,0 +1,64 @@
+---
+id: 675e8133c874a588f947de57
+title: Task 75
+challengeType: 19
+dashedName: task-75
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+Mark spoke to the team about the importance of solving login problems and keeping users satisfied:
+
+`Team, user authentication is one of the most critical parts of our system, isn't it? When users start complaining about login issues, we need to investigate session management and check if the tokens are being refreshed properly. If the tokens aren't renewed on time, users may lose access or face frustrating errors, and we don't want that, do we?`
+
+`The first step is to analyze the server logs. If we can't find the cause in the logs, the next step is to replicate the issue on a staging server. Testing on a staging server is safe because it allows us to try different solutions without affecting the live system.`
+
+`When login problems continue, support tickets will start piling up, won't they? Solving these issues quickly is not just about fixing the system — it's also about maintaining user trust and satisfaction, isn't it? Let's work together, find the root cause, and resolve this problem efficiently.`
+
+What does Mark suggest if the server logs don't show the cause of the problem?
+
+## --answers--
+
+Ignore the issue until more support tickets are filed.
+
+### --feedback--
+
+Ignoring the issue delays problem resolution and increases user frustration, which is not what Mark suggests.
+
+---
+
+Replicate the issue on the staging server.
+
+---
+
+Test solutions directly on the live system.
+
+### --feedback--
+
+Testing solutions directly on the live system risks further disruptions for users, which Mark advises against.
+
+---
+
+Wait for users to stop complaining.
+
+### --feedback--
+
+Mark does not suggest waiting for users to stop complaining. He emphasizes proactive troubleshooting instead.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, refer to Mark's suggestion in the text.
+
+He advises replicating the issue on the staging server when the logs don't provide enough information. This allows safe testing of solutions without affecting the live system.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
new file mode 100644
index 0000000000..1a0bd54d9d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecdef47179ea4653c2b9f.md
@@ -0,0 +1,196 @@
+---
+id: 675ecdef47179ea4653c2b9f
+title: "Dialogue 3: Preventing MitM attacks"
+challengeType: 21
+dashedName: dialogue-3-preventing-mitm-attacks
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "interview-room1.png",
+   "characters": [
+     {
+       "character": "Anna",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Brian",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_6-3.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Anna",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Anna",
+     "startTime": 1,
+     "finishTime": 5.22,
+     "dialogue": {
+       "text": "Hi, Brian. I've heard about these Man-in-the-Middle attacks. When do they usually happen?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 5.86,
+     "finishTime": 9.94,
+     "dialogue": {
+       "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 10.26,
+     "finishTime": 15.3,
+     "dialogue": {
+       "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 15.72,
+     "finishTime": 19.18,
+     "dialogue": {
+       "text": "I see. How often should we remind employees to use secure connections?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 19.6,
+     "finishTime": 21.12,
+     "dialogue": {
+       "text": "We send out reminders every month,",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 21.12,
+     "finishTime": 24.68,
+     "dialogue": {
+       "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 24.94,
+     "finishTime": 29.02,
+     "dialogue": {
+       "text": "By the end of this week, we'll have new job aids with updated security tips.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 29.6,
+     "finishTime": 32.7,
+     "dialogue": {
+       "text": "That sounds like a good approach. When is our next security review meeting?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 33.3,
+     "finishTime": 37.36,
+     "dialogue": {
+       "text": "It's scheduled for tomorrow afternoon. We'll discuss the current security protocols",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 37.36,
+     "finishTime": 41.12,
+     "dialogue": {
+       "text": "and the steps we're taking to prevent Man-in-the-Middle attacks.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 41.84,
+     "finishTime": 46,
+     "dialogue": {
+       "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 46.44,
+     "finishTime": 49.02,
+     "dialogue": {
+       "text": "What should they do to protect themselves while traveling for work?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 49.56,
+     "finishTime": 54.6,
+     "dialogue": {
+       "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Brian",
+     "startTime": 54.6,
+     "finishTime": 61,
+     "dialogue": {
+       "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Anna",
+     "startTime": 61.76,
+     "finishTime": 65.54,
+     "dialogue": {
+       "text": "Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 66.04
+   },
+   {
+     "character": "Anna",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 66.54
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
new file mode 100644
index 0000000000..f3a4b2d096
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ecedbb04f6ca6dd620f0e.md
@@ -0,0 +1,92 @@
+---
+id: 675ecedbb04f6ca6dd620f0e
+title: Task 76
+challengeType: 22
+dashedName: task-76
+---
+
+<!-- (Audio) Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hi Brian, I've heard about these BLANK BLANK.`
+
+## --blanks--
+
+`Man-in-the-Middle`
+
+### --feedback--
+
+This is a type of cyberattack where a hacker secretly gets in the middle of two people or systems talking to each other. The hacker can see, change, or steal information being shared without anyone knowing. This is a compound word, remember to use `-`. The first letters of the first and the forth word are capitalized.
+
+---
+
+`attacks`
+
+### --feedback--
+
+This word in the plural form means actions by hackers or criminals to harm a computer system, steal information, or cause problems.
+
+# --explanation--
+
+`Man-in-the-Middle` (or `MITM`) is a type of attack where a hacker secretly gets between two people or systems that are communicating. The hacker listens to or changes the information being shared without anyone knowing. For example:
+
+`A Man-in-the-Middle attack (MITM) happened when a hacker intercepted the data sent between a user's computer and their bank.` - The hacker pretended to be the bank, intercepted the information, and stole the user's login credentials. This allowed the hacker to access the bank account without the user knowing.
+
+`Attacks` are actions by hackers to harm computer systems, steal information, or cause problems. For example:
+
+`The website was unavailable for hours because of a cyber attack that overloaded its server.` - It indicates the hacker sent too much fake traffic to the website, making it crash or slow down. This stopped real users from accessing it, causing disruption.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 2.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "Hi, Brian. I've heard about these man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
new file mode 100644
index 0000000000..b466c0e809
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed1414303a6abfaac2d96.md
@@ -0,0 +1,80 @@
+---
+id: 675ed1414303a6abfaac2d96
+title: Task 77
+challengeType: 22
+dashedName: task-77
+---
+
+<!-- (Audio) Anna: When do they usually happen? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`When do they BLANK happen?`
+
+## --blanks--
+
+`usually`
+
+### --feedback--
+
+This word means something that happens most of the time or is common.
+
+# --explanation--
+
+`Usually` means something happens most of the time or is common. It describes the frequency or regularity of an event. For example:
+
+`I usually have coffee in the morning before starting work.` - It means having coffee in the morning is a regular habit or something you do most of the time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 3,
+      "finishTimestamp": 4.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 2.22,
+      "dialogue": {
+        "text": "When do they usually happen?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 2.72
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
new file mode 100644
index 0000000000..05ff62fe64
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed59b1e938bb2443585a5.md
@@ -0,0 +1,111 @@
+---
+id: 675ed59b1e938bb2443585a5
+title: Task 78
+challengeType: 19
+dashedName: task-78
+---
+
+<!-- (Audio) Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. When do they usually happen? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna ask about?
+
+## --answers--
+
+If Brian knows how to stop cyberattacks.
+
+### --feedback--
+
+Anna does not ask about stopping attacks.
+
+---
+
+When Man-in-the-Middle attacks usually happen.
+
+---
+
+If Man-in-the-Middle attacks are dangerous.
+
+### --feedback--
+
+Anna is not asking if these attacks are dangerous.
+
+---
+
+How Brian protects himself from attacks.
+
+### --feedback--
+
+Anna does not ask about Brian's protection methods.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Anna mentions `Man-in-the-Middle attacks` and asks about the time they `usually happen`. The correct answer is about the timing of these specific attacks, not about stopping them, their danger, or how Brian protects himself.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "Hi, Brian. I've heard about these man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "startTime": 4,
+      "finishTime": 5.22,
+      "dialogue": {
+        "text": "When do they usually happen?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.72
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
new file mode 100644
index 0000000000..303ac91208
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed69e54ae31b462edf95b.md
@@ -0,0 +1,80 @@
+---
+id: 675ed69e54ae31b462edf95b
+title: Task 79
+challengeType: 22
+dashedName: task-79
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, they occur when you're using public Wi-Fi or unsecured networks.`
+
+## --blanks--
+
+`Typically`
+
+### --feedback--
+
+This word means something that happens in most cases or is common in a particular situation. The first letter is capitalized.
+
+# --explanation--
+
+`Typically` means something that happens in most cases or is the usual situation. It describes what is normal or expected. For example:
+
+`People typically start their day with a cup of coffee.` - It shows that starting the day with coffee is a common habit for people. It suggests that this is what usually happens.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
new file mode 100644
index 0000000000..b15c9751f7
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ed905490b9ab8f4e640c4.md
@@ -0,0 +1,92 @@
+---
+id: 675ed905490b9ab8f4e640c4
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Typically, they occur when you're using BLANK BLANK or unsecured networks.`
+
+## --blanks--
+
+`public`
+
+### --feedback--
+
+This word means something is open to everyone, like a shared space or service.
+
+---
+
+`Wi-Fi`
+
+### --feedback--
+
+This is short for `Wireless Fidelity`. It refers to a wireless networking technology that uses radio waves to provide high-speed internet and network connections without the need for physical cables. This is a compound word, remember to use `-`. The first letter and the third letter are capitalized.
+
+# --explanation--
+
+`Public` means something that is available to everyone or shared by the community. For example:
+
+`The repository is public so anyone can access it.` - It shows that the repository is open to everyone and not private.
+
+`Wi-Fi` (short for `Wireless Fidelity`) refers to a wireless internet connection that allows devices to connect to the internet. For example:
+
+`I connected my phone to the café's Wi-Fi to check my emails.` - It shows you accessed the internet in the café without using a cable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
new file mode 100644
index 0000000000..fb02d572f9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edb8012accfbd8f4135c5.md
@@ -0,0 +1,92 @@
+---
+id: 675edb8012accfbd8f4135c5
+title: Task 81
+challengeType: 22
+dashedName: task-81
+---
+
+<!-- (Audio) Brian: Typically, they occur when you're using public Wi-Fi or unsecured networks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Typically, they occur when you're using public Wi-Fi or BLANK BLANK.`
+
+## --blanks--
+
+`unsecured`
+
+### --feedback--
+
+This word means something that is not protected or not safe, like a network without a password.
+
+---
+
+`networks`
+
+### --feedback--
+
+This word in the plural form refers to systems that connect computers or devices to share information, often over the internet.
+
+# --explanation--
+
+`Unsecured` means not protected or not safe, often referring to something that lacks security measures, like passwords or encryption. For example:
+
+`Using an unsecured network can put your personal data at risk.` - It describes a network that is not safe, meaning hackers could access one's data easily.
+
+`Networks` are systems that connect computers or devices to share data, resources, or internet access. For example:
+
+`Many businesses rely on secure networks to protect their sensitive information.` - Here, `networks` refer to the connected systems businesses use for communication and data sharing.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.86,
+      "finishTimestamp": 9.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Typically, they occur when you're using public Wi-Fi or unsecured networks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
new file mode 100644
index 0000000000..e388f2834c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edc3228d9d1bf95c5e649.md
@@ -0,0 +1,52 @@
+---
+id: 675edc3228d9d1bf95c5e649
+title: Task 82
+challengeType: 19
+dashedName: task-82
+---
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+In which situation might a Man-in-the-Middle attack happen?
+
+## --answers--
+
+When you are using a private, secured network.
+
+### --feedback--
+
+Man-in-the-Middle attacks are unlikely on private, secured networks because they are protected.
+
+---
+
+When you are browsing websites offline.
+
+### --feedback--
+
+Man-in-the-Middle attacks only happen when data is being exchanged online, not offline.
+
+---
+
+When an employee connects to public Wi-Fi to check company emails.
+
+---
+
+When you are sending an email from your personal, secured device.
+
+### --feedback--
+
+If your device is secured and the connection is private, Man-in-the-Middle attacks are less likely to happen.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Man-in-the-Middle attacks often occur in insecure environments, such as when connecting to public Wi-Fi to access sensitive data like company emails. In such cases, attackers can intercept and steal information because the connection is not protected.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
new file mode 100644
index 0000000000..3b435849bf
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675edeea805bb0c44385d0d5.md
@@ -0,0 +1,80 @@
+---
+id: 675edeea805bb0c44385d0d5
+title: Task 83
+challengeType: 22
+dashedName: task-83
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to be careful, BLANK during peak travel times, like holidays or weekends.`
+
+## --blanks--
+
+`especially`
+
+### --feedback--
+
+This word means to focus on something more than usual or to highlight something as particularly important.
+
+# --explanation--
+
+`Especially` means more than usual or with extra focus on a particular thing or situation. It is used to emphasize something important. For example:
+
+`Developers need to monitor network security, especially during software updates.` - It emphasizes that monitoring security is more important during software updates because such times are critical and often targeted by attackers.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.06,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.24,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
new file mode 100644
index 0000000000..e92c4e39e6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee01ee1d37cc722bbad83.md
@@ -0,0 +1,92 @@
+---
+id: 675ee01ee1d37cc722bbad83
+title: Task 84
+challengeType: 22
+dashedName: task-84
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to be careful, especially during BLANK BLANK, like holidays or weekends.`
+
+## --blanks--
+
+`peak`
+
+### --feedback--
+
+This word means the highest or busiest point of something, such as activity or usage.
+
+---
+
+`travel times`
+
+### --feedback--
+
+This phrase of two words refers to periods when people are moving from one place to another, often in large numbers.
+
+# --explanation--
+
+`Peak` refers to the busiest or highest point of activity, demand, or usage. For example:
+
+`Website traffic often reaches its peak during product launches.` - It explains that during product launches, a lot of users visit the website at the same time. This is the busiest period for the site.
+
+`Travel times` refers to periods when people are actively moving, often in large numbers. For example:
+
+`System administrators must ensure VPN access is reliable during peak travel times.` - It highlights that it's important to ensure the VPN works well when many employees are traveling to prevent delays or security issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.06,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.24,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
new file mode 100644
index 0000000000..bd74966b6a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ee218782b4dcb26796c19.md
@@ -0,0 +1,102 @@
+---
+id: 675ee218782b4dcb26796c19
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- (Audio) Brian: It's crucial to be careful, especially during peak travel times, like holidays or weekends. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why should people be careful during holidays or weekends?
+
+## --answers--
+
+Because networks are more secure during these times.
+
+### --feedback--
+
+Networks are often less secure during these times, not more secure.
+
+---
+
+Because people don't use public Wi-Fi during holidays.
+
+### --feedback--
+
+Many people use public Wi-Fi during holidays or weekends, which increases security risks.
+
+---
+
+Because travel slows down and risks are lower.
+
+### --feedback--
+
+Travel increases during holidays or weekends, creating more opportunities for attacks.
+
+---
+
+Because these are peak travel times, and public networks are used more often.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Holidays and weekends are considered peak travel times, meaning more people are traveling and using public Wi-Fi or unsecured networks. This increases the chances of cyberattacks, such as Man-in-the-Middle attacks, because public networks are less secure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 9.26,
+      "finishTimestamp": 14.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "It's crucial to be careful, especially during peak travel times like holidays or weekends.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
new file mode 100644
index 0000000000..0cca8e82fd
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa4789b65761b6c562a1b.md
@@ -0,0 +1,80 @@
+---
+id: 675fa4789b65761b6c562a1b
+title: Task 86
+challengeType: 22
+dashedName: task-86
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I see. BLANK should we remind employees to use secure connections?`
+
+## --blanks--
+
+`How often`
+
+### --feedback--
+
+This phrase of two words is used to ask about the frequency of an action, or how many times something should be done. The first letter is capitalized.
+
+# --explanation--
+
+`How often` is used to ask about the frequency of an action, meaning how many times or at what intervals it should be repeated. For example:
+
+`How often should we update our antivirus software?` - The question is asking about the frequency of updating antivirus software, which is an important security task. It emphasizes the need to establish a regular schedule to keep systems protected from threats.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
new file mode 100644
index 0000000000..82af92f916
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa66d590e0127ba60b7f6.md
@@ -0,0 +1,92 @@
+---
+id: 675fa66d590e0127ba60b7f6
+title: Task 87
+challengeType: 22
+dashedName: task-87
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I see. How often should we remind employees to use BLANK BLANK?`
+
+## --blanks--
+
+`secure`
+
+### --feedback--
+
+This word means protected or safe from threats, like hacking or unauthorized access.
+
+---
+
+`connections`
+
+### --feedback--
+
+This word in the plural form refers to links or pathways that allow devices to communicate with each other or access the internet.
+
+# --explanation--
+
+`Secure` means something that is safe and protected from risks, like hacking, stealing data, or someone getting access without permission. For example:
+
+`All employees should use secure passwords to protect their accounts.` - This sentence shows how using strong and safe passwords helps keep accounts private and stops others from breaking into them.
+
+`Connections` are the links that let devices talk to each other or use the internet. For example:
+
+`Using encrypted connections helps protect sensitive information during online meetings.` - This sentence shows that using safe and protected links keeps shared information private during online meetings, so no one can see or steal it without permission.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
new file mode 100644
index 0000000000..f72d75b527
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fa827b0a17832dc798ba0.md
@@ -0,0 +1,102 @@
+---
+id: 675fa827b0a17832dc798ba0
+title: Task 88
+challengeType: 19
+dashedName: task-88
+---
+
+<!-- (Audio) Anna: I see. How often should we remind employees to use secure connections? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna want to know?
+
+## --answers--
+
+If secure connections are necessary for employees.
+
+### --feedback--
+
+Anna is not asking whether secure connections are necessary.
+
+---
+
+How often employees should be reminded to use secure connections.
+
+---
+
+What secure connections are used for.
+
+### --feedback--
+
+Anna is not asking about the purpose of secure connections.
+
+---
+
+If employees know how to create secure connections.
+
+### --feedback--
+
+Anna is not asking whether employees know how to create secure connections.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Anna's question shows she is interested in the frequency of reminders, not about the necessity or purpose of secure connections, or employees' knowledge about them.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 18.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "I see. How often should we remind employees to use secure connections?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
new file mode 100644
index 0000000000..43280a66be
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb5315884dc456fad654a.md
@@ -0,0 +1,113 @@
+---
+id: 675fb5315884dc456fad654a
+title: Task 89
+challengeType: 22
+dashedName: task-89
+---
+
+<!-- (Audio) Brian: We send out reminders every month, but we're planning to increase that to every two weeks to keep everyone vigilant. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We send out reminders BLANK, but we're planning to increase that to BLANK to keep everyone BLANK.`
+
+## --blanks--
+
+`every month`
+
+### --feedback--
+
+This phrase of two words refers to something that happens once each month.
+
+---
+
+`every two weeks`
+
+### --feedback--
+
+This phrase of three words refers to something that happens once every two weeks, or biweekly. The third word is in the plural form.
+
+---
+
+`vigilant`
+
+### --feedback--
+
+This word means being alert and paying close attention, especially to avoid risks or problems.
+
+# --explanation--
+
+`Every month` means something happens once per month, regularly. For example:
+
+`We back up our system data every month to prevent data loss.` - This sentence shows that backing up system data is a regular task that happens monthly to ensure data safety.
+
+`Every two weeks` means something happens once every two weeks, or twice a month. For example:
+
+`The IT team checks for security updates every two weeks to keep systems up to date.` - This sentence highlights the importance of checking for updates twice a month to ensure that systems remain secure and functioning well.
+
+`Vigilant` means being watchful and careful to avoid risks or problems. For example:
+
+`Employees must stay vigilant when opening emails to avoid phishing scams.` - This sentence emphasizes the need for employees to pay attention and be cautious when handling emails to prevent falling victim to scams or attacks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.6,
+      "finishTimestamp": 23.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We send out reminders every month,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 2.52,
+      "finishTime": 6.08,
+      "dialogue": {
+        "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
new file mode 100644
index 0000000000..029bb35e9f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fb7824cbbe3539de6111b.md
@@ -0,0 +1,111 @@
+---
+id: 675fb7824cbbe3539de6111b
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- (Audio) Brian: We send out reminders every month, but we're planning to increase that to every two weeks to keep everyone vigilant. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How often do they remind the employees?
+
+## --answers--
+
+Once a week.
+
+### --feedback--
+
+Brian does not mention reminders being sent weekly.
+
+---
+
+Every two weeks.
+
+### --feedback--
+
+While they are planning to change to every two weeks, Brian says they currently send reminders less frequently.
+
+---
+
+Every month.
+
+---
+
+Every six months.
+
+### --feedback--
+
+Brian mentions reminders being sent much more frequently than every six months.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Brian says, `We send out reminders every month`, which means that currently, employees receive reminders once every month, although there are plans to increase the frequency in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.6,
+      "finishTimestamp": 23.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We send out reminders every month,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 2.52,
+      "finishTime": 6.08,
+      "dialogue": {
+        "text": "but we're planning to increase that to every two weeks to keep everyone vigilant.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
new file mode 100644
index 0000000000..b0ae71fc54
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fba2a32b4aa625e2f7940.md
@@ -0,0 +1,38 @@
+---
+id: 675fba2a32b4aa625e2f7940
+title: Task 91
+challengeType: 19
+dashedName: task-91
+---
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+This task doesn't have audio. Read the question below and select the correct answer.
+
+# --questions--
+
+## --text--
+
+What's the right reply when your team member asks `How often should we review our security policies`?
+
+## --answers--
+
+`Very important.`
+
+### --feedback--
+
+`How often` asks about frequency, not importance.
+
+---
+
+`Every two months.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The question `How often?` is used to ask about frequency, meaning how many times or at what intervals something occurs. A reply like `every two months` correctly answers this type of question by specifying the frequency.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
new file mode 100644
index 0000000000..35365cf125
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbba5f9807566fb0c39ef.md
@@ -0,0 +1,92 @@
+---
+id: 675fbba5f9807566fb0c39ef
+title: Task 92
+challengeType: 22
+dashedName: task-92
+---
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`By the end of this week, we'll have new BLANK with updated BLANK.`
+
+## --blanks--
+
+`job aids`
+
+### --feedback--
+
+This phrase of two words refers to tools or materials that help employees perform their tasks better. The second word is in the plural form.
+
+---
+
+`security tips`
+
+### --feedback--
+
+This phrase of two words refers to advice or recommendations to help keep systems and data safe. The second word is in the plural form.
+
+# --explanation--
+
+`Job aids` are tools or materials, such as guides or checklists, that help employees do their work more effectively. For example:
+
+`The company provided job aids to help employees follow new procedures.` - It shows that `job aids`, like guides or instructions, make it easier for employees to understand and follow updated processes at work.
+
+`Security tips` are pieces of advice or recommendations to help people protect systems, data, and devices from risks. For example:
+
+`The IT team shared security tips on how to create strong passwords.` - It indicates the IT team provided helpful advice, like creating strong passwords, to ensure better protection against threats like hacking.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.94,
+      "finishTimestamp": 28.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "By the end of this week, we'll have new job aids with updated security tips.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
new file mode 100644
index 0000000000..8823ceb921
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbefa9f40157cad662e8d.md
@@ -0,0 +1,102 @@
+---
+id: 675fbefa9f40157cad662e8d
+title: Task 93
+challengeType: 19
+dashedName: task-93
+---
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the new security measure mentioned?
+
+## --answers--
+
+Developing a security app for employees.
+
+### --feedback--
+
+The audio does not mention creating a security app.
+
+---
+
+Hiring a cybersecurity consultant.
+
+### --feedback--
+
+The audio does not mention hiring external help for cybersecurity.
+
+---
+
+Providing regular workshops on online safety.
+
+### --feedback--
+
+Workshops are not mentioned as the new security measure in the audio.
+
+---
+
+Giving employees new tools to improve their security practices.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+According to Brian, the new security measure involves giving employees helpful tools to strengthen their security practices, rather than introducing software or hiring external support.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.94,
+      "finishTimestamp": 28.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "By the end of this week, we'll have new job aids with updated security tips.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
new file mode 100644
index 0000000000..5938591e85
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fbfc6fa824c820a7e49d4.md
@@ -0,0 +1,88 @@
+---
+id: 675fbfc6fa824c820a7e49d4
+title: Task 94
+challengeType: 19
+dashedName: task-94
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: By the end of this week, we'll have new job aids with updated security tips. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the reply showing agreement?
+
+## --answers--
+
+`That sounds like a good approach.`
+
+---
+
+`I'm not sure that's necessary.`
+
+### --feedback--
+
+This response shows doubt, not agreement.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The phrase `That sounds like a good approach` is a positive response that shows agreement with the plan to introduce new job aids with updated security tips.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "interview-room1.png",
+     "characters": [
+       {
+         "character": "Brian",
+         "position": {
+           "x": 50,
+           "y": 15,
+           "z": 1.2
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-3.mp3",
+       "startTime": 1,
+       "startTimestamp": 23.94,
+       "finishTimestamp": 28.02
+     }
+   },
+   "commands": [
+     {
+       "character": "Brian",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Brian",
+       "startTime": 1,
+       "finishTime": 5.08,
+       "dialogue": {
+         "text": "By the end of this week, we'll have new job aids with updated security tips.",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Brian",
+       "opacity": 0,
+       "startTime": 5.58
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
new file mode 100644
index 0000000000..6d93276e14
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fc02724147984cfe068d5.md
@@ -0,0 +1,80 @@
+---
+id: 675fc02724147984cfe068d5
+title: Task 95
+challengeType: 22
+dashedName: task-95
+---
+
+<!-- (Audio) Anna: That sounds like a good approach. When is our next security review meeting? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That sounds like a good approach. When is our next BLANK?`
+
+## --blanks--
+
+`security review meeting`
+
+### --feedback--
+
+This phrase of three words refers to a meeting where the team evaluates the current security measures and plans improvements.
+
+# --explanation--
+
+A `security review meeting` is a discussion where teams check and assess the effectiveness of their security practices and look for ways to improve them. For example:
+
+`The IT team scheduled a security review meeting to evaluate recent issues in the system.` - This sentence shows how a security review meeting helps the team discuss recent problems and find solutions to strengthen the system's safety.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.6,
+      "finishTimestamp": 31.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.1,
+      "dialogue": {
+        "text": "That sounds like a good approach. When is our next security review meeting?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
new file mode 100644
index 0000000000..8bc0623782
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe3fb72bdcb97dd10b7c8.md
@@ -0,0 +1,102 @@
+---
+id: 675fe3fb72bdcb97dd10b7c8
+title: Task 96
+challengeType: 19
+dashedName: task-96
+---
+
+<!-- (Audio) Anna: That sounds like a good approach. When is our next security review meeting? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna ask about?
+
+## --answers--
+
+The timing of the next security review meeting.
+
+---
+
+Who will attend the next security review meeting.
+
+### --feedback--
+
+Anna does not ask about the attendees.
+
+---
+
+What topics will be covered in the security review meeting.
+
+### --feedback--
+
+Anna does not ask about the topics.
+
+---
+
+Why security review meetings are important.
+
+### --feedback--
+
+Anna does not ask about the importance of the meetings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Anna's question shows she is asking about the timing of the meeting, not about the attendees, topics, or the importance of the meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.6,
+      "finishTimestamp": 31.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.1,
+      "dialogue": {
+        "text": "That sounds like a good approach. When is our next security review meeting?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
new file mode 100644
index 0000000000..2aa134e24b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe58fb4c9539cb37b4065.md
@@ -0,0 +1,80 @@
+---
+id: 675fe58fb4c9539cb37b4065
+title: Task 97
+challengeType: 22
+dashedName: task-97
+---
+
+<!-- (Audio) Brian: It's scheduled for tomorrow afternoon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's BLANK for tomorrow afternoon.`
+
+## --blanks--
+
+`scheduled`
+
+### --feedback--
+
+This word means planned or arranged to happen at a specific time.
+
+# --explanation--
+
+`Scheduled` means planned or arranged to happen at a specific time or date. For example:
+
+`The team meeting is scheduled for Friday at 3 PM.` - This sentence shows that the meeting is planned and has a fixed time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.1,
+      "finishTimestamp": 34
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It's scheduled for tomorrow afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3.4
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
new file mode 100644
index 0000000000..18ee6b5760
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fe6a1e81c4ba00f415364.md
@@ -0,0 +1,99 @@
+---
+id: 675fe6a1e81c4ba00f415364
+title: Task 98
+challengeType: 22
+dashedName: task-98
+---
+
+<!-- (Audio) Brian: We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK discuss our current BLANK and the steps we're taking to prevent Man-in-the-Middle attacks.`
+
+## --blanks--
+
+`We'll`
+
+### --feedback--
+
+This is the contraction for `we will`, used to talk about something planned for the future. The first letter is capitalized.
+
+---
+
+`security protocols`
+
+### --feedback--
+
+This phrase of two words refers to rules or procedures designed to keep systems, data, or networks safe. The second word is in the plural form.
+
+# --explanation--
+
+`We'll` is a contraction of `we will`, and it is used to indicate something that will happen in the future.
+
+`Security protocols` are the rules or procedures set up to protect systems, data, and networks from harm or unauthorized access. For example:
+
+`Employees must follow security protocols to avoid data breaches.` - This emphasizes that employees need to stick to specific rules and procedures to ensure that sensitive data stays safe.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.16,
+      "finishTimestamp": 40.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll discuss the current security protocols",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.2,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "and the steps we're taking to prevent man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
new file mode 100644
index 0000000000..ac74eae9ad
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675feaafa5546fab32aa0736.md
@@ -0,0 +1,111 @@
+---
+id: 675feaafa5546fab32aa0736
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- (Audio) Brian: We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What topics will the security review meeting cover?
+
+## --answers--
+
+Only new employee onboarding.
+
+### --feedback--
+
+Brian does not mention onboarding as a topic for the security review meeting.
+
+---
+
+Changes to company software.
+
+### --feedback--
+
+Brian does not mention software changes as part of the discussion.
+
+---
+
+Budget planning for the IT department.
+
+### --feedback--
+
+Brian does not mention anything about budget planning.
+
+---
+
+Current security protocols and steps to prevent Man-in-the-Middle attacks.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Brian's statement clearly shows that security protocols and measures to prevent Man-in-the-Middle attacks are the two main topics to be covered at the security review meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.16,
+      "finishTimestamp": 40.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll discuss the current security protocols",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.2,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "and the steps we're taking to prevent man in the middle attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
new file mode 100644
index 0000000000..61c36e7762
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675febf4f03233af8e347802.md
@@ -0,0 +1,80 @@
+---
+id: 675febf4f03233af8e347802
+title: Task 100
+challengeType: 22
+dashedName: task-100
+---
+
+<!-- (Audio) Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Got it. We have our BLANK coming next week, and many team members are coming from other countries.`
+
+## --blanks--
+
+`summit`
+
+### --feedback--
+
+This refers to a formal meeting or event where people discuss important topics.
+
+# --explanation--
+
+A `summit` is a formal gathering or meeting where people come together to discuss specific topics, often for planning or decision-making.
+
+`The company is hosting a summit to plan next year's cybersecurity strategies.` - It shows that the company is organizing an important meeting where leaders or teams will discuss and decide on strategies for improving cybersecurity.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.64,
+      "finishTimestamp": 45
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 5.36,
+      "dialogue": {
+        "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
new file mode 100644
index 0000000000..21a9284025
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675fee8f5d64f2b504e91281.md
@@ -0,0 +1,102 @@
+---
+id: 675fee8f5d64f2b504e91281
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- (Audio) Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why will people travel from other countries?
+
+## --answers--
+
+To attend training sessions for a new project.
+
+### --feedback--
+
+Anna does not mention training sessions as the reason for travel.
+
+---
+
+To visit the company headquarters.
+
+### --feedback--
+
+Anna does not mention visits to the headquarters as the reason for travel.
+
+---
+
+To participate in the upcoming summit.
+
+---
+
+To finalize a new business deal.
+
+### --feedback--
+
+Anna does not mention anything about a business deal.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Anna's statement indicates that people will travel to participate in the summit. The other options are unrelated to the reason given in the audio.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.64,
+      "finishTimestamp": 45
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 5.36,
+      "dialogue": {
+        "text": "Got it. We have our summit coming next week and many team members are coming from other countries.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.86
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
new file mode 100644
index 0000000000..458896c3da
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff2b7f9405abf27f26740.md
@@ -0,0 +1,80 @@
+---
+id: 675ff2b7f9405abf27f26740
+title: Task 102
+challengeType: 22
+dashedName: task-102
+---
+
+<!-- (Audio) Anna: What should they do to protect themselves while traveling for work? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`What should they do to protect themselves while BLANK?`
+
+## --blanks--
+
+`traveling for work`
+
+### --feedback--
+
+This phrase of three words refers to the act of going from one place to another for job-related purposes. The first word ends in `-ing`.
+
+# --explanation--
+
+`Traveling for work` means going to different locations as part of your job responsibilities, such as attending meetings, conferences, or other work-related events. For example:
+
+`Employees traveling for work should use VPNs to secure their internet connections.` - It highlights that employees who are traveling for job-related purposes need to use VPNs to ensure their online activities are safe and protected.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.44,
+      "finishTimestamp": 48.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 3.58,
+      "dialogue": {
+        "text": "What should they do to protect themselves while traveling for work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 4.08
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
new file mode 100644
index 0000000000..140c5cc3df
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff37bebf32bc223e3660a.md
@@ -0,0 +1,102 @@
+---
+id: 675ff37bebf32bc223e3660a
+title: Task 103
+challengeType: 19
+dashedName: task-103
+---
+
+<!-- (Audio) Anna: What should they do to protect themselves while traveling for work? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Anna want to discuss?
+
+## --answers--
+
+Ways to stay safe while traveling for work.
+
+---
+
+The best travel routes for employees.
+
+### --feedback--
+
+Anna's question is not about travel routes but about safety during work-related travel.
+
+---
+
+How to organize travel schedules.
+
+### --feedback--
+
+Anna is not asking about schedules; she is asking about protection while traveling.
+
+---
+
+Options for remote work while traveling.
+
+### --feedback--
+
+Anna does not mention remote work in her question.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Anna's question shows she is focused on discussing safety measures during work-related travel, not travel routes, schedules, or remote work options.
+
+# --scene--
+
+ ```json
+ {
+   "setup": {
+     "background": "interview-room1.png",
+     "characters": [
+       {
+         "character": "Anna",
+         "position": {
+           "x": 50,
+           "y": 15,
+           "z": 1.2
+         },
+         "opacity": 0
+       }
+     ],
+     "audio": {
+       "filename": "B1_6-3.mp3",
+       "startTime": 1,
+       "startTimestamp": 45.44,
+       "finishTimestamp": 48.02
+     }
+   },
+   "commands": [
+     {
+       "character": "Anna",
+       "opacity": 1,
+       "startTime": 0
+     },
+     {
+       "character": "Anna",
+       "startTime": 1,
+       "finishTime": 3.58,
+       "dialogue": {
+         "text": "What should they do to protect themselves while traveling for work?",
+         "align": "center"
+       }
+     },
+     {
+       "character": "Anna",
+       "opacity": 0,
+       "startTime": 4.08
+     }
+   ]
+ }
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
new file mode 100644
index 0000000000..07a32aafd2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff42fb8c8a6c4f21cd3bb.md
@@ -0,0 +1,104 @@
+---
+id: 675ff42fb8c8a6c4f21cd3bb
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (Audio) Brian: Everyone should always use a VPN, especially when accessing sensitive information. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Everyone should always use a BLANK, especially when BLANK BLANK.`
+
+## --blanks--
+
+`VPN`
+
+### --feedback--
+
+This stands for `Virtual Private Network`, which secures your internet connection by encrypting your data. All three letters are capitalized.
+
+---
+
+`accessing`
+
+### --feedback--
+
+This word refers to the act of opening or using something, such as files, systems, or websites. It ends in `-ing`.
+
+---
+
+`sensitive information`
+
+### --feedback--
+
+This phrase of two words refers to important or private data that needs to be protected, like passwords or financial details.
+
+# --explanation--
+
+`VPN` stands for `Virtual Private Network`. It makes your internet connection safer by hiding your data and protecting you from hackers. For example:
+
+`Using a VPN ensures that your connection is secure, even on public Wi-Fi.` - This means that a VPN helps keep your online activities private and safe when you use public Wi-Fi, which is not very secure.
+
+`Accessing` means opening or using something, like files, websites, or systems. For example:
+
+`Employees should be cautious when accessing company files on personal devices.` - This means employees need to be careful when opening company files on their own devices, so they don't risk losing or exposing important information.
+
+`Sensitive information` means private or important data that can cause problems if it is shared with the wrong people. For example:
+
+`Passwords and financial records are examples of sensitive information that must be protected.` - This means that things like passwords and money details need to be kept safe, because if they are stolen, someone could use them to harm you or take your money.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.56,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
new file mode 100644
index 0000000000..fc7ee72780
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/675ff94f80bd9bd12c8497e2.md
@@ -0,0 +1,92 @@
+---
+id: 675ff94f80bd9bd12c8497e2
+title: Task 105
+challengeType: 22
+dashedName: task-105
+---
+
+<!-- (Audio) Brian: They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`They should also BLANK using public Wi-Fi for important tasks, like banking or accessing BLANK.`
+
+## --blanks--
+
+`avoid`
+
+### --feedback--
+
+This word means to stay away from or not do something to prevent problems.
+
+---
+
+`corporate emails`
+
+### --feedback--
+
+This phrase of two words refers to work-related emails that often contain private or sensitive information. The second word is in the plural form.
+
+# --explanation--
+
+`Avoid` means to stay away from something or not do it because it can cause problems. For example:
+
+`Employees should avoid clicking on links from unknown senders in emails.` - It means that employees should not click on links they don't trust because these links might lead to scams or security risks.
+
+`Corporate emails` are work-related emails that often have private or sensitive information about the company. For example:
+
+`Using a secure connection is important when checking corporate emails outside the office.` - It highlights that work emails often contain important information, so using a secure internet connection is necessary to keep them private and safe from hackers.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 53.6,
+      "finishTimestamp": 60
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 7.4,
+      "dialogue": {
+        "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 7.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
new file mode 100644
index 0000000000..80d7ff822a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f057483bbf684bfa6457.md
@@ -0,0 +1,111 @@
+---
+id: 6760f057483bbf684bfa6457
+title: Task 106
+challengeType: 19
+dashedName: task-106
+---
+
+<!-- (Audio) Brian: Everyone should always use a VPN, especially when accessing sensitive information. They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which behavior is recommended by Brian?
+
+## --answers--
+
+Using public Wi-Fi for important tasks like banking.
+
+### --feedback--
+
+Brian advises against using public Wi-Fi for important tasks.
+
+---
+
+Always using a VPN, especially when accessing sensitive information like corporate emails.
+
+---
+
+Sharing passwords over email when needed.
+
+### --feedback--
+
+Brian does not mention sharing passwords and doing so would not be secure.
+
+---
+
+Using public Wi-Fi but only on weekends.
+
+### --feedback--
+
+Brian says to avoid public Wi-Fi for important tasks, not just on weekends.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Brian's statement shows that using a VPN is a key recommendation to keep data secure, particularly when handling sensitive tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.56,
+      "finishTimestamp": 60
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "Everyone should always use a VPN, especially when accessing sensitive information.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 6.04,
+      "finishTime": 12.44,
+      "dialogue": {
+        "text": "They should also avoid using public Wi-Fi for important tasks like banking or accessing corporate emails.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 12.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
new file mode 100644
index 0000000000..ea6563d4fc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f48b0fe69572664e85f1.md
@@ -0,0 +1,102 @@
+---
+id: 6760f48b0fe69572664e85f1
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- (Audio) Anna: Thanks for the advice. Let's ensure everyone gets these updates before they travel next week. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What will they do next?
+
+## --answers--
+
+Plan the next team-building activity.
+
+### --feedback--
+
+The audio does not mention planning team-building activities.
+
+---
+
+Schedule a meeting to discuss long-term goals.
+
+### --feedback--
+
+The audio does not mention a meeting for long-term goals.
+
+---
+
+Provide updates to everyone before they travel.
+
+---
+
+Organize a social event for travelers.
+
+### --feedback--
+
+The audio does not mention organizing a social event.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Anna says, `Let's ensure everyone gets these updates before they travel next week`. This makes it clear that their next step is to provide updates to all team members before they leave for their trips.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room1.png",
+    "characters": [
+      {
+        "character": "Anna",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_6-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 60.36,
+      "finishTimestamp": 64.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Anna",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Anna",
+      "startTime": 1,
+      "finishTime": 4.78,
+      "dialogue": {
+        "text": "Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Anna",
+      "opacity": 0,
+      "startTime": 5.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
new file mode 100644
index 0000000000..2f56bf10c8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6760f7ca38c9167853ebf917.md
@@ -0,0 +1,89 @@
+---
+id: 6760f7ca38c9167853ebf917
+title: Task 108
+challengeType: 22
+dashedName: task-108
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`often`, `usually`, `Typically`,  `we'll`, `especially`, and `every month`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Anna: Hi Brian, I've heard about these Man-in-the-Middle attacks. When do they BLANK happen?`
+
+`Brian: BLANK, they occur when you're using public Wi-Fi or unsecured networks. It's crucial to be careful, especially during peak travel times, like holidays or weekends.`
+
+`Anna: I see. How BLANK should we remind employees to use secure connections?`
+
+`Brian: We send out reminders BLANK, but we're planning to increase that to every two weeks to keep everyone vigilant. By the end of this week, BLANK have new job aids with updated security tips.`
+
+`Anna: That sounds like a good approach. When is our next security review meeting?`
+
+`Brian: It's scheduled for tomorrow afternoon. We'll discuss our current security protocols and the steps we're taking to prevent Man-in-the-Middle attacks.`
+
+`Anna: Got it. We have our summit coming next week, and many team members are coming from other countries. What should they do to protect themselves while traveling for work?`
+
+`Brian: Everyone should always use a VPN, BLANK when accessing sensitive information. They should also avoid using public Wi-Fi for important tasks, like banking or accessing corporate emails.`
+
+`Anna: Thanks for the advice. Let's ensure everyone gets these updates before they travel next week.`
+
+
+## --blanks--
+
+`usually`
+
+### --feedback--
+
+It means most of the time or in normal situations.
+
+---
+
+`Typically`
+
+### --feedback--
+
+It means generally or commonly. It is used to describe regular behavior or situations.
+
+---
+
+`often`
+
+### --feedback--
+
+It means frequently or many times.
+
+---
+
+`every month`
+
+### --feedback--
+
+It describes something happens once a month.
+
+---
+
+`we'll`
+
+### --feedback--
+
+It is a contraction of `we will`. It is used to talk about a future action.
+
+---
+
+`especially`
+
+### --feedback--
+
+It is used to emphasize something important in a specific situation.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
new file mode 100644
index 0000000000..9dc6063db6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/676147de99ef019cee551581.md
@@ -0,0 +1,70 @@
+---
+id: 676147de99ef019cee551581
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+Why is it important to stay secure online while traveling for work?
+
+## --answers--
+
+To avoid delays during the trip.
+
+### --feedback--
+
+The email does not mention delays as a reason for staying secure online.
+
+---
+
+To use public Wi-Fi safely.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for sensitive tasks, not about using it safely.
+
+---
+
+To protect sensitive data from being stolen.
+
+---
+
+To connect to the summit network faster.
+
+### --feedback--
+
+The email does not mention anything about connecting to a summit network.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on the email's warning about Man-in-the-Middle attacks.
+
+The email explains these happen on public Wi-Fi and can steal corporate emails and sensitive information.
+
+The main reason for staying secure is to protect this data. Look for an option that matches this.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
new file mode 100644
index 0000000000..9a71500880
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/6761493d2db43ba139340975.md
@@ -0,0 +1,70 @@
+---
+id: 6761493d2db43ba139340975
+title: Task 110
+challengeType: 19
+dashedName: task-110
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email say about public Wi-Fi?
+
+## --answers--
+
+It is safe for sending emails.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for important tasks.
+
+---
+
+It helps employees stay connected securely.
+
+### --feedback--
+
+The email does not suggest that public Wi-Fi is secure. Instead, it warns about the risks of using it.
+
+---
+
+It is the best option for connecting to corporate systems.
+
+### --feedback--
+
+The email clearly states to avoid using public Wi-Fi for important tasks like corporate emails.
+
+---
+
+It can be dangerous when accessing sensitive information.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, focus on the email's advice about public Wi-Fi.
+
+It warns that using public networks for sensitive information can lead to attacks.
+
+The email recommends avoiding public Wi-Fi for important tasks. Look for an option that reflects this.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
new file mode 100644
index 0000000000..a9121698ad
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614992d9e494a2b69f89bb.md
@@ -0,0 +1,70 @@
+---
+id: 67614992d9e494a2b69f89bb
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+`Dear Team,`
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email recommend using to protect sensitive information?
+
+## --answers--
+
+Public Wi-Fi
+
+### --feedback--
+
+The email explicitly advises against using public Wi-Fi for important tasks.
+
+---
+
+Updated security tips
+
+### --feedback--
+
+While the email shares updated tips, it specifically recommends a tool to protect sensitive information.
+
+---
+
+A VPN (Virtual Private Network)
+
+---
+
+A job aid
+
+### --feedback--
+
+The job aid provides guidance, but the email mentions a specific key tool for protection.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on the email's solution for staying secure.
+
+It recommends using a VPN (Virtual Private Network) to protect data when working remotely.
+
+Look for an option that highlights it.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
new file mode 100644
index 0000000000..ffb9f77526
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a0187bd80a49d438b1f.md
@@ -0,0 +1,70 @@
+---
+id: 67614a0187bd80a49d438b1f
+title: Task 112
+challengeType: 19
+dashedName: task-112
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What does the email say about updated security tips?
+
+## --answers--
+
+They must be followed during the security review meeting.
+
+### --feedback--
+
+The email does not link updated security tips to the meeting but recommends reviewing them before traveling.
+
+---
+
+They help employees protect sensitive information.
+
+---
+
+They should only be used for corporate emails.
+
+### --feedback--
+
+The email mentions broader security practices, not just emails.
+
+---
+
+They are optional and can be reviewed later.
+
+### --feedback--
+
+The email emphasizes the importance of reviewing the updated tips before traveling.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the email's mention of updated security tips.
+
+These tips help employees protect sensitive information by offering practical steps for safe online practices.
+
+The email advises reviewing these tips before traveling. Look for an option that reflects it.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
new file mode 100644
index 0000000000..8dd58dfaaa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-future-continuous-while-describing-actions/67614a6e5d4df6a6744127b7.md
@@ -0,0 +1,70 @@
+---
+id: 67614a6e5d4df6a6744127b7
+title: Task 113
+challengeType: 19
+dashedName: task-113
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+After discussing the risks with Brian, Anna decided to inform the team about preventing MitM attacks, especially during work-related travel:
+
+`Dear Team,`
+
+`As the summit is near and many of you will be traveling for work, it's important to stay safe online. Man-in-the-Middle attacks (MitM) often happen on public Wi-Fi or unsecured networks, especially during peak travel times. These attacks can steal your data, including corporate emails and sensitive information.`
+
+`To stay protected, always use a VPN (Virtual Private Network) when accessing sensitive information or company systems. Avoid using public Wi-Fi for important tasks. Check the updated security tips and job aids we've shared. They include simple steps to keep your data safe while traveling.`
+
+`We've scheduled a security review meeting to share more advice and discuss security protocols. If you have any questions or need help setting up your VPN, contact the security team before your trip.`
+
+`Stay safe,` `Your Security Team`
+
+What should employees do before traveling?
+
+## --answers--
+
+Review the updated security tips.
+
+### --feedback--
+
+While reviewing the tips is helpful, the email emphasizes something else as the most important step.
+
+---
+
+Contact the security team for VPN help.
+
+---
+
+Use public Wi-Fi with a VPN.
+
+### --feedback--
+
+The email warns against using public Wi-Fi for sensitive tasks, even with a VPN.
+
+---
+
+Wait until the security review meeting.
+
+### --feedback--
+
+The email advises preparing before traveling, not waiting until the meeting to address these concerns.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the email's advice for preparing before traveling.
+
+It specifically asks employees to contact the security team for help with setting up their VPN.
+
+Look for an option that reflects this.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
index d354f8b2f7..0508452f04 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a91783d34e873290e9f5ec.md
@@ -58,7 +58,7 @@ If she is going to a Hackathon this weekend.
 
 To find out what Bob wants to know, listen to the second question he asks. Pay attention what comes after `I hear you're going to...` which show what Bob is trying to find out.
 
-He uses a question to confirm what he heard, specifically mentioning the event he thinks she’s attending.
+He uses a question to confirm what he heard, specifically mentioning the event he thinks she's attending.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
index 06c1cee959..25869b37cf 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95606a32d5747dae3bfba.md
@@ -8,7 +8,7 @@ dashedName: task-14
 <!--
 AUDIO REFERENCE:
 Lisa: We plan to develop a new app for real-time project collaboration. How does that sound to you?
-Bob: Interesting! Who’s on your team?
+Bob: Interesting! Who's on your team?
 -->
 
 # --instructions--
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
index ca36ed3e23..6bc8abd325 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a958bb3ac85c4a75e5fe88.md
@@ -7,7 +7,7 @@ dashedName: task-18
 
 <!--
 AUDIO REFERENCE:
-Bob: Interesting! Who’s on your team?
+Bob: Interesting! Who's on your team?
 Lisa: A couple of developers from our branch in Seattle, and a UX designer I've collaborated with before.
 -->
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
index 4ac4454391..1d204157a4 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a9599790c94a4ba0e5dbd9.md
@@ -54,7 +54,7 @@ Lisa is asking about similar projects happening soon, not about moving to a diff
 
 # --explanation--
 
-Lisa asks about what’s coming up, specifically looking for information on projects that are similar to the one she is currently working on.
+Lisa asks about what's coming up, specifically looking for information on projects that are similar to the one she is currently working on.
 
 Pay attention to the phrase `similar projects coming up here` to understand what Lisa is asking about.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
index 0a3bcdfe0c..e547ded4d5 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a95ab699d0064d16bdf469.md
@@ -56,7 +56,7 @@ Bob is not asking about development status.
 
 Bob uses the word `yet`, which signals that he is asking if something expected has already happened.
 
-Pay attention to the words `potential name` and `yet` in Bob’s question, as these indicate that he is asking about the status of the app's name.
+Pay attention to the words `potential name` and `yet` in Bob's question, as these indicate that he is asking about the status of the app's name.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
index 89ea86edbd..ca9bfe0a46 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66a961222115ad5437ddf4fb.md
@@ -55,9 +55,9 @@ Bob has not decided yet. He says `Maybe`.
 
 # --explanation--
 
-People sometimes express uncertainty before making a decision. Bob hasn’t fully decided if he'll join the event. You can notice that because he says `Maybe`, which shows he is still thinking about it.
+People sometimes express uncertainty before making a decision. Bob hasn't fully decided if he'll join the event. You can notice that because he says `Maybe`, which shows he is still thinking about it.
 
-Pay attention to Bob’s follow-up question where he asks, `Where can I find...?` This reveals that he needs more details before deciding whether to join the event.
+Pay attention to Bob's follow-up question where he asks, `Where can I find...?` This reveals that he needs more details before deciding whether to join the event.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
index 7d67182960..8775026bec 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b13f2f0c5a415ccd41335e.md
@@ -45,4 +45,4 @@ False
 
 # --explanation--
 
-To answer this question, focus on the part of the text that describes Lisa’s team. Look for the sentence that mentions `Her team includes...`. This will help you determine if there are developers from Seattle on her team.
+To answer this question, focus on the part of the text that describes Lisa's team. Look for the sentence that mentions `Her team includes...`. This will help you determine if there are developers from Seattle on her team.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
index b82062ba59..ea088d0df4 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b4f8f6c1af973bdfdc0228.md
@@ -41,7 +41,7 @@ When someone asks if you have a moment, they want to talk to you about something
 
 When someone asks if you have a moment, they want to discuss something important.
 
-The correct response will show that you’re ready to listen or talk about the topic they want to discuss. Pay attention to options that focus on being open to a conversation.
+The correct response will show that you're ready to listen or talk about the topic they want to discuss. Pay attention to options that focus on being open to a conversation.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
index bb91b576d8..5373f218a9 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b568bf34c34209600445ad.md
@@ -22,7 +22,7 @@ What is Brian currently thinking about in terms of the training?
 
 ## --answers--
 
-Using real-life scenarios to identify physing attempts.
+Using real-life scenarios to identify phishing attempts.
 
 ---
 
@@ -34,7 +34,7 @@ Focus on what Brian is saying right after `I'm thinking of using...` and `especi
 
 ---
 
-Changing the topic completely because of physing attempts.
+Changing the topic completely because of phishing attempts.
 
 ### --feedback--
 
@@ -42,7 +42,7 @@ Focus on what Brian is saying right after `I'm thinking of using...` and `especi
 
 ---
 
-Canceling the training because of physing attempts.
+Canceling the training because of phishing attempts.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
index 4a83860096..ba994c9200 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b56c0432933515821a4eeb.md
@@ -20,7 +20,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Does Anna support Brian’s idea of using real-life scenarios?
+Does Anna support Brian's idea of using real-life scenarios?
 
 ## --answers--
 
@@ -44,7 +44,7 @@ She mentions that using real-life scenarios improves the training. This indicate
 
 ---
 
-She ignores Brian’s suggestion completely. This indicates she doesn't understands his idea.
+She ignores Brian's suggestion completely. This indicates she doesn't understands his idea.
 
 ### --feedback--
 
@@ -56,7 +56,7 @@ She didn't ignore Brian. Pay attention to the words she uses after `Using real-l
 
 # --explanation--
 
-People sometimes show support indirectly without explicitly saying they agree. To understand if Anna supports Brian’s idea, focus on her comment about the training.
+People sometimes show support indirectly without explicitly saying they agree. To understand if Anna supports Brian's idea, focus on her comment about the training.
 
 Instead of directly saying she likes the idea, she mentions that using real-life scenarios `makes the training more relevant`. This shows she agrees with Brian because she highlights a positive result of using his suggestion.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
index 8a8cccc7bb..c61a585c09 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b572bd3d3e122e9a8ff9df.md
@@ -37,9 +37,9 @@ Consider what phrase you would use to suggest connecting with someone to discuss
 
 `Touch base` means to make contact or to check in with someone, usually to discuss progress or updates. For example:
 
-- `Let’s touch base next week to see how the project is going.` - We'll talk again next week to discuss the project's progress.
+- `Let's touch base next week to see how the project is going.` - We'll talk again next week to discuss the project's progress.
 
-- `I’ll touch base with you later about the meeting.` - you'll contact this person later to talk about the meeting.
+- `I'll touch base with you later about the meeting.` - you'll contact this person later to talk about the meeting.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
index fb318c8bbf..1cb3999e59 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b57e127321d8524c7ddda7.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -83,4 +83,4 @@ Brian doesn't mention a party.
 
 # --explanation--
 
-Look at the email subject `Cybersecurity Training Session` and the first line `I want to update you on our next cybersecurity training session`. These show that Brian is informing the team about the upcoming session. There’s no mention of rescheduling, so the correct answer focuses on providing information about the training.
+Look at the email subject `Cybersecurity Training Session` and the first line `I want to update you on our next cybersecurity training session`. These show that Brian is informing the team about the upcoming session. There's no mention of rescheduling, so the correct answer focuses on providing information about the training.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
index fba928ee12..9865cdf2ce 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b580cb9307d46113a8a637.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -55,7 +55,7 @@ To know why the training session is important.
 
 ### --feedback--
 
-Although understanding the importance is useful, it doesn’t help you attend the meeting.
+Although understanding the importance is useful, it doesn't help you attend the meeting.
 
 ---
 
@@ -63,7 +63,7 @@ To bring a laptop to take notes during the session.
 
 ### --feedback--
 
-Bringing a laptop might be helpful, but it’s not essential information for attending the meeting.
+Bringing a laptop might be helpful, but it's not essential information for attending the meeting.
 
 ---
 
@@ -83,4 +83,4 @@ This is an important information, but it won't help you to attend the meeting. Q
 
 # --explanation--
 
-To answer correctly, focus on the details needed to attend the meeting: the `date`, `time`, `topic`, and `location`. These are listed under `Details` in the email. While informing a manager is important if you can’t attend, it doesn't help you participate in the session itself.
+To answer correctly, focus on the details needed to attend the meeting: the `date`, `time`, `topic`, and `location`. These are listed under `Details` in the email. While informing a manager is important if you can't attend, it doesn't help you participate in the session itself.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
index f3937b181d..0f98762db2 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b58252cb001966f564c19e.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
index a7ca1ea7ce..fcc6120590 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b582d6978cff693c7b9455.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -79,8 +79,8 @@ Think about whether the email mentions anything about meetings or focuses on cyb
 
 ## --video-solution--
 
-1
+3
 
 # --explanation--
 
-The email states, `We’re adding a section on phishing, using real-life scenarios.` This shows that the new section is focused on identifying phishing attempts, not scheduling meetings.
+The email states, `We're adding a section on phishing, using real-life scenarios.` This shows that the new section is focused on identifying phishing attempts, not scheduling meetings.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
index cff9863927..b9b8acba45 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66b583275950846a87e88de8.md
@@ -35,11 +35,11 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Why Attend?`
 
-`As you know, our company has recently faced some security threats. We’re adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
+`As you know, our company has recently faced some security threats. We're adding a section on phishing, using real-life scenarios to ensure everyone uses strong passwords and protects our data.`
 
 `Attendance:`
 
-`Attendance is mandatory. If you can’t attend, please inform your manager.`
+`Attendance is mandatory. If you can't attend, please inform your manager.`
 
 `Looking forward to seeing you all.`
 
@@ -47,7 +47,7 @@ A couple of days after the conversation with Anna, Brian sent this email to the
 
 `Brian`
 
-What should you do if you can’t attend the meeting?
+What should you do if you can't attend the meeting?
 
 ## --answers--
 
@@ -84,4 +84,4 @@ Reflect on whether the email mentions this as an option or gives different instr
 
 # --explanation--
 
-The email says, `If you can’t attend, please inform your manager.` This clearly shows that the correct action is to inform your manager, not reschedule the meeting yourself.
+The email says, `If you can't attend, please inform your manager.` This clearly shows that the correct action is to inform your manager, not reschedule the meeting yourself.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
index 865b9759a4..d29fa0f85c 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbba46fff0ef451b701bcd.md
@@ -45,7 +45,7 @@ Yes, but only for a moment because she has her own problems.
 
 ### --feedback--
 
-Sarah doesn’t limit the time; she simply states that she is not busy.
+Sarah doesn't limit the time; she simply states that she is not busy.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
index ee9241e31c..f2f4e253a6 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbc147bc59c25e60e18aec.md
@@ -44,7 +44,7 @@ The live preview is working correctly.
 
 ### --feedback--
 
-If it were working correctly, Tom wouldn’t say that it isn’t showing.
+If it were working correctly, Tom wouldn't say that it isn't showing.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
index 24bb29a532..94a6c7425e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66bbf183427671a86f5ac25e.md
@@ -44,7 +44,7 @@ Not have this feature.
 
 ### --feedback--
 
-Pay attention to how Tom’s initial statement about the problem connects with his question, showing his surprise that the feature isn’t working as expected.
+Pay attention to how Tom's initial statement about the problem connects with his question, showing his surprise that the feature isn't working as expected.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
index 2cca4413cc..eadfeafc80 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4e019a6cbfa3210603aef.md
@@ -15,7 +15,7 @@ This is a review of the entire dialogue you just studied.
 
 Place the following phrases in the correct spot:
 
-`Where can I`, `Is that right`, `How many` , `Do you know if`,`How does that`, `Does your app`.
+`Where can I`, `Is that right`, `How many` , `Do you know if`,`How does that`, and `Does your app`.
 
 # --fillInTheBlank--
 
@@ -29,7 +29,7 @@ Place the following phrases in the correct spot:
 
 `Lisa: We plan to develop a new app for real-time project collaboration. BLANK sound to you?`
 
-`Bob: Interesting! Who’s on your team?`
+`Bob: Interesting! Who's on your team?`
 
 `Lisa: A couple of developers from our branch in Seattle, and a UX designer I've collaborated with before. BLANK we have any similar projects coming up here?`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
index 4809d4e625..d1ad2f49cc 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ec1a03bb27643063f262.md
@@ -32,7 +32,7 @@ This is a contraction for `it is`, indicating who or what is involved in the act
 
 ### --feedback--
 
-This word is used to make the sentence negative, showing that the action isn’t happening.
+This word is used to make the sentence negative, showing that the action isn't happening.
 
 # --explanation--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
index cf06529d4b..c55863c153 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4efaa80afd0729ae471d1.md
@@ -44,11 +44,11 @@ Remember the verb `to be`.
 
 # --explanation--
 
-`Might` is used to express possibility. When Sarah says, `might not be running`, she’s suggesting that it’s possible the live server extension isn’t currently active or working. For example:
+`Might` is used to express possibility. When Sarah says, `might not be running`, she's suggesting that it's possible the live server extension isn't currently active or working. For example:
 
-- `The server might be down.` - It’s possible the server isn’t working.
+- `The server might be down.` - It's possible the server isn't working.
 
-- `She might not be available today.` - It’s possible she’s not free today.
+- `She might not be available today.` - It's possible she's not free today.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
index 7d795fbb9b..6ac0a66232 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f19f86b5f07a71ac7642.md
@@ -16,11 +16,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What is the probable reason the live preview isn’t working?
+What is the probable reason the live preview isn't working?
 
 ## --answers--
 
-The live preview isn’t supported in Visual Studio Code.
+The live preview isn't supported in Visual Studio Code.
 
 ### --feedback--
 
@@ -40,7 +40,7 @@ Consider why Sarah would mention an issue if everything was working properly.
 
 ---
 
-Sarah doesn’t know what the problem is.
+Sarah doesn't know what the problem is.
 
 ### --feedback--
 
@@ -54,7 +54,7 @@ Think about whether Sarah suggested a possible cause for the issue.
 
 Sarah mentions three things that will help you to help identify the issue.
 
-First, she says, `It should,` showing that the live preview is expected to work. Next, she states that it’s `not displaying,` which indicates a problem. Finally, she suggests a reason: `the live server extension might not be running.`
+First, she says, `It should,` showing that the live preview is expected to work. Next, she states that it's `not displaying,` which indicates a problem. Finally, she suggests a reason: `the live server extension might not be running.`
 
 By connecting these clues, you can determine the probable reason Sarah provides for the issue.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
index 7c6b1aa2df..f13a7f41ff 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f338d6b658809576ae77.md
@@ -26,7 +26,7 @@ Which option is the best answer to Sarah's question?
 
 ### --feedback--
 
-This response doesn’t address whether Tom is using the extension Sarah mentioned.
+This response doesn't address whether Tom is using the extension Sarah mentioned.
 
 ---
 
@@ -38,7 +38,7 @@ This response doesn’t address whether Tom is using the extension Sarah mention
 
 # --explanation--
 
-Sarah is asking Tom if he’s using the live server extension, which is necessary for real-time previews in Visual Studio Code. Tom’s answer will help identify if this might be the cause of the problem. Select the option that answers Sarah's question.
+Sarah is asking Tom if he's using the live server extension, which is necessary for real-time previews in Visual Studio Code. Tom's answer will help identify if this might be the cause of the problem. Select the option that answers Sarah's question.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
index c03d740306..3a9346f3bc 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f45289436884e6afc059.md
@@ -28,9 +28,9 @@ These two words together mean to configure something so it works correctly.
 
 # --explanation--
 
-`Set up right` means to configure something correctly so that it works as expected. If something isn’t `set up right`, it might not function properly. For example:
+`Set up right` means to configure something correctly so that it works as expected. If something isn't `set up right`, it might not function properly. For example:
 
-- `The printer isn’t working because it’s not set up right.` - The printer isn’t configured correctly.
+- `The printer isn't working because it's not set up right.` - The printer isn't configured correctly.
 
 - `Make sure the software is set up right before you start using it.` - You need to configure the software correctly to ensure it works.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
index 2ed0f408a8..39e59c36ba 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4f90997120794595abd5c.md
@@ -21,7 +21,7 @@ Which sentence correctly uses `pop up`?
 
 ### --feedback--
 
-Think about whether `pop up` describes something that happens automatically, or if it’s something you actively do.
+Think about whether `pop up` describes something that happens automatically, or if it's something you actively do.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
index f564cf3f65..12bab43332 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4fd010695b5a316201d03.md
@@ -46,7 +46,7 @@ These two words together mean something suddenly appearing on the screen. The fi
 
 `IntelliJ IDEA` is a popular Integrated Development Environment (IDE) used by developers to write, test, and debug code. It is known for its powerful features, including `auto-completion`, which helps you code faster by suggesting possible completions as you type.
 
-When Tom says that `auto-completion isn’t popping up`, he means that the feature, which normally suggests code as you type, isn’t appearing on the screen like it should.
+When Tom says that `auto-completion isn't popping up`, he means that the feature, which normally suggests code as you type, isn't appearing on the screen like it should.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
index ed6d30065a..223088f40a 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c4ffe51866ecadb48304b9.md
@@ -6,7 +6,7 @@ dashedName: task-122
 ---
 
 <!-- Audio Reference:
-Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic? -->
 
 # --instructions--
 
@@ -20,7 +20,7 @@ Listen to the audio and complete the sentence below.
 
 ## --blanks--
 
-`Isn’t it`
+`Isn't it`
 
 ### --feedback--
 
@@ -30,11 +30,11 @@ A tag question using the contraction of `is not` followed by a pronoun. The firs
 
 A `tag question` is a short question added to the end of a sentence to confirm or check something. It's often used when the speaker expects the listener to agree with them. For example:
 
-- `It’s a nice day, isn’t it?` - The speaker expects that the listener will agree that it’s a nice day.
+- `It's a nice day, isn't it?` - The speaker expects that the listener will agree that it's a nice day.
 
-- `They are coming to the meeting, aren’t they?` - The speaker expects that the listener will agree that they are coming to the meeting.
+- `They are coming to the meeting, aren't they?` - The speaker expects that the listener will agree that they are coming to the meeting.
 
-When Tom says, `Isn’t it automatic?`, he is asking for confirmation that the auto-completion should happen automatically.
+When Tom says, `Isn't it automatic?`, he is asking for confirmation that the auto-completion should happen automatically.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
index e64bc75442..620bea5497 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c5012e6643c2b32b3af0be.md
@@ -6,7 +6,7 @@ dashedName: task-123
 ---
 
 <!-- Audio Reference:
-Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic? -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Why does Tom ask `Isn’t it automatic?`
+Why does Tom ask `Isn't it automatic?`
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
index 5d377d7ee1..b9da55a2cf 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c507bef7c69ac73fbc82cc.md
@@ -6,7 +6,7 @@ dashedName: task-124
 ---
 
 <!-- Audio Reference:
-Tom: The code auto-completion isn't popping up. Isn’t it automatic? -->
+Tom: The code auto-completion isn't popping up. Isn't it automatic? -->
 
 <!-- SPEAKING -->
 
@@ -30,9 +30,9 @@ Which option is the best answer to Tom's question?
 
 ### --feedback--
 
-This options is wrong because it contradicts itself. It starts saying `It is`, confirming Tom’s question, but then it adds that auto-completion needs to be enabled manually every time.
+This options is wrong because it contradicts itself. It starts saying `It is`, confirming Tom's question, but then it adds that auto-completion needs to be enabled manually every time.
 
-This doesn’t make sense — if something is automatic, you wouldn’t need to enable it manually.
+This doesn't make sense — if something is automatic, you wouldn't need to enable it manually.
 
 ## --video-solution--
 
@@ -40,7 +40,7 @@ This doesn’t make sense — if something is automatic, you wouldn’t need to
 
 # --explanation--
 
-Tom says, `The code auto-completion isn't popping up. Isn’t it automatic?` This means he expects auto-completion to work automatically.
+Tom says, `The code auto-completion isn't popping up. Isn't it automatic?` This means he expects auto-completion to work automatically.
 
 A good response would either confirm that auto-completion should be automatic or explain why it might not be working.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
index fd842b9866..3f35eea8a3 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c611f2d1e400c2f41ad5d9.md
@@ -42,7 +42,7 @@ In the `Present Simple` tense, the negative form is created using `doesn't` or `
 
 - Use `isn't` with forms of `to be` to show that something is not true, like `isn't set up.`
 
-In this sentence, you’ll need both `doesn't` and `isn't` to correctly describe why the feature isn’t working as expected.
+In this sentence, you'll need both `doesn't` and `isn't` to correctly describe why the feature isn't working as expected.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
index 46f8651fd9..075b4fed84 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c613a4d11b69cdd746b5ed.md
@@ -54,13 +54,13 @@ Pay attention to what Sarah says after `it doesn't work if...`.
 
 # --explanation--
 
-When Listening to Sarah’s, pay attention to the word `if`. This word often introduces the cause of a problem, explaining what needs to happen for something else to occur.
+When Listening to Sarah's, pay attention to the word `if`. This word often introduces the cause of a problem, explaining what needs to happen for something else to occur.
 
-After finding `if`, identify the part of the sentence that describes what happens when that condition isn’t met (the effect). In Sarah’s sentence:
+After finding `if`, identify the part of the sentence that describes what happens when that condition isn't met (the effect). In Sarah's sentence:
 
-- **Effect:** `The auto-completion doesn’t work`.
+- **Effect:** `The auto-completion doesn't work`.
 
-- **Cause** introduced by `if`: `If the project isn’t set up correctly`.
+- **Cause** introduced by `if`: `If the project isn't set up correctly`.
 
 Understanding this relationship helps you explain problems and solutions clearly.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
index 0d8514e8ec..1c6799b09d 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c616d281199cda967c144d.md
@@ -22,11 +22,11 @@ Tom is not sure he checked the settings and wants to check it again. How can he
 
 ## --answers--
 
-`I don’t think the settings matter.`
+`I don't think the settings matter.`
 
 ### --feedback--
 
-The correct answer would say that he isn’t sure if he has checked the settings, so he needs to check them again.
+The correct answer would say that he isn't sure if he has checked the settings, so he needs to check them again.
 
 ---
 
@@ -38,11 +38,11 @@ The correct answer would say that he isn’t sure if he has checked the settings
 
 # --explanation--
 
-Sometimes, when you’re not sure if you’ve done something, it’s important to say that you’re unsure. For example:
+Sometimes, when you're not sure if you've done something, it's important to say that you're unsure. For example:
 
 - `I'm not sure this is the correct settings.` - You are unsure whether the settings are according to what is expected or not.
 
-The correct answer will reflect Tom’s uncertainty and his plan to check the settings again.
+The correct answer will reflect Tom's uncertainty and his plan to check the settings again.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
index 9d0529ccb8..bcdb2dece2 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6184eda8a8be150b1a0b4.md
@@ -32,7 +32,7 @@ These two words together mean that something is necessary or required.
 
 ### --feedback--
 
-This verb means to look at something carefully to find out if it’s correct or working properly.
+This verb means to look at something carefully to find out if it's correct or working properly.
 
 ---
 
@@ -46,7 +46,7 @@ This word means to do something one more time.
 
 `Have to` is used to express that something is necessary or required. It indicates that there is no choice but to do something. For example:
 
-- `You have to save your changes before closing the program.` - This means it’s necessary to save changes before closing the program.
+- `You have to save your changes before closing the program.` - This means it's necessary to save changes before closing the program.
 
 When Tom says, `I'll have to check again`, he is stating that it's necessary for him to check the settings one more time, suggesting he's not sure about it.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
index 5193a4b374..26cc0e0e29 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6193e7546c4e51cbf64c9.md
@@ -6,7 +6,7 @@ dashedName: task-130
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. -->
+Tom: And in Eclipse, it's not showing the Git tools. -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`And in Eclipse, BLANK BLANK showing the Git tools.`
+`And in Eclipse, BLANK BLANK the Git tools.`
 
 ## --blanks--
 
@@ -36,9 +36,9 @@ This word means that something is supposed to be visible. It ends with `-ing`.
 
 # --explanation--
 
-`It’s not showing` is used to explain that something expected to appear on the screen isn’t visible. For example:
+`It's not showing` is used to explain that something expected to appear on the screen isn't visible. For example:
 
-- `The image isn’t showing on the screen.` - The image is supposed to be there, but it’s not visible.
+- `The image isn't showing on the screen.` - The image is supposed to be there, but it's not visible.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
index 508b0dc14f..9b343d92f3 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a0197d7e7e87191e033.md
@@ -6,7 +6,7 @@ dashedName: task-131
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. -->
+Tom: And in Eclipse, it's not showing the Git tools. -->
 
 # --instructions--
 
@@ -20,7 +20,7 @@ What problem is Tom facing now?
 
 ## --answers--
 
-He doesn’t know how to use Git tools.
+He doesn't know how to use Git tools.
 
 ### --feedback--
 
@@ -28,11 +28,11 @@ Pay attention to the part where Tom talks about something that should be visible
 
 ---
 
-He can’t see the Git tools in Eclipse.
+He can't see the Git tools in Eclipse.
 
 ---
 
-He can’t open the Eclipse software.
+He can't open the Eclipse software.
 
 ### --feedback--
 
@@ -40,7 +40,7 @@ Pay attention to the part where Tom talks about something that should be visible
 
 ---
 
-He doesn’t have Git installed.
+He doesn't have Git installed.
 
 ### --feedback--
 
@@ -52,7 +52,7 @@ Pay attention to the part where Tom talks about something that should be visible
 
 # --explanation--
 
-Tom says, `it’s not showing the Git tools,` which gives important clues to identify his problem.
+Tom says, `it's not showing the Git tools,` which gives important clues to identify his problem.
 
 The key phrase is `not showing`, which points to a visibility issue rather than a problem with knowledge or installation.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
index 54cccc567f..106c722948 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61a57f6eca6e9fb0f61d7.md
@@ -6,7 +6,7 @@ dashedName: task-132
 ---
 
 <!-- Audio Reference:
-Tom: And in Eclipse, it’s not showing the Git tools. Are they built-in? -->
+Tom: And in Eclipse, it's not showing the Git tools. Are they built-in? -->
 
 # --instructions--
 
@@ -16,7 +16,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`And in Eclipse, it’s not showing the Git tools. Are they BLANK?`
+`And in Eclipse, it's not showing the Git tools. Are they BLANK?`
 
 ## --blanks--
 
@@ -30,7 +30,7 @@ Something has been included as part of a larger system or structure from the sta
 
 `Built-in` refers to features or tools that are included as part of a software program or device from the start, without needing to be added or installed separately.
 
-When something is `built-in`, it’s already there and ready to use. For example:
+When something is `built-in`, it's already there and ready to use. For example:
 
 - `This laptop has a built-in camera.` - The camera is included as part of the laptop.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
index 9aa50e0fc9..6ed79263c4 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c61dee09da09f603fa3dbc.md
@@ -6,7 +6,7 @@ dashedName: task-133
 ---
 
 <!-- Audio Reference:
-Tom: It’s not showing the Git tools. Are they built-in? -->
+Tom: It's not showing the Git tools. Are they built-in? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
index 93318ded00..813f4789c4 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62046cf3df2fe7cf92230.md
@@ -20,7 +20,7 @@ According to Sarah, in which case won't the Git tools be visible?
 
 ## --answers--
 
-If the project isn’t saved correctly.
+If the project isn't saved correctly.
 
 ### --feedback--
 
@@ -28,7 +28,7 @@ Pay attention to what Sarah says after `but they're not visible if...`.
 
 ---
 
-If Eclipse isn’t updated to the latest version.
+If Eclipse isn't updated to the latest version.
 
 ### --feedback--
 
@@ -36,11 +36,11 @@ Pay attention to what Sarah says after `but they're not visible if...`.
 
 ---
 
-If the project isn’t linked to Git.
+If the project isn't linked to Git.
 
 ---
 
-If the Git tools aren’t installed manually.
+If the Git tools aren't installed manually.
 
 ### --feedback--
 
@@ -58,7 +58,7 @@ After `but`, Sarah mentions `they're not visible`, followed by the condition `if
 
 This tells you that the tools are hidden unless the project is connected to Git.
 
-The phrase `if the project isn't` is a key marker that introduces the condition under which the Git tools won’t appear.
+The phrase `if the project isn't` is a key marker that introduces the condition under which the Git tools won't appear.
 
 In Sarah's sentence, she uses `they're not` to explain that the Git tools are not visible, and `isn't` to say that the project is not linked to Git.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
index 6eebd117d0..4350295d82 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6213241b74d023adcf637.md
@@ -34,7 +34,7 @@ When forming questions with the verb `to be`, the usual word order of the subjec
 
 - `Is your project connected to Git?` (Question)
 
-In Sarah’s sentence, she uses this inversion to ask Tom if his project is connected to Git in Eclipse.
+In Sarah's sentence, she uses this inversion to ask Tom if his project is connected to Git in Eclipse.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
index a62104b0ec..666757cb56 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62515cf6ae70e34eb361d.md
@@ -16,11 +16,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Tom believes his project should be connected to Git, but he isn’t completely sure. What should he answer Sarah?
+Tom believes his project should be connected to Git, but he isn't completely sure. What should he answer Sarah?
 
 ## --answers--
 
-`It’s supposed to be.`
+`It's supposed to be.`
 
 ---
 
@@ -36,11 +36,11 @@ Think about whether Tom is completely sure about the connection.
 
 # --explanation--
 
-Sometimes, when you're not completely sure about something, but you believe it should be true, you can use the phrase `It’s supposed to` + verb.
+Sometimes, when you're not completely sure about something, but you believe it should be true, you can use the phrase `It's supposed to` + verb.
 
-This will express that something is expected to be a certain way, even if you haven’t confirmed it yet. For example:
+This will express that something is expected to be a certain way, even if you haven't confirmed it yet. For example:
 
-- `The update is supposed to fix the bug.` - This means you expect the update to fix the bug, but you haven’t confirmed it yet.
+- `The update is supposed to fix the bug.` - This means you expect the update to fix the bug, but you haven't confirmed it yet.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
index e6ae198ef7..6ecd32ea6a 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c625e03abcb711ca38ba5f.md
@@ -32,13 +32,13 @@ These two words start the sentence and are used to describe something that is ha
 
 ### --feedback--
 
-An adjective that describes the feeling of being upset or annoyed because something isn’t working as expected. It ends with `-ing`.
+An adjective that describes the feeling of being upset or annoyed because something isn't working as expected. It ends with `-ing`.
 
 # --explanation--
 
 `This is` is a simple way to start a sentence when describing something.
 
-`Frustrating` is an adjective that describes a feeling of being upset or annoyed because something isn’t working as expected. For example:
+`Frustrating` is an adjective that describes a feeling of being upset or annoyed because something isn't working as expected. For example:
 
 - `This is confusing.` - The situation is hard to understand.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
index 5c1cb4919d..dc90df92b0 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62747744dc4178785207d.md
@@ -20,7 +20,7 @@ Why is Tom frustrated?
 
 ## --answers--
 
-Because he doesn’t know how to code.
+Because he doesn't know how to code.
 
 ### --feedback--
 
@@ -28,7 +28,7 @@ Tom's frustration is not related to his coding skills.
 
 ---
 
-Because he didn’t save his project.
+Because he didn't save his project.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
index f182ad1168..9b4afa7617 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c628215739f51ac74cb5cc.md
@@ -30,11 +30,11 @@ This word introduces the condition or situation that causes something to happen.
 
 `when` is used here to describe a specific condition or situation that causes something to happen.
 
-In Sarah’s sentence, `when` introduces the condition where the IDEs become tricky: `if they’re not set up properly`. For example:
+In Sarah's sentence, `when` introduces the condition where the IDEs become tricky: `if they're not set up properly`. For example:
 
 - `The program crashes when it runs out of memory.` - The condition of running out of memory causes the program to crash.
 
-- `The printer only works when it’s plugged in.` - The condition of being plugged in allows the printer to work.
+- `The printer only works when it's plugged in.` - The condition of being plugged in allows the printer to work.
 
 In both cases, `when` is used to explain the situation in which something occurs.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
index cf4c22aa7c..c9a8a3d164 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6293f674a0a1e960027c3.md
@@ -41,7 +41,7 @@ The IDEs are tricky because they lack built-in tools.
 
 ### --feedback--
 
-Reflect on whether Sarah’s explanation was about built-in tools or the setup of the IDEs.
+Reflect on whether Sarah's explanation was about built-in tools or the setup of the IDEs.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
index 60dd081e30..6fe398be0c 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c62b0c65018625985a897d.md
@@ -26,7 +26,7 @@ Tom wants to accept Sarah's offer. How could he reply to her?
 
 ---
 
-`I’m not sure if that will help.`
+`I'm not sure if that will help.`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
index e0451e2128..643e541962 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c637ce17705151c64f9059.md
@@ -29,11 +29,11 @@ Place the following phrases in the correct spot:
 
 `Sarah: It should, but BLANK because the live server extension might not be running. Are you using that extension for real-time previews?`
 
-`Tom: I think we are, but maybe BLANK right. Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn’t it automatic?`
+`Tom: I think we are, but maybe BLANK right. Also, in IntelliJ IDEA, the code auto-completion isn't popping up. Isn't it automatic?`
 
 `Sarah: It usually is, but it doesn't work if the project isn't set up right. Have you checked the settings?`
 
-`Tom: I'll have to check again. And in Eclipse, it’s not showing the Git tools. BLANK built in?`
+`Tom: I'll have to check again. And in Eclipse, it's not showing the Git tools. BLANK built in?`
 
 `Sarah: Yes, they are, but BLANK if the project isn't linked to Git. Is your project connected to Git in Eclipse?`
 
@@ -57,7 +57,7 @@ This phrase is used when checking if something should be working automatically.
 
 ### --feedback--
 
-This phrase indicates that something expected to be visible on the screen isn’t appearing.
+This phrase indicates that something expected to be visible on the screen isn't appearing.
 
 ---
 
@@ -65,7 +65,7 @@ This phrase indicates that something expected to be visible on the screen isn’
 
 ### --feedback--
 
-This phrase explains that something isn’t arranged or configured correctly.
+This phrase explains that something isn't arranged or configured correctly.
 
 ---
 
@@ -81,7 +81,7 @@ This phrase is used to ask if something, like the Git tools, is included or buil
 
 ### --feedback--
 
-This phrase indicates that something, like the Git tools, can’t be seen on the screen.
+This phrase indicates that something, like the Git tools, can't be seen on the screen.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
index 7078fc94a0..4bb912d098 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63db09b73ad6539eeee61.md
@@ -27,17 +27,17 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
 `Best, Sarah`
 
-What should Tom do if the Live Preview isn’t displaying in Visual Studio Code?
+What should Tom do if the Live Preview isn't displaying in Visual Studio Code?
 
 ## --answers--
 
@@ -45,7 +45,7 @@ Restart Visual Studio Code and check the project settings.
 
 ### --feedback--
 
-Consider whether restarting the program is Sarah’s suggested solution or if she focuses more on project settings.
+Consider whether restarting the program is Sarah's suggested solution or if she focuses more on project settings.
 
 ---
 
@@ -65,7 +65,7 @@ Switch to a different IDE to see if the issue persists. She prefers Eclipse.
 
 ### --feedback--
 
-Reflect on whether Sarah’s advice is about changing IDEs or troubleshooting within Visual Studio Code.
+Reflect on whether Sarah's advice is about changing IDEs or troubleshooting within Visual Studio Code.
 
 ## --video-solution--
 
@@ -73,8 +73,8 @@ Reflect on whether Sarah’s advice is about changing IDEs or troubleshooting wi
 
 # --explanation--
 
-To find the answer, focus on the section of Sarah’s email labeled `1. Visual Studio Code - Live preview.`
+To find the answer, focus on the section of Sarah's email labeled `1. Visual Studio Code - Live preview.`
 
-In this part, she explains that if the Live Preview isn’t displaying, Tom should first make sure the live server extension is installed and running.
+In this part, she explains that if the Live Preview isn't displaying, Tom should first make sure the live server extension is installed and running.
 
-Then, if it’s still not working, she advises checking the project settings to ensure everything is correctly set up for real-time previews.
+Then, if it's still not working, she advises checking the project settings to ensure everything is correctly set up for real-time previews.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
index cd6ca7c8a9..b010db7d26 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c63fda0e11806e78090f36.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -41,7 +41,7 @@ Why might auto-completion not work in IntelliJ IDEA, according to Sarah's email?
 
 ## --answers--
 
-The live server extension isn’t installed.
+The live server extension isn't installed.
 
 ### --feedback--
 
@@ -53,7 +53,7 @@ The Git tools are not visible.
 
 ### --feedback--
 
-Consider whether the visibility of Git tools affects auto-completion, or if it’s more about the project setup.
+Consider whether the visibility of Git tools affects auto-completion, or if it's more about the project setup.
 
 ---
 
@@ -75,4 +75,4 @@ Reflect on whether Sarah mentioned file corruption as a reason for auto-completi
 
 Pay close attention to the section labeled `2. IntelliJ IDEA - Auto-Completion.`
 
-In this part, Sarah mentions that if auto-completion isn’t working, the problem is likely due to the project not being set up correctly. She suggests checking the project settings and verifying that all necessary plugins are enabled.
+In this part, Sarah mentions that if auto-completion isn't working, the problem is likely due to the project not being set up correctly. She suggests checking the project settings and verifying that all necessary plugins are enabled.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
index e4b2db4d62..d46dd94d8d 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c6409f492e5e71621d06b8.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -41,7 +41,7 @@ What does Sarah say about the Git tools in Eclipse?
 
 ## --answers--
 
-They are built-in but won’t be visible unless your project is linked to Git.
+They are built-in but won't be visible unless your project is linked to Git.
 
 ---
 
@@ -61,7 +61,7 @@ Consider if Sarah said the tools are automatically visible or if she mentioned a
 
 ---
 
-They only work if you’re using IntelliJ IDEA.
+They only work if you're using IntelliJ IDEA.
 
 ### --feedback--
 
@@ -75,4 +75,4 @@ Reflect on whether Sarah was talking about Eclipse or if this applies to a diffe
 
 Sarah provides instructions specifically about the Git tools in Eclipse under the section `3. Eclipse - Git Tools.`
 
-She mentions that the tools are built-in, but they won’t be visible unless the project is linked to Git. 
+She mentions that the tools are built-in, but they won't be visible unless the project is linked to Git. 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
index 6f49f93d04..c77c188650 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-describe-places-and-events/66c640e2f81416727a42fd4c.md
@@ -27,11 +27,11 @@ Sarah decided to e-mail and document their conversation:
 
 `2. IntelliJ IDEA - Auto-Completion:`
 
-`Double-check your project settings. If auto-completion isn’t working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
+`Double-check your project settings. If auto-completion isn't working, the project might not be set up right. Go to your project settings and verify that all necessary plugins are enabled.`
 
 `3. Eclipse - Git Tools:`
 
-`The Git tools are built-in, but they won’t be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
+`The Git tools are built-in, but they won't be visible unless your project is linked to Git. Make sure your project is connected to the Git repository.`
 
 `Let me know if you need any more help, or if you'd like to go through a detailed walkthrough together.`
 
@@ -53,7 +53,7 @@ She suggests that Tom should hire someone else to fix the issues.
 
 ### --feedback--
 
-Consider if Sarah’s tone is more supportive or if she is suggesting an alternative solution.
+Consider if Sarah's tone is more supportive or if she is suggesting an alternative solution.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
index 52fa983677..b00e7e2457 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/66609f86c2500e597c8cb52f.md
@@ -1,8 +1,8 @@
 ---
 id: 66609f86c2500e597c8cb52f
-title: "Dialogue 1: I'm Tom"
+title: "Dialogue 1: Scheduled Maintenance to Prevent DoS Attacks"
 challengeType: 21
-dashedName: dialogue-1-im-tom
+dashedName: dialogue-1-scheduled-maintenance-to-prevent-dos-attacks
 ---
 
 # --description--
@@ -11,48 +11,177 @@ Watch the video below to understand the context of the upcoming lessons.
 
 # --assignment--
 
-Watch the video
+Watch the video.
 
 # --scene--
 
 ```json
 {
-  "setup": {
-    "background": "chaos.png",
-    "characters": [
-      {
-        "character": "David",
-        "position": {"x":50,"y":80,"z":8},
-        "opacity": 0
-      }
-    ],
-    "audio": {
-      "filename": "1.1-1.mp3",
-      "startTime": 1,
-      "startTimestamp": 5.7,
-      "finishTimestamp": 6.48
-    }
-  },
-  "commands": [
-    {
-      "character": "David",
-      "opacity": 1,
-      "startTime": 0
-    },
-    {
-      "character": "David",
-      "startTime": 1,
-      "finishTime": 0.78,
-      "dialogue": {
-        "text": "I'm Tom.",
-        "align": "center"
-      }
-    },
-    {
-      "character": "Tom",
-      "opacity": 0,
-      "startTime": 1.28
-    }
-  ]
+ "setup": {
+   "background": "company2-boardroom.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Maria",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 4.94,
+     "dialogue": {
+       "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 5.22,
+     "finishTime": 10.94,
+     "dialogue": {
+       "text": "It's crucial to enhance our firewall settings to prevent any potential denial of service attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 11.9,
+     "finishTime": 17.52,
+     "dialogue": {
+       "text": "Yes, Jake. I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 18.4,
+     "finishTime": 21.06,
+     "dialogue": {
+       "text": "That's right. The update should last about two hours.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 21.42,
+     "finishTime": 25.52,
+     "dialogue": {
+       "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 26.1,
+     "finishTime": 31.76,
+     "dialogue": {
+       "text": "Will the support team be on call during the update? We need to make sure they're ready to handle any immediate issues that come up.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 32.78,
+     "finishTime": 35.44,
+     "dialogue": {
+       "text": "Absolutely. The entire technical support team will be on duty.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 35.82,
+     "finishTime": 40,
+     "dialogue": {
+       "text": "They've been briefed and are prepared to manage any unexpected situations.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 40.5,
+     "finishTime": 42.74,
+     "dialogue": {
+       "text": "Great. And when does the team perform the final checks?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 43.12,
+     "finishTime": 45.78,
+     "dialogue": {
+       "text": "The final system checks are set for Friday night.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 46.1,
+     "finishTime": 51.18,
+     "dialogue": {
+       "text": "We'll confirm that all security patches are ready to be deployed without any complications.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 51.76,
+     "finishTime": 55.42,
+     "dialogue": {
+       "text": "Perfect. And the training session for the new security protocols, when is that planned?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 55.42,
+     "finishTime": 57.98,
+     "dialogue": {
+       "text": "The training is planned for Thursday afternoon.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 58.44,
+     "finishTime": 63.06,
+     "dialogue": {
+       "text": "Every team member must understand the changes and how these will impact our operations.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 63.56
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 64.06
+   }
+ ]
 }
 ```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
new file mode 100644
index 0000000000..d78c313753
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673519c3d750b013c96f1e6f.md
@@ -0,0 +1,90 @@
+---
+id: 673519c3d750b013c96f1e6f
+title: Task 1
+challengeType: 22
+dashedName: task-1
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Maria, the next BLANK BLANK is scheduled for this Saturday at 2 AM.`
+
+## --blanks--
+
+`system`
+
+### --feedback--
+
+This word refers to the entire software or hardware environment needing improvement or maintenance.
+
+---
+
+`update`
+
+### --feedback--
+
+This word describes a new version or change that improves software or adds features.
+
+# --explanation--
+
+A `system update` is an essential process that makes improvements, adds new features, or corrects issues in the software on a device or network. For example:
+
+- `The system update included security improvements to protect user data.` - The update made changes to help keep user information safe from potential threats.
+
+- `After the system update, the device ran faster and had new features.` - The update improved device speed and added new functionalities, making it more efficient and useful.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
new file mode 100644
index 0000000000..5d6e6f115b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67351b96eefe7c282ec1424b.md
@@ -0,0 +1,107 @@
+---
+id: 67351b96eefe7c282ec1424b
+title: Task 2
+challengeType: 19
+dashedName: task-2
+---
+
+<!-- (Audio) Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has been scheduled?
+
+## --answers--
+
+The next system update.
+
+---
+
+A team meeting.
+
+### --feedback--
+
+James does not mention a meeting.
+
+---
+
+A system backup.
+
+### --feedback--
+
+James doesn't mention a backup.
+
+---
+
+A software installation.
+
+### --feedback--
+
+James doesn't mention a new installation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`To be scheduled` means to set a specific date and time for something to happen. In this case, the system update is planned for a specific day and hour. For example:
+
+- `The meeting is scheduled for Monday at 10 AM.` - This means the meeting will happen on Monday at 10 AM.
+
+- `The release is scheduled for next month.` - This means the release will take place sometime in the upcoming month.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
new file mode 100644
index 0000000000..57d207b4f2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673653fa580778853a7a7afd.md
@@ -0,0 +1,108 @@
+---
+id: 673653fa580778853a7a7afd
+title: Task 3
+challengeType: 19
+dashedName: task-3
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is the system update scheduled?
+
+## --answers--
+
+This Sunday at 2 AM.
+
+### --feedback--
+
+Check if Jake mentions Saturday or Sunday for the update.
+
+---
+
+This Saturday at 2 AM.
+
+---
+
+Next Saturday at 2 PM.
+
+### --feedback--
+
+Check if Jake specifies a morning or afternoon time and which Saturday he means.
+
+---
+
+Past Saturday at 2 AM.
+
+### --feedback--
+
+Consider whether Jake refers to a future date or something that has already passed.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`This` and `next` help clarify if an event is scheduled soon or further in the future.
+
+In this case, `this Saturday at 2 AM` refers to the upcoming Saturday and a specific early morning time chosen to minimize disruption. For example:
+
+- `The meeting is scheduled for this Friday at 9 AM.` - This means the meeting is set for the closest Friday at 9 AM.
+
+- `Our next session is next Tuesday at 4 PM.` - This means the session will occur on the Tuesday following this week, at 4 PM.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 4.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.04,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2am.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
new file mode 100644
index 0000000000..15bbeeacc3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673654d11366b18b1c76d980.md
@@ -0,0 +1,82 @@
+---
+id: 673654d11366b18b1c76d980
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to BLANK our firewall settings.`
+
+## --blanks--
+
+`enhance`
+
+### --feedback--
+
+This word means to improve or make something stronger or more effective.
+
+# --explanation--
+
+`Enhance` means to improve something or make it more effective. For example:
+
+- `We need to enhance our website's security features.` - This means improving or strengthening the website's security.
+
+- `The new update enhances the app's performance.` - This means the update improves how well the app works.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.02,
+      "finishTimestamp": 6.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.6,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.1
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
new file mode 100644
index 0000000000..2da226cc72
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673655ea628630928b5b50b8.md
@@ -0,0 +1,107 @@
+---
+id: 673655ea628630928b5b50b8
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings to prevent any potential denial of service attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's crucial to enhance our firewall settings to prevent any potential BLANK BLANK BLANK attacks.`
+
+## --blanks--
+
+`denial`
+
+### --feedback--
+
+This word refers to refusing or blocking something from happening.
+
+---
+
+`of`
+
+### --feedback--
+
+This word is a short preposition often used to link two related ideas.
+
+---
+
+`service`
+
+### --feedback--
+
+This word describes a type of assistance or functionality provided, such as by a network.
+
+# --explanation--
+
+A `Denial of Service (DoS)` attack is a cyber-attack intended to make a network or service unavailable to its intended users, usually by overwhelming it with traffic. This type of attack disrupts normal service, causing slowdowns or complete outages. For example:
+
+- `The system went down due to a denial of service attack.` - This means the system became unavailable because it was overwhelmed by malicious traffic.
+
+- `Enhanced firewall settings can help prevent DoS attacks.` - This means improved firewall configurations can reduce the risk of such attacks by blocking unwanted traffic.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.22,
+      "finishTimestamp": 9.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.4,
+      "finishTime": 6.72,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
new file mode 100644
index 0000000000..a63034725a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6736576b5407af9bdf1f41b7.md
@@ -0,0 +1,110 @@
+---
+id: 6736576b5407af9bdf1f41b7
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What should be enhanced?
+
+## --answers--
+
+Network speed.
+
+### --feedback--
+
+Jake is not discussing the network's speed or performance.
+
+---
+
+Software compatibility.
+
+### --feedback--
+
+Jake is not focused on compatibility between different software.
+
+---
+
+Firewall settings.
+
+---
+
+User interface.
+
+### --feedback--
+
+Jake's focus is on something related to security, not appearance or design.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+A `firewall` is a security system that protects a network by controlling incoming and outgoing network traffic based on security rules.
+
+`Settings` refer to configurations or adjustments that determine how something functions.
+
+`Firewall settings` are the specific rules or configurations used to manage network security. For example:
+
+- `We updated the firewall settings to block unauthorized access.` - This means adjustments were made to prevent access by unauthorized users.
+
+- `Enhancing firewall settings can help prevent cyber attacks.` - This means improving the configurations to increase security against online threats.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.02,
+      "finishTimestamp": 6.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.6,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.1
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
new file mode 100644
index 0000000000..2c32852ecc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67365a08481f68acc18a9639.md
@@ -0,0 +1,113 @@
+---
+id: 67365a08481f68acc18a9639
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+<!-- (Audio) Jake: It's crucial to enhance our firewall settings to prevent any potential denial of service attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why does Jake want to enhance their firewall settings?
+
+## --answers--
+
+To improve network speed.
+
+### --feedback--
+
+Consider if Jake's focus is on security or performance.
+
+---
+
+To add new features.
+
+### --feedback--
+
+Think about whether Jake mentions adding anything new, or if he is more focused on protection.
+
+---
+
+To fix a current security issue.
+
+### --feedback--
+
+Jake refers to a potential risk, not a current issue that needs fixing.
+
+---
+
+To prevent Denial of Service attacks.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the audio, `to prevent` is a key marker that shows Jake's main reason for enhancing the firewall settings.
+
+He emphasizes prevention, specifically mentioning `Denial of Service attacks` as the potential risk.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.22,
+      "finishTimestamp": 9.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.4,
+      "finishTime": 6.72,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
new file mode 100644
index 0000000000..749d8c4e97
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba128855f6e78cd392dab.md
@@ -0,0 +1,109 @@
+---
+id: 673ba128855f6e78cd392dab
+title: Task 8
+challengeType: 19
+dashedName: task-8
+---
+
+<!-- (Audio) Jake: Maria, the next system update is scheduled for this Saturday at 2 AM. It's crucial to enhance our firewall settings to prevent any potential DoS attacks. -->
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which is the best response to Jake's comment?
+
+## --answers--
+
+`Yes, Jake. I've reviewed the timetable.`
+
+---
+
+`Yes, Jake. The moon looks great tonight.`
+
+### --feedback--
+
+This response is unrelated to Jake's comment about the system update and firewall settings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+A `timetable` is a schedule that outlines the times and dates of planned events or activities. In this context, Jake refers to a timetable for the system update, and Maria mentions reviewing it, showing she is prepared. For example:
+
+- `The timetable for the train is posted at the station.` - This means the schedule for train arrivals and departures is available for reference.
+
+- `We created a timetable to organize our project milestones.` - This means a schedule was set up to track when each project goal should be achieved.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 10.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.94,
+      "dialogue": {
+        "text": "Maria, the next system update is scheduled for this Saturday at 2 AM.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.96,
+      "finishTime": 7.62,
+      "dialogue": {
+        "text": "It's crucial to enhance our firewall settings",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 7.63,
+      "finishTime": 10.34,
+      "dialogue": {
+        "text": "to prevent any potential denial of service attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 11.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
new file mode 100644
index 0000000000..8a0e9ae740
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba3a9d1858104dfbba180.md
@@ -0,0 +1,82 @@
+---
+id: 673ba3a9d1858104dfbba180
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) Maria: Yes, Jake. I've reviewed the timetable. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, Jake. I've reviewed the BLANK.`
+
+## --blanks--
+
+`timetable`
+
+### --feedback--
+
+This word refers to a schedule that organizes events or activities based on time.
+
+# --explanation--
+
+A `timetable` is a schedule that outlines the times and dates of planned events or activities. It is used to organize and keep track of when specific tasks, meetings, or updates will happen. For example:
+
+- `The timetable for the conference was shared last week.` - This means the schedule of sessions and events for the conference was provided.
+
+- `Our team follows a weekly timetable for project check-ins.` - This means there is a set schedule each week for the team to review progress.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.7,
+      "finishTimestamp": 12.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.0,
+      "dialogue": {
+        "text": "Yes, Jake. I've reviewed the timetable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
new file mode 100644
index 0000000000..104e394e0c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba5bf35e3b51211c27c2b.md
@@ -0,0 +1,106 @@
+---
+id: 673ba5bf35e3b51211c27c2b
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- (Audio) Maria: Yes, Jake, I've reviewed the timetable. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has Maria done?
+
+## --answers--
+
+She has changed the timetable.
+
+### --feedback--
+
+Consider whether Maria mentions making any edits or changes.
+
+---
+
+She has ignored the timetable.
+
+### --feedback--
+
+Think about whether Maria shows she has paid attention to the timetable.
+
+---
+
+She has created a timetable.
+
+### --feedback--
+
+Check if Maria refers to an existing timetable or mentions making a new one.
+
+---
+
+She has reviewed the timetable.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Maria's statement, `Yes, Jake, I've reviewed the timetable`, shows she has already checked or looked over the schedule for the system update. `To review` something means to examine or go over it carefully. For example:
+
+- `I reviewed the project proposal before the meeting.` - This means you checked the proposal to understand it.
+
+- `She reviewed the instructions before starting the task.` - This means she examined the instructions to ensure she knew what to do.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.7,
+      "finishTimestamp": 12.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.0,
+      "dialogue": {
+        "text": "Yes, Jake. I've reviewed the timetable.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
new file mode 100644
index 0000000000..eab87a114a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba72bd5ef6a1bc39ba037.md
@@ -0,0 +1,101 @@
+---
+id: 673ba72bd5ef6a1bc39ba037
+title: Task 11
+challengeType: 22
+dashedName: task-11
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The BLANK BLANK starts exactly when the user traffic is at its lowest, correct?`
+
+## --blanks--
+
+`server`
+
+### --feedback--
+
+This word refers to a computer system that provides services, resources, or data to other computers on a network.
+
+---
+
+`downtime`
+
+### --feedback--
+
+This word refers to a period when a system or service is not available or operational.
+
+# --explanation--
+
+`Downtime` is a period when a system or service is unavailable or not operational. It is often scheduled to perform maintenance, updates, or repairs.
+
+`Server downtime` specifically refers to the time when a server — a computer system that provides data, services, or resources to other devices — is temporarily unavailable. For example:
+
+- `The server downtime was scheduled at midnight to minimize the impact on users.` - This means the server was made unavailable at midnight to reduce inconvenience to users.
+
+- `Unexpected downtime occurred due to a power failure.` - This means the system became unavailable without prior planning because of a power outage.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
new file mode 100644
index 0000000000..3e4a44f387
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba8558f0a93235de58ccb.md
@@ -0,0 +1,111 @@
+---
+id: 673ba8558f0a93235de58ccb
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The server downtime starts exactly when the user traffic is BLANK BLANK BLANK, correct?`
+
+## --blanks--
+
+`at`
+
+### --feedback--
+
+This is a preposition used to indicate a specific time or condition.
+
+---
+
+`its`
+
+### --feedback--
+
+This is a possessive pronoun referring to something that belongs to or is related to the server traffic.
+
+---
+
+`lowest`
+
+### --feedback--
+
+This is the superlative form of `low`, describing the smallest amount or level.
+
+# --explanation--
+
+The pronoun `its` is a possessive pronoun that indicates something belongs to or is associated with a subject. For example:
+
+`The system operates best when its temperature is regulated.` - This means the system works well when the temperature belonging to it is controlled.
+
+The word `lowest` is the superlative form of `low`, meaning the least amount or the smallest degree. For example:
+
+`The lowest temperature recorded was in the early morning.` - This means the smallest temperature measured occurred in the morning.
+
+In Maria's sentence, `at its lowest` refers to the lowest level of user traffic for the server.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
new file mode 100644
index 0000000000..e814301b9d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673ba99a1280af2ba7770b56.md
@@ -0,0 +1,111 @@
+---
+id: 673ba99a1280af2ba7770b56
+title: Task 13
+challengeType: 19
+dashedName: task-13
+---
+
+<!-- (Audio) Maria: The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does the server downtime start?
+
+## --answers--
+
+When the user traffic is at its peak.
+
+### --feedback--
+
+Consider whether downtime would be planned when the server is most active. Think about when the least disruption would occur.
+
+---
+
+When the user traffic is at its lowest.
+
+---
+
+When the server needs a reboot.
+
+### --feedback--
+
+Maria does not mention any specific technical need like a reboot. Focus on what she says about traffic.
+
+---
+
+When new features are added.
+
+### --feedback--
+
+Maria is talking about downtime related to user traffic, not updates or feature additions. Pay attention to the context of the sentence.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria states that the server downtime starts when `the user traffic is at its lowest`. This indicates the downtime is planned for a time with minimal user activity, likely to reduce the impact on users.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
new file mode 100644
index 0000000000..f3712a2e98
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bab51ecb42c369eb6b37b.md
@@ -0,0 +1,101 @@
+---
+id: 673bab51ecb42c369eb6b37b
+title: Task 14
+challengeType: 19
+dashedName: task-14
+---
+
+<!-- (Audio) Maria: Yes, Jake, I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the best answer to Maria's question?
+
+## --answers--
+
+`That's right. The update lasted about two hours.`
+
+### --feedback--
+
+Check if the response uses the correct tense for a future event. Maria is asking about something that hasn't happened yet.
+
+---
+
+`That's right. The update should last about two hours.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria's question uses the `Present Simple` tense, `The server downtime starts...`, to talk about a planned event.
+
+This is common when discussing schedules or timetables, as the `Present Simple` indicates something fixed or organized in the future. Her intention is to confirm the timing of the downtime as planned.
+
+The answer, `That's right. The update should last about two hours`, confirms her statement and provides additional detail about the expected duration of the update.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 12.74,
+      "finishTimestamp": 16.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "The server downtime starts exactly",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.52,
+      "finishTime": 4.88,
+      "dialogue": {
+        "text": "when the user traffic is at its lowest, correct?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
new file mode 100644
index 0000000000..b92c074789
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673bad5d57b0a6444819ca0e.md
@@ -0,0 +1,94 @@
+---
+id: 673bad5d57b0a6444819ca0e
+title: Task 15
+challengeType: 22
+dashedName: task-15
+---
+
+<!-- (Audio) Jake: That's right. The update should last about two hours. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That's right. The update BLANK BLANK about two hours.`
+
+## --blanks--
+
+`should`
+
+### --feedback--
+
+This modal verb is used to express an expectation or likelihood of something happening.
+
+---
+
+`last`
+
+### --feedback--
+
+This word means to continue for a specific period of time.
+
+# --explanation--
+
+`Should` is used to express an expectation or something that is likely to happen.
+
+`Last` means to continue or endure for a specific amount of time. For example:
+
+- `The meeting should last for one hour.` - This means it is expected that the meeting will take one hour to complete.
+
+- `This battery should last up to five hours.` - This indicates the expected duration of the battery's performance.
+
+Together, `should last` expresses the anticipated length of time something will continue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.4,
+      "finishTimestamp": 20.06
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "That's right. The update should last about two hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
new file mode 100644
index 0000000000..1277e59b5e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673baec00a78e04d5c6a9ea2.md
@@ -0,0 +1,92 @@
+---
+id: 673baec00a78e04d5c6a9ea2
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Our main goal is to BLANK BLANK while strengthening our defenses.`
+
+## --blanks--
+
+`minimize`
+
+### --feedback--
+
+This word means to reduce something to the smallest possible amount or degree.
+
+---
+
+`disruption`
+
+### --feedback--
+
+This word refers to a disturbance or interruption in the normal flow or operation of something.
+
+# --explanation--
+
+`Minimize` means to reduce something to the smallest amount or degree possible.
+
+`Disruption` refers to any interruption or disturbance in normal activity.
+
+Together, `minimize disruption` means to reduce interruptions or disturbances to the lowest level possible. For example:
+
+`The team worked at night to minimize disruption to daily operations.` - This means they scheduled their work at night to cause the least amount of interference during the day.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.32,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.4,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
new file mode 100644
index 0000000000..bc428e2aa0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c03eb9c3d4c2e12555aaf.md
@@ -0,0 +1,80 @@
+---
+id: 673c03eb9c3d4c2e12555aaf
+title: Task 17
+challengeType: 22
+dashedName: task-17
+---
+
+<!-- (Audio) Jake: Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Our main goal is to minimize disruption while BLANK our defenses.`
+
+## --blanks--
+
+`strengthening`
+
+### --feedback--
+
+This word refers to the process of making something stronger or more secure. It ends in `-ing`.
+
+# --explanation--
+
+`Strengthening` describes the ongoing process of making something stronger. For example:
+
+`We are strengthening our defenses to improve security.` - This means actively working to make the defenses better and more secure.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.32,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.4,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
new file mode 100644
index 0000000000..972e3636ad
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c06abb58d403f7e4533fb.md
@@ -0,0 +1,113 @@
+---
+id: 673c06abb58d403f7e4533fb
+title: Task 18
+challengeType: 19
+dashedName: task-18
+---
+
+<!-- (Audio) Jake: That's right. The update should last about two hours. Our main goal is to minimize disruption while strengthening our defenses. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the expected outcome?
+
+## --answers--
+
+The update completely avoids all disruption.
+
+### --feedback--
+
+Consider whether Jake mentions completely avoiding disruption or minimizing it.
+
+---
+
+The update weakens defenses while maintaining user traffic.
+
+### --feedback--
+
+Think about whether Jake's goal is to weaken defenses or strengthen them.
+
+---
+
+The update causes minimal disruption and strengthens defenses.
+
+---
+
+The update distracts users to implement new features.
+
+### --feedback--
+
+Jake is focused on minimizing disruption, not on distracting users, and does not mention new features.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To identify the expected outcome, listen for the parts of the audio where Jake states the goals of the update.
+
+He mentions `minimize disruption` and `strengthening our defenses`, which clearly outline what the update aims to achieve.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.4,
+      "finishTimestamp": 24.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "That's right. The update should last about two hours.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.02,
+      "finishTime": 8.32,
+      "dialogue": {
+        "text": "Our main goal is to minimize disruption while strengthening our defenses.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
new file mode 100644
index 0000000000..368a66821f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c07da6aa1be470dc55332.md
@@ -0,0 +1,92 @@
+---
+id: 673c07da6aa1be470dc55332
+title: Task 19
+challengeType: 22
+dashedName: task-19
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK the support team be BLANK during the update?`
+
+## --blanks--
+
+`Will`
+
+### --feedback--
+
+It is used to indicate the future in this structure. The first letter is capitalized.
+
+---
+
+`on call`
+
+### --feedback--
+
+This phrase means being available online to provide support or help if needed.
+
+# --explanation--
+
+`On call` means being available online to provide help or support if necessary.
+
+This sentence uses the structure `Will + subject + verb` to ask about a planned event in the future. This structure is common in formal questions about future arrangements. For example:
+
+- `Will the meeting start at 10 AM?` - This is asking if the meeting is scheduled to begin at that specific time.
+
+- `Will they join us for dinner?` - This is asking if they have plans to come to dinner.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
new file mode 100644
index 0000000000..a0ff078d7f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c097ad524db51cca7ae3f.md
@@ -0,0 +1,104 @@
+---
+id: 673c097ad524db51cca7ae3f
+title: Task 20
+challengeType: 19
+dashedName: task-20
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to confirm about the support team?
+
+## --answers--
+
+If they will be on call during the update.
+
+---
+
+If they will perform the update themselves.
+
+### --feedback--
+
+Think about whether Maria is asking about the team's role or their availability.
+
+---
+
+If they will monitor user traffic.
+
+### --feedback--
+
+Consider whether Maria refers to managing user activity or being available to assist.
+
+---
+
+If they will install new features.
+
+### --feedback--
+
+Maria's question focuses on their availability, not specific tasks like feature installation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria uses the structure `Will the support team be on call during the update?` to ask if they will be available to help if needed.
+
+Pay attention to the phrase `on call` to understand her intention.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
new file mode 100644
index 0000000000..499a16488a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/673c0bf736904660a9077269.md
@@ -0,0 +1,102 @@
+---
+id: 673c0bf736904660a9077269
+title: Task 21
+challengeType: 19
+dashedName: task-21
+---
+
+<!-- (Audio) Maria: Will the support team be on call during the update? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If the support team might install new features during the update.
+
+### --feedback--
+
+Think about whether Maria's question mentions feature installation or their availability.
+
+---
+
+If the support team is not required to assist during the update.
+
+### --feedback--
+
+Consider whether Maria's question implies the team is unnecessary or if she is confirming their availability.
+
+---
+
+If the support team will be on call during the update.
+
+---
+
+If the support team will work on managing user activity.
+
+### --feedback--
+
+Maria's question does not focus on user activity but rather their availability.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Maria's question, `Will the support team be on call during the update?`, is asking about a future event in which the team needs to be available to assist.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.9,
+      "finishTimestamp": 27.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.34,
+      "dialogue": {
+        "text": "Will the support team be on call during the update?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
new file mode 100644
index 0000000000..5cafb2b6ae
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472118e6040e52ad3ca5b0.md
@@ -0,0 +1,101 @@
+---
+id: 67472118e6040e52ad3ca5b0
+title: Task 22
+challengeType: 22
+dashedName: task-22
+---
+
+<!-- (Audio) Maria:  We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We need to make sure they're ready to BLANK any immediate BLANK that come up.`
+
+## --blanks--
+
+`handle`
+
+### --feedback--
+
+This word means to manage, deal with, or take care of something.
+
+---
+
+`issues`
+
+### --feedback--
+
+This word refers to problems or concerns that need to be addressed or resolved.
+
+# --explanation--
+
+`Handle` means to deal with or manage a task or situation effectively.
+
+`Issues` refers to problems or concerns that require attention or resolution. Together, `handle issues` suggests managing or solving problems as they occur. For example:
+
+- `The technician handled the issue quickly.` - This means the technician managed or resolved the problem efficiently.
+
+- `Addressing these issues is critical for project success.` - This refers to focusing on and resolving problems that affect the project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
new file mode 100644
index 0000000000..8c23c475f4
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472280c0b01f5e1442f8da.md
@@ -0,0 +1,115 @@
+---
+id: 67472280c0b01f5e1442f8da
+title: Task 23
+challengeType: 19
+dashedName: task-23
+---
+
+<!-- (Audio) Maria: We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to ensure?
+
+## --answers--
+
+That they've already solved all the issues.
+
+### --feedback--
+
+Maria is talking about preparation for future problems, not resolving something that has already been handled.
+
+---
+
+That they're ready to handle any immediate issues.
+
+---
+
+That they avoid dealing with any issues.
+
+### --feedback--
+
+Maria emphasizes readiness, not avoidance. Think about whether she wants them to act or ignore.
+
+---
+
+That they focus only on long-term problems.
+
+### --feedback--
+
+Maria's focus is on immediate issues, not long-term concerns. Pay attention to the word `immediate`.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, listen to the key phrases in Maria's statement: `We need to make sure they're ready` and `to handle any immediate issues that come up.`
+
+The word `ready` indicates preparation, and `immediate issues` specifies the type of problems Maria is referring to.
+
+Together, these phrases show that Maria is focused on ensuring readiness to deal with short-term, unexpected challenges.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
new file mode 100644
index 0000000000..0863bb86fe
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67472348ce54e263862c5386.md
@@ -0,0 +1,99 @@
+---
+id: 67472348ce54e263862c5386
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Maria: We need to make sure they're ready to handle any immediate issues that come up. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Maria believes they should handle issues as they come up.
+
+## --answers--
+
+True
+
+---
+
+False
+
+### --feedback--
+
+Consider whether Maria talks about avoiding or addressing issues. Pay attention to the phrase `handle any immediate issues`.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria says, `We need to make sure they're ready to handle any immediate issues that come up.`
+
+The phrase `handle issues as they come up` directly points to her belief in addressing problems as they occur.
+
+To answer correctly, focus on her use of the words `ready to handle` and `immediate issues`, which indicate her intention for proactive problem-solving.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 27.24,
+      "finishTimestamp": 30.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "We need to make sure they're ready to handle",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 2.88,
+      "finishTime": 4.52,
+      "dialogue": {
+        "text": "any immediate issues that come up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
new file mode 100644
index 0000000000..df14a58f76
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3864432aea6f5ce708ed.md
@@ -0,0 +1,92 @@
+---
+id: 674e3864432aea6f5ce708ed
+title: Task 26
+challengeType: 22
+dashedName: task-26
+---
+
+<!-- (Audio) Absolutely, the entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. The BLANK technical support team will be BLANK.`
+
+## --blanks--
+
+`entire`
+
+### --feedback--
+
+This word means the whole or complete group.
+
+---
+
+`on duty`
+
+### --feedback--
+
+These two words together mean being officially assigned to work or perform tasks at a specific time. The first word is a preposition, and the second is a noun.
+
+# --explanation--
+
+`Entire` means the whole or complete group, emphasizing that every member of the technical support team is included.
+
+`On duty` refers to being officially assigned to work or available to perform tasks during a specific time. For example:
+
+- `The entire staff attended the meeting.` - This means all members of the staff were present.
+
+- `The security guard is on duty until midnight.` - This means the guard is working and available until the specified time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
new file mode 100644
index 0000000000..a167546f76
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3b2f69b2e481d4f6cebe.md
@@ -0,0 +1,94 @@
+---
+id: 674e3b2f69b2e481d4f6cebe
+title: Task 25
+challengeType: 22
+dashedName: task-25
+---
+
+<!-- (Audio) Absolutely. The entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. The entire technical support team BLANK BLANK on duty.`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This word indicates the `Future Simple` tense.
+
+---
+
+`be`
+
+### --feedback--
+
+Infinitive form of verb `to be`.
+
+# --explanation--
+
+The sentence uses `will` to indicate the `Future Simple` tense, showing that the action is expected to happen.
+
+The structure `will + verb` is commonly used to talk about future events, plans, or predictions. For example:
+
+- `They will be at the meeting tomorrow.` - This means their presence is planned for the future.
+
+- `We will start the project next week.` - This means the project is scheduled to begin in the future.
+
+Using `will` is a straightforward way to express future intentions, promises, or schedules.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
new file mode 100644
index 0000000000..f9b77c33aa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3bc223f6c5862facf3e2.md
@@ -0,0 +1,88 @@
+---
+id: 674e3bc223f6c5862facf3e2
+title: Task 27
+challengeType: 19
+dashedName: task-27
+---
+
+<!-- (Audio) Absolutely, the entire technical support team will be on duty. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Only a part of the technical support team will be on duty.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Focus on the word `entire` in his statement.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Entire` in the sentence makes it clear that all members of the technical support team will be available.
+
+To find the correct answer, focus on the key phrase: `the entire technical support team`. This emphasizes that no one is excluded from being on duty.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.08,
+      "finishTimestamp": 34.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Absolutely. The entire technical support team will be on duty.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
new file mode 100644
index 0000000000..691fda15e6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/674e3cb5a611618cd5301758.md
@@ -0,0 +1,99 @@
+---
+id: 674e3cb5a611618cd5301758
+title: Task 28
+challengeType: 22
+dashedName: task-28
+---
+
+<!-- (Audio) They've been briefed and are prepared to manage any unexpected situations. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`They've been BLANK and are prepared to manage any BLANK situations.`
+
+## --blanks--
+
+`briefed`
+
+### --feedback--
+
+This word means being given detailed information or instructions about a task or situation. It ends in `-ed`.
+
+---
+
+`unexpected`
+
+### --feedback--
+
+This word describes something that happens without warning or is not anticipated. It ends in `-ed`.
+
+# --explanation--
+
+`Briefed` means that someone has been provided with detailed instructions or information to prepare them for a specific task or situation.
+
+`Unexpected` refers to something that happens without prior knowledge or warning. For example:
+
+`The team was briefed on the emergency procedures.` - This means the team was given instructions about what to do in an emergency.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.82,
+      "finishTimestamp": 39
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.62,
+      "dialogue": {
+        "text": "They've been briefed and are prepared",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.62,
+      "finishTime": 5.18,
+      "dialogue": {
+        "text": "to manage any unexpected situations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
new file mode 100644
index 0000000000..c76e177c69
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506acdf255ff94e0ba712e.md
@@ -0,0 +1,111 @@
+---
+id: 67506acdf255ff94e0ba712e
+title: Task 29
+challengeType: 19
+dashedName: task-29
+---
+
+<!-- (Audio) Jake: They've been briefed and are prepared to manage any unexpected situations. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Jake instruct them about?
+
+## --answers--
+
+Completing a scheduled task.
+
+### --feedback--
+
+Think about whether Jake's statement focuses on planned tasks or unplanned situations.
+
+---
+
+Managing unexpected situations.
+
+---
+
+Avoiding all potential issues.
+
+### --feedback--
+
+Consider if Jake mentioned avoiding issues or handling them when they arise.
+
+---
+
+Reporting to him immediately.
+
+### --feedback--
+
+Jake's statement does not mention reporting back. Focus on what they are prepared to do.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, listen for the key phrase in Jake's statement: `prepared to manage any unexpected situations`. This shows that the team was briefed to handle unplanned or surprising events.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.82,
+      "finishTimestamp": 39
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.62,
+      "dialogue": {
+        "text": "They've been briefed and are prepared",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.62,
+      "finishTime": 5.18,
+      "dialogue": {
+        "text": "to manage any unexpected situations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
new file mode 100644
index 0000000000..495a696be3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506bd2d567359bac72f760.md
@@ -0,0 +1,90 @@
+---
+id: 67506bd2d567359bac72f760
+title: Task 30
+challengeType: 22
+dashedName: task-30
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Great, and when does the team BLANK the final BLANK?`
+
+## --blanks--
+
+`perform`
+
+### --feedback--
+
+This word means to carry out or execute a task or action.
+
+---
+
+`checks`
+
+### --feedback--
+
+This word refers to examinations or inspections to ensure something is correct or in good condition.
+
+# --explanation--
+
+`Perform` means to carry out or execute a specific task.
+
+`Checks` refers to inspections or evaluations made to ensure that everything is functioning correctly or meeting a standard. For example:
+
+`The team performed the tests before deployment.` - This means they executed tests as part of their tasks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
new file mode 100644
index 0000000000..7ac2e03436
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506c7db9d148a0308107d8.md
@@ -0,0 +1,88 @@
+---
+id: 67506c7db9d148a0308107d8
+title: Task 31
+challengeType: 19
+dashedName: task-31
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Maria wants to perform the final checks with the team.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Think about whether Maria mentions her involvement in performing the checks or if she is just asking about the team's task.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria is asking about the timing of the team's task, not expressing a desire to join them in performing the checks.
+
+The phrase `when does the team perform` indicates she is inquiring rather than volunteering or participating.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
new file mode 100644
index 0000000000..62976e0eb0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506d2c92a80fa4b7a912a7.md
@@ -0,0 +1,104 @@
+---
+id: 67506d2c92a80fa4b7a912a7
+title: Task 32
+challengeType: 19
+dashedName: task-32
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+Who performs the final checks.
+
+### --feedback--
+
+Maria's question is about timing, not about identifying who performs the checks.
+
+---
+
+When the final checks will happen.
+
+---
+
+Why the final checks are performed.
+
+### --feedback--
+
+Maria is asking about the timing, not the reason for the checks.
+
+---
+
+What the final checks include.
+
+### --feedback--
+
+Maria does not ask about the details of the checks, but when they happen.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Listening for key question words like `when` can help identify her intent.
+
+`When` indicates that her question is focused on the timing of the task, not who performs it, why they are performed, or what they include.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
new file mode 100644
index 0000000000..43f7869327
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e16a9e0bdaad7267c35.md
@@ -0,0 +1,98 @@
+---
+id: 67506e16a9e0bdaad7267c35
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- (Audio) Maria: Great, and when does the team perform the final checks? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What would be the best answer to Maria's question?
+
+## --answers--
+
+`The final system checks are set for Friday night`.
+
+---
+
+`The final system checks were completed yesterday.`
+
+### --feedback--
+
+This refers to the past, but Maria is asking about a future event. Focus on the tense in her question.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`And when does the team perform the final checks?`, uses the `Present Simple` tense (`does perform`) to ask about a scheduled future event.
+
+The correct answer, `The final system checks are set for Friday night`, also uses the `Present Simple` to describe a fixed plan.
+
+`Present Simple` is often used for future events that are part of a schedule or timetable. For example:
+
+- `The train departs at 8 PM tonight.` - This indicates a scheduled departure.
+
+- `Our meeting starts tomorrow morning.` - This shows a planned time for a future event.
+
+In this context, the `Present Simple` makes the answer concise and appropriate for discussing a fixed event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.5,
+      "finishTimestamp": 41.74
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.24,
+      "dialogue": {
+        "text": "Great. And when does the team perform the final checks?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
new file mode 100644
index 0000000000..e61c688f45
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506e940e1d20ae6f0fc7e2.md
@@ -0,0 +1,88 @@
+---
+id: 67506e940e1d20ae6f0fc7e2
+title: Task 34
+challengeType: 22
+dashedName: task-34
+---
+
+<!-- (Audio) Jake: The final system checks are set for Friday night. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The final system checks are BLANK BLANK Friday night.`
+
+## --blanks--
+
+`set`
+
+### --feedback--
+
+This word means arranged or scheduled to happen at a specific time.
+
+---
+
+`for`
+
+### --feedback--
+
+This preposition indicates the purpose or time of an event.
+
+# --explanation--
+
+`Set` means that something is arranged, planned, or scheduled for a specific time or purpose. The preposition `for` is used to indicate the time or purpose of the planned event. For example:
+
+`The meeting is set for 3 PM tomorrow.` - This means the meeting is scheduled to take place at that time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.12,
+      "finishTimestamp": 44.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "The final system checks are set for Friday night.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
new file mode 100644
index 0000000000..fdfb7d5cd0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67506f57df7629b3d8d90f11.md
@@ -0,0 +1,102 @@
+---
+id: 67506f57df7629b3d8d90f11
+title: Task 35
+challengeType: 19
+dashedName: task-35
+---
+
+<!-- (Audio) Jake: The final system checks are set for Friday night. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When will the final checks happen?
+
+## --answers--
+
+Tomorrow morning.
+
+### --feedback--
+
+Focus on the last two words in Jack's statement.
+
+---
+
+Next Monday.
+
+### --feedback--
+
+Pay attention to the timing in his statement.
+
+---
+
+Last Friday.
+
+### --feedback--
+
+The checks are set for a future time, not a past date.
+
+---
+
+Friday night.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jake says, `The final system checks are set for Friday night`. The phrase `are set for` indicates a future event, and `Friday night` specifies the exact time. To answer correctly, focus on the timing mentioned in the statement and note that it refers to a planned, scheduled future event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.12,
+      "finishTimestamp": 44.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.66,
+      "dialogue": {
+        "text": "The final system checks are set for Friday night.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.16
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
new file mode 100644
index 0000000000..40612d4212
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070049d1f9fb8c1bced11.md
@@ -0,0 +1,89 @@
+---
+id: 675070049d1f9fb8c1bced11
+title: Task 36
+challengeType: 22
+dashedName: task-36
+---
+
+<!-- (Audio) We'll confirm that all security patches are ready to be deployed without any complications. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll confirm that all security BLANK are ready to be deployed without any complications.`
+
+## --blanks--
+
+`patches`
+
+### --feedback--
+
+This word refers to updates or fixes for software or systems.
+
+# --explanation--
+
+`Patches` refers to updates or fixes that address issues in software or systems. For example:
+
+`The patches are ready to be installed.` - This means the fixes are prepared for installation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.1,
+      "finishTimestamp": 50.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll confirm that all security patches",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3,
+      "finishTime": 6.28,
+      "dialogue": {
+        "text": "are ready to be deployed without any complications.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
new file mode 100644
index 0000000000..541459e2df
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675070d075960bbe3f92eca6.md
@@ -0,0 +1,99 @@
+---
+id: 675070d075960bbe3f92eca6
+title: Task 37
+challengeType: 19
+dashedName: task-37
+---
+
+<!-- (Audio) We'll confirm that all security patches are ready to be deployed without any complications. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: The security patches are ready to be deployed.
+
+## --answers--
+
+True
+
+### --feedback--
+
+`We'll` shows this is a future action not something already completed.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The contraction `We'll` stands for `We will,` indicating a future action or plan. For example:
+
+- `I'll call you tomorrow.` - This means the action of calling will happen in the future.
+
+- `We'll review the report later.` - This indicates that the review is planned but has not yet occurred.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.1,
+      "finishTimestamp": 50.38
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll confirm that all security patches",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3,
+      "finishTime": 6.28,
+      "dialogue": {
+        "text": "are ready to be deployed without any complications.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
new file mode 100644
index 0000000000..af84cac2e1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675074863d75f1d559b039df.md
@@ -0,0 +1,108 @@
+---
+id: 675074863d75f1d559b039df
+title: Task 38
+challengeType: 22
+dashedName: task-38
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Perfect. And the training session for the new BLANK BLANK, when is that planned?`
+
+## --blanks--
+
+`security`
+
+### --feedback--
+
+This word refers to measures or systems designed to protect something, such as data or systems.
+
+---
+
+`protocols`
+
+### --feedback--
+
+This word means a set of rules or procedures to follow in specific situations.
+
+# --explanation--
+
+`Security` refers to systems or actions used to protect important resources, like data or networks.
+
+`Protocols` means a set of rules or procedures that explain how to do something correctly. For example:
+
+`We followed the security protocols during the test.` - This means they followed the safety rules step by step.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
new file mode 100644
index 0000000000..9277b259ca
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750758f8581d3dcfeb1c386.md
@@ -0,0 +1,124 @@
+---
+id: 6750758f8581d3dcfeb1c386
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria think about the training session?
+
+## --answers--
+
+It has not been scheduled yet.
+
+### --feedback--
+
+Focus on the tense she uses.
+
+---
+
+It will be scheduled later.
+
+### --feedback--
+
+Pay attention to her use of the `Present Simple` tense.
+
+---
+
+It is already scheduled.
+
+---
+
+It does not need to be scheduled.
+
+### --feedback--
+
+Consider her use of the phrase `is planned`.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Maria asks, `when is that planned?` The verb `is` in the `Present Simple` shows she believes the training session is already scheduled. The `Present Simple` is often used for fixed future plans, like schedules or timetables. For example:
+
+- `The train departs at 6 PM.` - This shows a planned future event using the `Present Simple`.
+
+- `What time does the concert start?` - This assumes the concert has a fixed start time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
new file mode 100644
index 0000000000..7835648ded
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750775f2b0832e88216e98c.md
@@ -0,0 +1,110 @@
+---
+id: 6750775f2b0832e88216e98c
+title: Task 40
+challengeType: 19
+dashedName: task-40
+---
+
+<!-- (Audio) Maria: Perfect. And the training session for the new security protocols, when is that planned? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's the best answer to Maria's question?
+
+## --answers--
+
+`The training is planned for Thursday afternoon.`
+
+---
+
+`The training will be planned for Thursday afternoon.`
+
+### --feedback--
+
+This uses the `Future Simple` tense, which suggests the plan has not been made yet. Maria's question assumes the training is already scheduled.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Maria's question, `when is that planned?`, uses the `Present Simple` tense (`is planned`) to ask about a fixed future event.
+
+The `Present Simple` is commonly used for schedules, timetables, or planned events because it gives a sense of certainty. For example:
+
+`The bus leaves at 9 AM tomorrow.` - This shows a fixed schedule.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.46,
+      "finishTimestamp": 54.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.38,
+      "dialogue": {
+        "text": "Perfect.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.78,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "And the training session for the new security protocols,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 4.12,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "when is that planned?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
new file mode 100644
index 0000000000..8d35fa0a07
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6750784c1399a9ef62b27e9e.md
@@ -0,0 +1,90 @@
+---
+id: 6750784c1399a9ef62b27e9e
+title: Task 41
+challengeType: 22
+dashedName: task-41
+---
+
+<!-- (Audio) Jake: The training is planned for Thursday afternoon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The training BLANK BLANK for Thursday afternoon.`
+
+## --blanks--
+
+`is`
+
+### --feedback--
+
+This word is a form of the verb `to be` and is part of the `Present Simple` tense.
+
+---
+
+`planned`
+
+### --feedback--
+
+This word means arranged or scheduled for a specific time.
+
+# --explanation--
+
+The sentence `The training is planned for Thursday afternoon` uses the `Present Simple` tense.
+
+This tense is often used to describe fixed future events, like schedules or timetables, because it expresses certainty. For example:
+
+`The meeting starts at 10 AM tomorrow.` - This means the meeting is already scheduled for a specific time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.42,
+      "finishTimestamp": 56.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "The training is planned for Thursday afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
new file mode 100644
index 0000000000..b8c04b9747
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507a47729d85fb7c88ee06.md
@@ -0,0 +1,88 @@
+---
+id: 67507a47729d85fb7c88ee06
+title: Task 42
+challengeType: 19
+dashedName: task-42
+---
+
+<!-- (Audio) Jake: The training is planned for Thursday afternoon. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: The training happened last Thursday afternoon.
+
+## --answers--
+
+True
+
+### --feedback--
+
+The phrase `is planned` shows that the training is scheduled for the future, not something that has already happened.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Is planned` uses the `Present Simple` tense to describe a future event that is already scheduled. It indicates certainty about when the training will happen, not that it has already occurred. For example:
+
+`The meeting is planned for next Monday.` - This shows that the meeting is scheduled for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.42,
+      "finishTimestamp": 56.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "The training is planned for Thursday afternoon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
new file mode 100644
index 0000000000..5f0989e378
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507adbc31ab8ffa2dc5243.md
@@ -0,0 +1,111 @@
+---
+id: 67507adbc31ab8ffa2dc5243
+title: Task 43
+challengeType: 22
+dashedName: task-43
+---
+
+<!-- (Audio) Jake: Every team member must understand the changes and how these will impact our operations. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Every team member must BLANK BLANK BLANK and how these will impact our operations.`
+
+## --blanks--
+
+`understand`
+
+### --feedback--
+
+This word means to know the meaning of something.
+
+---
+
+`the`
+
+### --feedback--
+
+This is a definite article used to specify something particular.
+
+---
+
+`changes`
+
+### --feedback--
+
+This word refers to modifications or adjustments that are made.
+
+# --explanation--
+
+`Understand` means to know the meaning of something.
+
+`The` is a definite article used to refer to specific things or ideas.
+
+`Changes` refers to modifications or adjustments that affect a situation. For example:
+
+- `It is important to understand the updates before implementing them.` - This means comprehending the details of updates before action.
+
+- `We need to explain the changes to the team.` - This refers to communicating the specific adjustments or modifications.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 57.24,
+      "finishTimestamp": 62.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.54,
+      "dialogue": {
+        "text": "Every team member must understand the changes",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 5.82,
+      "dialogue": {
+        "text": "and how these will impact our operations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
new file mode 100644
index 0000000000..08c71648ba
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67507f042946421936eb425a.md
@@ -0,0 +1,117 @@
+---
+id: 67507f042946421936eb425a
+title: Task 44
+challengeType: 19
+dashedName: task-44
+---
+
+<!-- (Audio) Jake: Every team member must understand the changes and how these will impact our operations. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake's main concern in this statement?
+
+## --answers--
+
+The team has to finish the changes quickly.
+
+### --feedback--
+
+Jake does not mention speed or urgency.
+
+---
+
+The team understands the changes.
+
+---
+
+The team avoids changes.
+
+### --feedback--
+
+Jake is not concerned about avoiding changes.
+
+---
+
+Assigning tasks to the team.
+
+### --feedback--
+
+Jake's statement is not about assigning tasks to individuals.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake says, `Every team member must understand the changes and how these will impact our operations.`
+
+His main concern is ensuring that all team members fully understand the changes and their effect on operations.
+
+The word `must` highlights the importance of this understanding. For example:
+
+`The team must understand the updates before implementation.` - This shows the focus on comprehension as a priority.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-boardroom.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 57.24,
+      "finishTimestamp": 62.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.54,
+      "dialogue": {
+        "text": "Every team member must understand the changes",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 5.82,
+      "dialogue": {
+        "text": "and how these will impact our operations.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
new file mode 100644
index 0000000000..667e794c00
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67508b92b31af876eed82c66.md
@@ -0,0 +1,96 @@
+---
+id: 67508b92b31af876eed82c66
+title: Task 45
+challengeType: 22
+dashedName: task-45
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`Will`, `is scheduled`, `will be`, `are set`, `is`, `We'll`, and `will impact`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: Maria, the next system update BLANK for this Saturday at 2 AM. It's crucial to enhance our firewall settings to prevent any potential DoS attacks.`
+
+`Maria: Yes, Jake, I've reviewed the timetable. The server downtime starts exactly when the user traffic is at its lowest, correct?`
+
+`Jake: That's right. The update should last about two hours. Our main goal is to minimize disruption while strengthening our defenses.`
+
+`Maria: BLANK the support team be on call during the update? We need to make sure they're ready to handle any immediate issues that come up.`
+
+`Jake: Absolutely, the entire technical support team BLANK on duty. They've been briefed and are prepared to manage any unexpected situations.`
+
+`Maria: Great, and when does the team perform the final checks?`
+
+`Jake: The final system checks BLANK for Friday night. BLANK confirm that all security patches are ready to be deployed without any complications.`
+
+`Maria: Perfect. And the training session for the new security protocols, when BLANK that planned?`
+
+`Jake: The training is planned for Thursday afternoon. Every team member must understand the changes and how these BLANK our operations.`
+
+## --blanks--
+
+`is scheduled`
+
+### --feedback--
+
+These two words together are the `Present Simple` tense to describe a planned future event.
+
+---
+
+`Will`
+
+### --feedback--
+
+This word indicates the `Future Simple` tense and is used for asking about future actions. It is capitalized.
+
+---
+
+`will be`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense to describe a planned future action.
+
+---
+
+`are set`
+
+### --feedback--
+
+These two words together are used to talk about a future event that has been scheduled.
+
+---
+
+`We'll`
+
+### --feedback--
+
+Contraction that shows a future action or plan. The first letter is capitalized.
+
+---
+
+`is`
+
+### --feedback--
+
+This is the verb `to be` conjugated.
+
+---
+
+`will impact`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense to describe an action that will affect something in the future.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
new file mode 100644
index 0000000000..848b065854
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752100607e30e31bd85af76.md
@@ -0,0 +1,70 @@
+---
+id: 6752100607e30e31bd85af76
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. Please ensure all tasks are completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+When does the system downtime start?
+
+## --answers--
+
+`Friday night`
+
+### --feedback--
+
+This is when the final checks are set, not the downtime.
+
+---
+
+`Thursday afternoon`
+
+### --feedback--
+
+This refers to the training session, not the downtime.
+
+---
+
+`Friday at 2 AM`
+
+### --feedback--
+
+The downtime doesn't start on Friday.
+
+---
+
+`Saturday at 2 AM.`
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find out when the system downtime starts, focus on the part of the message where Jake talks about the timeline.
+
+Look for the phrase `The system update is scheduled to...` to find the correct answer.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
new file mode 100644
index 0000000000..1e959b134d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752133caed6e849142fcc19.md
@@ -0,0 +1,70 @@
+---
+id: 6752133caed6e849142fcc19
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+When do the final system checks take place?
+
+## --answers--
+
+Thursday afternoon.
+
+### --feedback--
+
+This is when the training session is planned, not the final system checks.
+
+---
+
+Friday evening.
+
+---
+
+Saturday at 2 AM.
+
+### --feedback--
+
+This is when the system update starts, not the final system checks.
+
+---
+
+Friday afternoon.
+
+### --feedback--
+
+This is when the security patches are ready to be deployed, not when the final system checks occur.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out when the final system checks take place, focus on the part of the message that lists the schedule.
+
+Look for the phrase `The final system checks are...` to find the correct time.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
new file mode 100644
index 0000000000..14b19a86ed
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6752136c94c79a4ad803f0cf.md
@@ -0,0 +1,70 @@
+---
+id: 6752136c94c79a4ad803f0cf
+title: Task 48
+challengeType: 19
+dashedName: task-48
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+Why are the firewall settings enhanced by Friday?
+
+## --answers--
+
+To prevent potential DoS attacks.
+
+---
+
+To minimize disruption during the downtime.
+
+### --feedback--
+
+While minimizing disruption is mentioned elsewhere, it is not the reason given for enhancing firewall settings.
+
+---
+
+To ensure the system update happens on time.
+
+### --feedback--
+
+The system update happens on Saturday, but this task is unrelated to the timing of the update.
+
+---
+
+To manage immediate issues during the update.
+
+### --feedback--
+
+Managing immediate issues is the responsibility of the support team, not the firewall settings.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find out why the firewall settings are enhanced, focus on the sentence `Firewall settings are enhanced by Friday to prevent potential DoS attacks.`
+
+The text explicitly states this purpose, emphasizing the importance of preparing for potential cyber threats.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
new file mode 100644
index 0000000000..81a8ef7646
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213a1aa7da34c876d94e9.md
@@ -0,0 +1,72 @@
+---
+id: 675213a1aa7da34c876d94e9
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+What happens if the final system checks are not completed by Friday?
+
+## --answers--
+
+The server downtime will last longer.
+
+### --feedback--
+
+The server downtime is scheduled to last two hours and is not directly impacted by the final checks.
+
+---
+
+The training session will be rescheduled.
+
+### --feedback--
+
+The training session takes place on Thursday, unrelated to the timing of the final checks.
+
+---
+
+The system update might be delayed.
+
+---
+
+Immediate issues won't be resolved.
+
+### --feedback--
+
+Immediate issues are handled by the support team during the update, not by the final system checks.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To understand what might happen if the final system checks are not completed, consider their role in preparing for the update.
+
+Final checks ensure readiness for the system update, so their delay could lead to postponing the update.
+
+Look for the phrase `The final system checks are set` to confirm this connection.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
new file mode 100644
index 0000000000..fefadfc1ec
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675213f5a47d9e4ef23d9050.md
@@ -0,0 +1,72 @@
+---
+id: 675213f5a47d9e4ef23d9050
+title: Task 50
+challengeType: 19
+dashedName: task-50
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message Jake sent to his team:
+
+`Hi Team,`
+
+`Here is the checklist for the upcoming system update. All tasks must be completed on time:`
+
+`- Thursday afternoon: The training session for the new security protocols is planned.`  
+`- Friday afternoon: All security patches are ready to be deployed.`  
+`- Friday evening: The final system checks are set.`  
+`- Saturday at 2 AM: The system update is scheduled to start, with server downtime lasting two hours.`  
+`- During the update: The support team is on call to manage any immediate issues.`
+
+`Firewall settings are enhanced by Friday to prevent potential DoS attacks. Let me know if there are any questions!`
+
+Which event happens first?
+
+## --answers--
+
+The final system checks are set.
+
+### --feedback--
+
+The final checks happen after the training session on Thursday and after security patches on Friday.
+
+---
+
+The security patches are ready to be deployed.
+
+### --feedback--
+
+The security patches are scheduled for Friday, but the training session happens earlier.
+
+---
+
+The training session is planned.
+
+---
+
+The system update starts.
+
+### --feedback--
+
+The system update happens last, on Saturday at 2 AM, after all other events are completed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To identify which event happens first, look at the timeline in the message.
+
+The training session is scheduled for Thursday afternoon, making it the first event before the other tasks.
+
+Look for the phrase `Thursday afternoon: The training session ... is planned` to confirm.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
new file mode 100644
index 0000000000..724ededb89
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531709d628ef047202e6ae.md
@@ -0,0 +1,196 @@
+---
+id: 67531709d628ef047202e6ae
+title: "Dialogue 2: Responding to Phishing Threats"
+challengeType: 21
+dashedName: dialogue-2-responding-to-phishing-threats
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video..
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Sarah",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-2.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Sarah",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 4.56,
+     "dialogue": {
+       "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 4.96,
+     "finishTime": 8.52,
+     "dialogue": {
+       "text": "It looks like someone will need to notify the team and take immediate action.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 8.94,
+     "finishTime": 11.12,
+     "dialogue": {
+       "text": "Oh, no. Do you know where it originated from?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 11.38,
+     "finishTime": 13.86,
+     "dialogue": {
+       "text": "Not yet, but I think it came from an email link.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 14.1,
+     "finishTime": 18.02,
+     "dialogue": {
+       "text": "We need to investigate quickly. I'll send out a warning to everyone right away.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 18.42,
+     "finishTime": 21.48,
+     "dialogue": {
+       "text": "That sounds like a good plan. Do you think it will affect our project deadlines?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 21.88,
+     "finishTime": 25.16,
+     "dialogue": {
+       "text": "It might. I hope it won't, but we should prepare for delays.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 25.54,
+     "finishTime": 27.98,
+     "dialogue": {
+       "text": "I'll update the project manager about the situation.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 27.98,
+     "finishTime": 31.62,
+     "dialogue": {
+       "text": "I'll alert the development team and tell them to check their emails carefully.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 31.98,
+     "finishTime": 33.16,
+     "dialogue": {
+       "text": "Is there anything else we should do?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 33.46,
+     "finishTime": 37.6,
+     "dialogue": {
+       "text": "We'll probably need to run a full system scan to ensure that there's no hidden malware.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 37.96,
+     "finishTime": 40.6,
+     "dialogue": {
+       "text": "Can you coordinate with the IT support team for that?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 41,
+     "finishTime": 44.92,
+     "dialogue": {
+       "text": "Yes, I'll contact them now. How do you think our clients will react to this news?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 45.6,
+     "finishTime": 51.98,
+     "dialogue": {
+       "text": "They'll likely be concerned, but I'll reassure them that we're taking all necessary steps to secure our systems.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Sarah",
+     "startTime": 52.5,
+     "finishTime": 56.92,
+     "dialogue": {
+       "text": "Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Sarah",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.52
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 57.92
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
new file mode 100644
index 0000000000..4dae0411e6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675318543812fa0f15f42c10.md
@@ -0,0 +1,95 @@
+---
+id: 675318543812fa0f15f42c10
+title: Task 51
+challengeType: 22
+dashedName: task-51
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sarah, I just found out that we've had a BLANK BLANK on our system.`
+
+## --blanks--
+
+`phishing`
+
+### --feedback--
+
+This word refers to a type of online scam where someone tries to steal personal information.
+
+---
+
+`attack`
+
+### --feedback--
+
+This word means an attempt to harm something, usually intentionally. This word has double `t`.
+
+# --explanation--
+
+`Phishing` is a method used by scammers to trick people into sharing personal information like passwords or credit card details, usually through fake emails or websites. For example:
+
+`The phishing email looked like it came from our bank.` - This means the email was fake but designed to steal personal information.
+
+`Attack` means an act of trying to harm or damage something. It can be physical, verbal, or in cybersecurity. For example:
+
+- `The attack on the server caused it to shut down.` - This means an intentional act damaged the server.
+
+- `She defended herself during the verbal attack.` - This means someone said harmful things to her.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
new file mode 100644
index 0000000000..c1440df4fb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ca2cb308e28acf3bdc1.md
@@ -0,0 +1,104 @@
+---
+id: 67531ca2cb308e28acf3bdc1
+title: Task 52
+challengeType: 19
+dashedName: task-52
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake reporting to Sarah?
+
+## --answers--
+
+Jake was attacked by a fish.
+
+### --feedback--
+
+Jake mentioned `phishing`, which refers to an online scam, not anything related to fish.
+
+---
+
+There was a phishing attack on their system.
+
+---
+
+Jake uploaded something new to the system.
+
+### --feedback--
+
+Jake is talking about a problem with the system, not adding or uploading anything.
+
+---
+
+The system was updated successfully.
+
+### --feedback--
+
+Jake is reporting a problem, not describing a successful update.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Phishing` refers to a type of online scam where someone tries to steal personal information, like passwords or credit card details. It is not related to `fishing`, even though they sound similar.
+
+Try to listen to the words `phishing attack` in Jake's statement. They make it clear that this is about a harmful event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
new file mode 100644
index 0000000000..2d5051caed
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531f0c699943385e41734c.md
@@ -0,0 +1,90 @@
+---
+id: 67531f0c699943385e41734c
+title: Task 53
+challengeType: 19
+dashedName: task-53
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Jake just found out about the phishing attack.
+
+## --answers--
+
+True
+
+---
+
+False
+
+### --feedback--
+
+`Just found out` means Jake learned about something for the first time, so he didn't know about it before.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Found out` means to discover or learn something new, usually for the first time. For example:
+
+`I just found out about the meeting yesterday.` - This means I learned about the meeting for the first time yesterday.
+
+Try to listen to the phrase `just found out` in the audio. In this context, Jake is saying he just discovered that there was a phishing attack. This shows he didn't know about it before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.56
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
new file mode 100644
index 0000000000..530c0682b3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67531ff45ade873e5ff17211.md
@@ -0,0 +1,90 @@
+---
+id: 67531ff45ade873e5ff17211
+title: Task 55
+challengeType: 19
+dashedName: task-55
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+True or False: Jake is not worried about the phishing attack.
+
+## --answers--
+
+True
+
+### --feedback--
+
+Jake mentions taking `immediate action`, which shows urgency and concern about the situation.
+
+---
+
+False
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Immediate action` means doing something without delay because it is urgent. For example:
+
+`We need to take immediate action to stop the leak.` - This shows the situation is urgent, and action must be taken quickly.
+
+In this context, Jake says `immediate action`, which indicates he is worried and believes the phishing attack is a serious issue that requires quick response. The words `notify the team` also show he is treating the matter with importance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
new file mode 100644
index 0000000000..6dd4e54d85
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532227a04e5e4cd4ccf987.md
@@ -0,0 +1,92 @@
+---
+id: 67532227a04e5e4cd4ccf987
+title: Task 54
+challengeType: 22
+dashedName: task-54
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It looks like someone BLANK BLANK to notify the team and take immediate action.`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This word is a modal verb used to express a decision made at the moment of speaking.
+
+---
+
+`need`
+
+### --feedback--
+
+This word shows that something is necessary or required.
+
+# --explanation--
+
+`Will` is used to express a decision made at the moment of speaking, often when someone reacts to a situation. It is a way to show spontaneity or immediate response. For example:
+
+`I will call the manager right away.` - This shows a decision made at the moment in response to a need.
+
+`Need` means something is required or necessary. For example:
+
+`We need more time to finish the project.` - This shows something essential to complete the task.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
new file mode 100644
index 0000000000..3f08bb2acc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675323b130ad71572ef10510.md
@@ -0,0 +1,104 @@
+---
+id: 675323b130ad71572ef10510
+title: Task 56
+challengeType: 19
+dashedName: task-56
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Who will need to take immediate action?
+
+## --answers--
+
+Jake
+
+### --feedback--
+
+Jake does not say that he will be the one taking action in this context.
+
+---
+
+Sarah
+
+### --feedback--
+
+Jake does not mention Sarah needing to take immediate action in this context.
+
+---
+
+Someone
+
+---
+
+The entire team
+
+### --feedback--
+
+The audio does not mention the entire team needing to act.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In the audio, Jake uses the word `someone`, which means he is not specifying a particular person who needs to act. The word `someone` helps identify that the responsibility is not assigned to Jake, Sarah, or the entire team.
+
+Listen for the phrase `someone will need to notify`. This is a key part of the sentence that points out the correct answer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
new file mode 100644
index 0000000000..8ce96c60ad
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532445152d375af93d4d19.md
@@ -0,0 +1,104 @@
+---
+id: 67532445152d375af93d4d19
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (Audio) Jake: It looks like someone will need to notify the team and take immediate action. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What should be done?
+
+## --answers--
+
+Notify the team and take immediate action.
+
+---
+
+Notify the team later.
+
+### --feedback--
+
+Jake uses the phrase `immediate action`, which shows urgency, not something that can be delayed.
+
+---
+
+Take immediate action without telling anyone.
+
+### --feedback--
+
+Jake mentions `notify the team`, which means informing others is part of what needs to be done.
+
+---
+
+Ignore the issue for now.
+
+### --feedback--
+
+Jake clearly says `immediate action`, which means the situation requires attention right away.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Listen for the words `notify the team` and `immediate action`. These are key parts of the sentence and point directly to the correct answer.
+
+In the audio, Jake says `notify the team and take immediate action`. These two actions are clearly mentioned together as what needs to be done.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.56,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
new file mode 100644
index 0000000000..f9a241f43e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675325cfea799165252500d4.md
@@ -0,0 +1,100 @@
+---
+id: 675325cfea799165252500d4
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+<!-- (Audio) Jake: Sarah, I just found out that we've had a phishing attack on our system. It looks like someone will need to notify the team and take immediate action. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to ask Jake more about the problem?
+
+## --answers--
+
+`Oh no! What is the team going to do?`
+
+### --feedback--
+
+This question focuses on the team's response, not the details of the phishing attack itself.
+
+---
+
+`Oh no! Do you know where it originated from?`
+
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The correct option is `Oh no! Do you know where it originated from?` because it asks for specific details about the phishing attack.
+
+The phrase `where it originated from` refers to the source or starting point of the phishing attack.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 7.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.56,
+      "dialogue": {
+        "text": "Sarah, I just found out that we've had a phishing attack on our system.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 4.96,
+      "finishTime": 8.52,
+      "dialogue": {
+        "text": "It looks like someone will need to notify the team and take immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 9.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
new file mode 100644
index 0000000000..a488b8c515
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675326de48b3e36c45ba1328.md
@@ -0,0 +1,78 @@
+---
+id: 675326de48b3e36c45ba1328
+title: Task 59
+challengeType: 22
+dashedName: task-59
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Oh no! Do you know where BLANK originated from?`
+
+## --blanks--
+
+`it`
+
+### --feedback--
+
+This pronoun is used to refer to something already mentioned, like the phishing attack.
+
+# --explanation--
+
+`It` is a pronoun used to refer to something already mentioned, so you don't have to repeat the same noun. In this context, `it` refers to the phishing attack mentioned earlier.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
new file mode 100644
index 0000000000..9af2a3bb83
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675327d73a38d5731235d764.md
@@ -0,0 +1,104 @@
+---
+id: 675327d73a38d5731235d764
+title: Task 60
+challengeType: 19
+dashedName: task-60
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to know?
+
+## --answers--
+
+Who will notify the team.
+
+### --feedback--
+
+Sarah is not asking about who will notify the team.
+
+---
+
+How serious the phishing attack is.
+
+### --feedback--
+
+Sarah is not asking about how serious the attack is.
+
+---
+
+If the system is safe now.
+
+### --feedback--
+
+Sarah is not asking about whether the system is safe now.
+
+---
+
+The source of the phishing attack.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Pay attention to `where it originated from`. It shows she is asking about the source or starting point of the phishing attack.
+
+In the audio, Sarah uses the pronoun `it` to refer to the phishing attack, showing she is asking about where it started.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
new file mode 100644
index 0000000000..daeb65589f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675329bc0e2bfa7f1c4f7411.md
@@ -0,0 +1,90 @@
+---
+id: 675329bc0e2bfa7f1c4f7411
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to Sarah's question?
+
+## --answers--
+
+`This is terrible! The system is currently down.`
+
+### --feedback--
+
+This focuses on the state of the system, not the origin of the phishing attack.
+
+---
+
+`Not yet, but I think it came from an email link.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Pay attention to the words `where it originated from` in Sarah's question. They indicate she is asking about the source of the issue.
+
+The correct answer is `Not yet, but I think it came from an email link`. It directly addresses Sarah's question by discussing the origin of the phishing attack.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 10.12
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
new file mode 100644
index 0000000000..7f0576a046
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532ac8b110a08666ee5f18.md
@@ -0,0 +1,90 @@
+---
+id: 67532ac8b110a08666ee5f18
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (Audio) Jake: Not yet, but I think it came from an email link. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Not yet, but I think it BLANK BLANK an email link.`
+
+## --blanks--
+
+`came`
+
+### --feedback--
+
+This word means to move or happen from one place or source to another. It is the past tense of `come`.
+
+---
+
+`from`
+
+### --feedback--
+
+This word shows the starting point or source of something.
+
+# --explanation--
+
+`Came from` is used to describe the source or starting point of something. For example:
+
+- `The idea came from a brainstorming session.` - This means the brainstorming session was the source of the idea.
+
+- `She said the problem came from a mistake in the code.` - This indicates the mistake in the code caused the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.38,
+      "finishTimestamp": 12.86
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
new file mode 100644
index 0000000000..1af4895b69
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532bbaa817558e7691df51.md
@@ -0,0 +1,82 @@
+---
+id: 67532bbaa817558e7691df51
+title: Task 63
+challengeType: 22
+dashedName: task-63
+---
+
+<!-- (Audio) Jake We need to investigate quickly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We need to investigate BLANK.`
+
+## --blanks--
+
+`quickly`
+
+### --feedback--
+
+This word means to do something fast or without delay.
+
+# --explanation--
+
+`Quickly` is an adverb that describes doing something in a fast or timely manner. In this context, it shows that the investigation must happen without delay. For example:
+
+- `He quickly responded to the email.` - This means he replied fast.
+
+- `We need to act quickly to prevent more damage.` - This shows urgency in taking action.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.1,
+      "finishTimestamp": 14.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.52,
+      "dialogue": {
+        "text": "We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
new file mode 100644
index 0000000000..0bf1ae83c5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67532c49e75faf929fd9378d.md
@@ -0,0 +1,84 @@
+---
+id: 67532c49e75faf929fd9378d
+title: Task 64
+challengeType: 22
+dashedName: task-64
+---
+
+<!-- (Audio) Jake: I'll send out a warning to everyone right away. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK send out a warning to everyone right away.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is the contraction for `I will`. The first letter is capitalized.
+
+# --explanation--
+
+`I'll` is the contraction for `I will`. It is commonly used to express decisions made at the moment of speaking or to indicate future actions. For example:
+
+- `I'll call the manager now.` - This shows a decision made at the moment of speaking.
+
+- `I'll help you with your project.` - This means offering help immediately after hearing about the need.
+
+The contraction makes the sentence shorter and more natural in spoken English.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.72,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.3,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
new file mode 100644
index 0000000000..70466b5892
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753314748a2feb09a3059b2.md
@@ -0,0 +1,139 @@
+---
+id: 6753314748a2feb09a3059b2
+title: Task 65
+challengeType: 19
+dashedName: task-65
+---
+
+<!-- (Audio) Sarah: Oh no! Do you know where it originated from? Jake: Not yet, but I think it came from an email link. We need to investigate quickly. I'll send out a warning to everyone right away. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What are the next steps?
+
+## --answers--
+
+Fix the issue and update the system.
+
+### --feedback--
+
+The audio does not mention fixing the issue or updating the system yet.
+
+---
+
+Find the source and contact IT support.
+
+### --feedback--
+
+The audio mentions investigating quickly, but it does not mention contacting IT support.
+
+---
+
+Wait for more information before taking action.
+
+### --feedback--
+
+The audio clearly states the need to act quickly and send out a warning, not to wait.
+
+---
+
+Investigate quickly and send out a warning.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the audio, Jake says, `We need to investigate quickly` and `I'll send out a warning to everyone right away.` These phrases indicate the immediate next steps.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.84,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Oh, no. Do you know where it originated from?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.41
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 3.41
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.54,
+      "finishTime": 7.68,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link. We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 7.88,
+      "finishTime": 10.18,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 10.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
new file mode 100644
index 0000000000..35e4cea5e6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67533335139a96bd1eb18395.md
@@ -0,0 +1,97 @@
+---
+id: 67533335139a96bd1eb18395
+title: Task 66
+challengeType: 19
+dashedName: task-66
+---
+
+<!-- Jake: Not yet, but I think it came from an email link. We need to investigate quickly. I'll send out a warning to everyone right away. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Sarah wants to **agree** with Jake. What should she say?
+
+## --answers--
+
+`I'm not sure about that approach. Can we wait before deciding?`
+
+### --feedback--
+
+This option disagrees with Jake, so it does not align with Sarah wanting to agree.
+
+---
+
+`That sounds like a good plan. Do you think it will affect our project deadlines?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The phrase `That sounds like a good plan` shows agreement with Jake's proposed actions. Sarah then adds a follow-up question about project deadlines, which continues the discussion.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.38,
+      "finishTimestamp": 17.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.14,
+      "dialogue": {
+        "text": "Not yet, but I think it came from an email link. We need to investigate quickly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.34,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "I'll send out a warning to everyone right away.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
new file mode 100644
index 0000000000..0d49d06f15
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6753357b948f6acb55e35e3b.md
@@ -0,0 +1,101 @@
+---
+id: 6753357b948f6acb55e35e3b
+title: Task 67
+challengeType: 22
+dashedName: task-67
+---
+
+<!-- (Audio) Sarah: That sounds like a good plan. Do you think it will affect our project deadlines? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That sounds like a good plan. Do you think it BLANK BLANK our project deadlines?`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This is a modal verb used to talk about something that might happen in the future.
+
+---
+
+`affect`
+
+### --feedback--
+
+This word means to cause a change or impact something.
+
+# --explanation--
+
+`Will` is a modal verb used to talk about future possibilities or decisions.
+
+`Affect` means to cause a change or impact. For example:
+
+- `Do you think the delay will affect the delivery time?` - This asks if the delay might change the delivery time.
+
+- `The new policy will affect how we work.` - This means the policy will have an impact on work processes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.22,
+      "finishTimestamp": 20.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.36,
+      "dialogue": {
+        "text": "That sounds like a good plan.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.54,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
new file mode 100644
index 0000000000..c506c55a13
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535bfb5c07ec6334ec8ea3.md
@@ -0,0 +1,108 @@
+---
+id: 67535bfb5c07ec6334ec8ea3
+title: Task 68
+challengeType: 19
+dashedName: task-68
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to know?
+
+## --answers--
+
+If they need to update the project plan.
+
+### --feedback--
+
+This option is about changing the plan, but Sarah is asking something different.
+
+---
+
+If the project can continue as planned.
+
+### --feedback--
+
+This option talks about the project's continuation, but Sarah's question is about something else.
+
+---
+
+If the attack will delay their deadlines.
+
+---
+
+If the team has already finished the project.
+
+### --feedback--
+
+This option refers to whether the project is complete, but Sarah is not asking about that.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Pay attention to the words `will affect` and `deadlines` in the audio. These are key to understanding the question.
+
+A `project deadline` is the final date by which a project must be completed.
+
+`Will affect` is used to ask if something will cause a change or impact. For example:
+
+`The new policy will affect the project deadline.` - This means the policy will change the timeline for the project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.66,
+      "finishTimestamp": 20.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.92,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
new file mode 100644
index 0000000000..1d27ab1602
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67535e02fd808570ca6cb599.md
@@ -0,0 +1,88 @@
+---
+id: 67535e02fd808570ca6cb599
+title: Task 69
+challengeType: 19
+dashedName: task-69
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Select the most adequate answer to Sarah's question.
+
+## --answers--
+
+`It might. I hope it won't.`
+
+---
+
+`I'm not sure. Let's ignore it for now.`
+
+### --feedback--
+
+This response suggests doing nothing, which is not appropriate for addressing Sarah's concern.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Pay attention to Sarah's question, especially `will affect our project deadlines.` She is asking about the possibility of delays and expects a thoughtful and realistic answer.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.66,
+      "finishTimestamp": 20.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.92,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.42
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
new file mode 100644
index 0000000000..8d38ff60ab
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675743f6f7016d1074a9bca1.md
@@ -0,0 +1,82 @@
+---
+id: 675743f6f7016d1074a9bca1
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- (Audio) Jake: It might. I hope it won't. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It might. I hope it BLANK.`
+
+## --blanks--
+
+`won't`
+
+### --feedback--
+
+This is the contraction for `will not`.
+
+# --explanation--
+
+`Won't` is the contraction for `will not`, which is used to make negative sentences about the future. For example:
+
+- `They won't finish the project on time if they don't start now.` - This predicts a negative outcome if action isn't taken.
+
+- `He won't attend the meeting because he is sick.` - This shows a future action that will not happen.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 22.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.8,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
new file mode 100644
index 0000000000..6628d1b37c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675746c2d3d2f222111918d4.md
@@ -0,0 +1,134 @@
+---
+id: 675746c2d3d2f222111918d4
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- (Audio) Sarah: Do you think it will affect our project deadlines? Jake: It might. I hope it won't. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jake feel about the deadlines?
+
+## --answers--
+
+He is sure they will be delayed and cannot be finished on time.
+
+### --feedback--
+
+Jake uses the word `might`, which shows he is uncertain, not certain about delays.
+
+---
+
+He thinks they might be affected but hopes they won't.
+
+---
+
+He doesn't care if the deadlines are affected or not.
+
+### --feedback--
+
+Jake expresses concern and hope in his response, which shows he does care about the deadlines.
+
+---
+
+He is confident the deadlines will be met without any delays.
+
+### --feedback--
+
+Jake's use of `might` and `I hope it won't` shows doubt, not confidence about meeting the deadlines.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake uses `might` to show uncertainty about the deadlines being affected. He also says, `I hope it won't`, which expresses hope that the deadlines remain unaffected. For example:
+
+- `The software update might cause some delays.` - This means it is possible, but not certain, that delays will happen.
+
+- `I hope the server won't go down during the deployment.` - This expresses a desire for the server to remain operational.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.76,
+      "finishTimestamp": 22.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Do you think it will affect our project deadlines?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 2.92
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 2.92
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.12,
+      "finishTime": 4.82,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
new file mode 100644
index 0000000000..ca4008841e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757488ee5dfb72d866a36df.md
@@ -0,0 +1,89 @@
+---
+id: 6757488ee5dfb72d866a36df
+title: Task 72
+challengeType: 22
+dashedName: task-72
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It might. I hope it won't, but we should prepare for BLANK.`
+
+## --blanks--
+
+`delays`
+
+### --feedback--
+
+This word means something happening later than expected. Remember, it is plural in this sentence.
+
+# --explanation--
+
+`Delays` are situations where something happens later than planned or expected. For example:
+
+`The software release faced delays due to testing issues.` - This means the release happened later than planned because of testing problems.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
new file mode 100644
index 0000000000..99e05c98fc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757498f826b0634696f224e.md
@@ -0,0 +1,111 @@
+---
+id: 6757498f826b0634696f224e
+title: Task 73
+challengeType: 22
+dashedName: task-73
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It BLANK. I hope it BLANK, but we BLANK prepare for delays.`
+
+## --blanks--
+
+`might`
+
+### --feedback--
+
+This modal verb shows possibility or uncertainty about the future.
+
+---
+
+`won't`
+
+### --feedback--
+
+This contraction is used to express a negative statement about the future.
+
+---
+
+`should`
+
+### --feedback--
+
+This modal verb is used to express a recommendation or advice for future actions.
+
+# --explanation--
+
+Jake uses `might`, `won't`, and `should` to express his thoughts about possibilities, plans, and actions in the future.
+
+`Might` shows possibility or uncertainty: Jake thinks there's a chance that delays could happen but isn't certain.
+
+`Won't` is the contraction for `will not`: Jake hopes delays will not happen, expressing his desire for a positive outcome.
+
+`Should` is used to make a recommendation: Jake suggests preparing for delays as a practical step, even though he hopes they won't happen.
+
+This combination shows how Jake is reflecting on the future: acknowledging uncertainty (`might`), expressing hope (`won't`), and making a plan to act (`should`).
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
new file mode 100644
index 0000000000..d51d0dee88
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574a712cb1143a3920f2a3.md
@@ -0,0 +1,113 @@
+---
+id: 67574a712cb1143a3920f2a3
+title: Task 74
+challengeType: 19
+dashedName: task-74
+---
+
+<!-- (Audio) Jake: It might. I hope it won't, but we should prepare for delays. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Jake's approach to the situation?
+
+## --answers--
+
+He is ignoring the delays.
+
+### --feedback--
+
+Jake says, `we should prepare for delays` so he is not ignoring them.
+
+---
+
+He is sure there will be no delays.
+
+### --feedback--
+
+Jake says, `It might` which shows he is not certain there will be no delays.
+
+---
+
+He wants to be ready for delays.
+
+---
+
+He thinks delays are already happening.
+
+### --feedback--
+
+Jake uses `might` which shows he is unsure if delays will happen.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Jake uses `might` to show he is uncertain about the delays but acknowledges the possibility. By saying, `we should prepare for delays`, he demonstrates proactive planning.
+
+This combination of modal verbs shows both reflection and preparation for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.78,
+      "finishTimestamp": 24.26
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.9,
+      "dialogue": {
+        "text": "It might. I hope it won't,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.0,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "but we should prepare for delays.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
new file mode 100644
index 0000000000..39e6aae186
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574bb2fe3c4c42bae7b6e5.md
@@ -0,0 +1,88 @@
+---
+id: 67574bb2fe3c4c42bae7b6e5
+title: Task 75
+challengeType: 22
+dashedName: task-75
+---
+
+<!-- (Audio) I'll update the project manager about the situation. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'll update the BLANK BLANK about the situation.`
+
+## --blanks--
+
+`project`
+
+### --feedback--
+
+This word refers to a specific task or goal being worked on.
+
+---
+
+`manager`
+
+### --feedback--
+
+This word refers to a person responsible for overseeing and organizing tasks or teams.
+
+# --explanation--
+
+A `project manager` is a person who oversees the progress of a project, ensuring tasks are completed on time and goals are met. For example:
+
+`The project manager called a meeting to discuss deadlines.` - This shows the manager organizing and leading the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.44,
+      "finishTimestamp": 27.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "I'll update the project manager about the situation.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
new file mode 100644
index 0000000000..e0f1027e41
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574c6d474104486add91a7.md
@@ -0,0 +1,106 @@
+---
+id: 67574c6d474104486add91a7
+title: Task 76
+challengeType: 19
+dashedName: task-76
+---
+
+<!-- (Audio) Jake: I'll update the project manager about the situation. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake informing?
+
+## --answers--
+
+He has already updated the project manager about the situation.
+
+### --feedback--
+
+Jake uses `I'll` which shows this is a plan for the future, not something that has already happened.
+
+---
+
+He is updating the project manager about the situation now.
+
+### --feedback--
+
+Jake uses `I'll` which shows this is something he plans to do in the future, not right now.
+
+---
+
+He is not going to inform the project manager.
+
+### --feedback--
+
+Jake explicitly says he will do something.
+
+---
+
+He will update the project manager about the situation.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Jake says, `I'll update the project manager`, this shows that Jake is talking about something he plans to do in the future, not something happening now or that has already been done. For example:
+
+- `I'll send the email tomorrow.` - This means sending the email is planned for the future.
+
+- `He'll call the client after the meeting.` - This shows a plan to contact the client later.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 24.44,
+      "finishTimestamp": 27.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "I'll update the project manager about the situation.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
new file mode 100644
index 0000000000..2d9f3bb8f6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67574d8786f50e500eae8e67.md
@@ -0,0 +1,97 @@
+---
+id: 67574d8786f50e500eae8e67
+title: Task 77
+challengeType: 22
+dashedName: task-77
+---
+
+<!-- (Audio) Sarah: I'll alert the development team and tell them to check their emails carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'll alert the BLANK BLANK and tell them to check their emails carefully.`
+
+## --blanks--
+
+`development`
+
+### --feedback--
+
+This word refers to the team responsible for creating or improving something, such as software or systems.
+
+---
+
+`team`
+
+### --feedback--
+
+This word refers to a group of people working together towards a common goal.
+
+# --explanation--
+
+The `development team` is a group of professionals responsible for building or improving systems, software, or products. For example:
+
+`The development team is working on the new feature.` - This means the team is creating or enhancing something specific.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.98,
+      "finishTimestamp": 30.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.06,
+      "dialogue": {
+        "text": "I'll alert the development team",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 3.06,
+      "finishTime": 4.84,
+      "dialogue": {
+        "text": "and tell them to check their emails carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
new file mode 100644
index 0000000000..95e192bf54
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575000c0fd5b5f211d89c4.md
@@ -0,0 +1,121 @@
+---
+id: 67575000c0fd5b5f211d89c4
+title: Task 78
+challengeType: 19
+dashedName: task-78
+---
+
+<!-- (Audio) Sarah: I'll alert the development team and tell them to check their emails carefully. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Who is Sarah going to alert?
+
+## --answers--
+
+The development team. So they check their emails carefully.
+
+---
+
+Sarah will create a remider to herself about the emails.
+
+### --feedback--
+
+Sarah is giving instructions to others, not acting on them herself.
+
+---
+
+Jake. So he rememebers to check his emails carefully.
+
+### --feedback--
+
+Jake is not mentioned as the one being alerted in this context.
+
+---
+
+The project manager. So they check their emails carefully.
+
+### --feedback--
+
+Sarah is not addressing the project manager in this situation.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Here are some elements from Sarah's statement that will help you understand what she is saying:
+
+`I'll alert` shows Sarah's future action to inform someone.
+
+`The development team` directly state who she is informing.
+
+`Tell them` makes it clear that she will give instructions to the development team.
+
+`To check their emails carefully` specifies the action Sarah is advising the development team to take.
+
+This combination of words shows Sarah is planning to inform the development team and give them instructions about being cautious with their emails.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.98,
+      "finishTimestamp": 30.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.06,
+      "dialogue": {
+        "text": "I'll alert the development team",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 3.06,
+      "finishTime": 4.84,
+      "dialogue": {
+        "text": "and tell them to check their emails carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
new file mode 100644
index 0000000000..39a3183667
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757531dc5fbb973e1912e1a.md
@@ -0,0 +1,90 @@
+---
+id: 6757531dc5fbb973e1912e1a
+title: Task 79
+challengeType: 22
+dashedName: task-79
+---
+
+<!-- (Audio) Is there anything else we should do? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Is there BLANK BLANK we should do?`
+
+## --blanks--
+
+`anything`
+
+### --feedback--
+
+This word refers to something unspecified and is used in questions or negative sentences.
+
+---
+
+`else`
+
+### --feedback--
+
+This word means in addition or different from what has already been mentioned.
+
+# --explanation--
+
+`Is there anything else we should do?` is a way to ask if additional actions are necessary.
+
+It combines `anything`, which refers to something unspecified, with `else`, meaning something additional or different. For example:
+
+`Do you have anything else to add?` - This asks if there is additional input or information.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.68,
+      "finishTimestamp": 32.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.48,
+      "dialogue": {
+        "text": "Is there anything else we should do?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 2.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
new file mode 100644
index 0000000000..e3644254eb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675753a815259c781d2b6913.md
@@ -0,0 +1,80 @@
+---
+id: 675753a815259c781d2b6913
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll BLANK need to run a full system scan.`
+
+## --blanks--
+
+`probably`
+
+### --feedback--
+
+This word shows that something is likely but not certain to happen.
+
+# --explanation--
+
+`Probably` is an adverb used to express that something is likely to happen but not completely certain. For example:
+
+`We'll probably finish the project by Friday.` - This shows confidence in completing the project by Friday but leaves room for uncertainty.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.36,
+      "finishTimestamp": 34.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
new file mode 100644
index 0000000000..01216d5f7b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575473b14c837d8de3a866.md
@@ -0,0 +1,96 @@
+---
+id: 67575473b14c837d8de3a866
+title: Task 81
+challengeType: 22
+dashedName: task-81
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably need to run a BLANK BLANK BLANK.`
+
+## --blanks--
+
+`full`
+
+### --feedback--
+
+This word means complete or entire, indicating that no parts will be skipped.
+
+---
+
+`system`
+
+### --feedback--
+
+This word refers to the computer or network being examined.
+
+---
+
+`scan`
+
+### --feedback--
+
+This word means an inspection or analysis to find problems or issues.
+
+# --explanation--
+
+``Full system scan` means a comprehensive check of the entire computer or network to identify potential issues, such as viruses or security threats. For example:
+
+`The team performed a full system scan to find malware.` - This shows a complete analysis of the system for security purposes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.36,
+      "finishTimestamp": 34.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
new file mode 100644
index 0000000000..693a94ec0b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575588dfebc085e31941e4.md
@@ -0,0 +1,101 @@
+---
+id: 67575588dfebc085e31941e4
+title: Task 82
+challengeType: 22
+dashedName: task-82
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan to ensure there's no hidden malware. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably need to run a full system scan to ensure there's no BLANK BLANK.`
+
+## --blanks--
+
+`hidden`
+
+### --feedback--
+
+This word means something that is not visible or easily found.
+
+---
+
+`malware`
+
+### --feedback--
+
+This word refers to malicious software designed to harm or exploit a system.
+
+# --explanation--
+
+`Hidden` means something that is concealed or not immediately visible, often requiring extra effort to find.
+
+`Malware` refers to malicious software designed to damage, disrupt, or exploit a computer system.
+
+When combined, `hidden malware` describes harmful software that is difficult to detect because it is concealed within the system. For example:
+
+`The scan detected hidden malware that had bypassed the antivirus software.` - This means the malware was able to avoid detection by the antivirus program until a scan found it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.26,
+      "finishTimestamp": 36.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.48,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "to ensure that there's no hidden malware.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
new file mode 100644
index 0000000000..17b2d6d167
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575734a3672990f7c4385a.md
@@ -0,0 +1,117 @@
+---
+id: 67575734a3672990f7c4385a
+title: Task 83
+challengeType: 19
+dashedName: task-83
+---
+
+<!-- (Audio) Jake: We'll probably need to run a full system scan to ensure there's no hidden malware. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why is Jake planning a full system scan?
+
+## --answers--
+
+To fix an issue with the system.
+
+### --feedback--
+
+Jake is not fixing an issue at this moment.
+
+---
+
+To ensure there's no hidden malware.
+
+---
+
+To update the system software.
+
+### --feedback--
+
+Jake is not updating the system at the moment.
+
+---
+
+To improve the system's performance.
+
+### --feedback--
+
+Jake is not focused on performance at the moment.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+By focusing on these specific parts of the sentence, you can determine Jake's intention:
+
+`Run a full system scan` shows the action Jake is planning to take.
+
+`To ensure` introduces the reason for the scan.
+
+`There's no hidden malware` explains the final purpose — Jake is checking for concealed malicious software.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.26,
+      "finishTimestamp": 36.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "We'll probably need to run a full system scan",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.48,
+      "finishTime": 5.44,
+      "dialogue": {
+        "text": "to ensure that there's no hidden malware.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
new file mode 100644
index 0000000000..1e3ab1fcfa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6757585d71b1ad9924a96eb9.md
@@ -0,0 +1,90 @@
+---
+id: 6757585d71b1ad9924a96eb9
+title: Task 84
+challengeType: 22
+dashedName: task-84
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Can you BLANK with the IT BLANK team for that?`
+
+## --blanks--
+
+`coordinate`
+
+### --feedback--
+
+This word means to organize or work together with others to achieve a goal.
+
+---
+
+`support`
+
+### --feedback--
+
+This word refers to assistance or help, often related to solving technical or operational issues.
+
+# --explanation--
+
+`Coordinate` means to organize or collaborate with others to complete a task or achieve a goal.
+
+`Support` refers to the help or assistance provided by the IT team, often related to technical issues. For example:
+
+`We need to coordinate with the IT team to ensure the system runs smoothly.` - This shows collaboration to manage technical processes.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
new file mode 100644
index 0000000000..d83c585008
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675758e09f09139cb34169f9.md
@@ -0,0 +1,110 @@
+---
+id: 675758e09f09139cb34169f9
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake asking Sarah?
+
+## --answers--
+
+To solve the problem on her own.
+
+### --feedback--
+
+Jake is not asking Sarah to handle the task alone.
+
+---
+
+To explain the issue to the development team.
+
+### --feedback--
+
+Jake doesn't mention the development team.
+
+---
+
+To update the project manager about the task.
+
+### --feedback--
+
+Jake does not mention the project manager in this context.
+
+---
+
+To work with the IT support team to handle the task.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+By focusing on key parts of the sentence, you can determine what Jake is asking Sarah:
+
+`Coordinate` shows Jake is asking Sarah to organize or collaborate.
+
+`With the IT support team` specifies who Sarah needs to work with.
+
+`For that` refers to the task Jake wants her to handle with their help.
+
+This shows Jake is asking Sarah to work with the IT support team to address a specific task.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
new file mode 100644
index 0000000000..e857e557f2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67575a0d4b966da41383050b.md
@@ -0,0 +1,92 @@
+---
+id: 67575a0d4b966da41383050b
+title: Task 86
+challengeType: 19
+dashedName: task-86
+---
+
+<!-- (Audio) Can you coordinate with the IT support team for that? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to Jake's question?
+
+## --answers--
+
+`Yes, I'll contact them now.`
+
+---
+
+`I don't know how to work with people.`
+
+### --feedback--
+
+This doesn't address Jake's request or offer a solution.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The best response is `Yes, I'll contact them now.` Here's why:
+
+`Yes` directly agrees to Jake's request.
+
+`I'll contact them now` shows willingness to act promptly, which matches the tone of Jake's question.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 36.96,
+      "finishTimestamp": 39.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.64,
+      "dialogue": {
+        "text": "Can you coordinate with the IT support team for that?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
new file mode 100644
index 0000000000..073a185670
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8db0264a83364dc521ac.md
@@ -0,0 +1,90 @@
+---
+id: 675c8db0264a83364dc521ac
+title: Task 87
+challengeType: 22
+dashedName: task-87
+---
+
+<!-- (Audio) Sarah: Yes, I'll contact them now. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, BLANK contact them BLANK.`
+
+## --blanks--
+
+`I'll`
+
+### --feedback--
+
+This is the contraction for `I will`. The first letter is capitalized.
+
+---
+
+`now`
+
+### --feedback--
+
+This word indicates that Sarah is planning to act immediately.
+
+# --explanation--
+
+`I'll` is the contraction for `I will`. In this context, it expresses a decision made at the moment of speaking. This is common when someone reacts to a situation or agrees to do something promptly.
+
+`Now` is used to indicate something happening at the present moment. For example:
+
+`I'll send the report now.` - This shows a decision to act right away.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.9,
+      "finishTimestamp": 41.4
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.5,
+      "dialogue": {
+        "text": "Yes, I'll contact them now.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.0
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
new file mode 100644
index 0000000000..ff24f27ca7
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c8f75eaf3914275999cae.md
@@ -0,0 +1,92 @@
+---
+id: 675c8f75eaf3914275999cae
+title: Task 88
+challengeType: 22
+dashedName: task-88
+---
+
+<!-- (Audio) Sarah: How do you think our clients will react to this news? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`How do you think our clients BLANK BLANK to this news?`
+
+## --blanks--
+
+`will`
+
+### --feedback--
+
+This modal verb is used to talk about what is likely to happen in the future.
+
+---
+
+`react`
+
+### --feedback--
+
+This word means to respond or behave in a certain way when something happens.
+
+# --explanation--
+
+`Will` is a modal verb used to predict the future.
+
+`React` means how someone responds or behaves in response to something. For example:
+
+- `How do you think the team will react to the delay?` - This predicts the team's response to a delay.
+
+- `Our clients will react positively to the improved service.` - This shows an expected positive response to a change.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.7,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.32,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
new file mode 100644
index 0000000000..ebfb93b3d4
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c900ff099fa46fad7624d.md
@@ -0,0 +1,117 @@
+---
+id: 675c900ff099fa46fad7624d
+title: Task 89
+challengeType: 19
+dashedName: task-89
+---
+
+<!-- (Audio) Sarah: Yes, I'll contact them now. How do you think our clients will react to this news? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Sarah wondering about?
+
+## --answers--
+
+How the clients will react to the news.
+
+---
+
+If the clients reacted well to the news.
+
+### --feedback--
+
+Sarah is asking about the future, not something that has already happened.
+
+---
+
+How the clients reacted to the news.
+
+### --feedback--
+
+Sarah is asking about the future, not something that has already happened.
+
+---
+
+If they should let the clients know about the news.
+
+### --feedback--
+
+Sarah is not asking whether to share the news.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+In the sentence, Sarah says, `How do you think our clients will react to this news?` Here's how to find the answer:
+
+`Will react` uses the `Future Simple` tense, showing Sarah is asking about a future possibility.
+
+`React` focuses on the clients' response or behavior.
+
+This indicates Sarah is wondering about how the clients might respond to the news.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.9,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.6,
+      "dialogue": {
+        "text": "Yes, I'll contact them now.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.9,
+      "finishTime": 5.12,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 5.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
new file mode 100644
index 0000000000..ff6c44bda5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c91b0c74a72519ebb0a83.md
@@ -0,0 +1,92 @@
+---
+id: 675c91b0c74a72519ebb0a83
+title: Task 91
+challengeType: 22
+dashedName: task-91
+---
+
+<!-- (Audio) Jake: They'll likely be concerned. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK BLANK be concerned.`
+
+## --blanks--
+
+`They'll`
+
+### --feedback--
+
+This is the contraction for `They will,` used to talk about something that is expected to happen in the future. The first letter is capitalized.
+
+---
+
+`likely`
+
+### --feedback--
+
+This word means that something is probable or has a high chance of happening.
+
+# --explanation--
+
+`They'll` is the contraction for `they will`. It is used to talk about something expected or predicted to happen in the future.
+
+`Likely` means something is probable or has a high chance of happening. For example:
+
+- `They'll likely ask for more information.` - This predicts a probable request from the clients.
+
+- `The feature will likely need additional testing.` - This indicates a high probability that testing will be required.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 46.0
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.4,
+      "dialogue": {
+        "text": "They'll likely be concerned",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
new file mode 100644
index 0000000000..739a336cde
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c92e9a6133659ccad5424.md
@@ -0,0 +1,92 @@
+---
+id: 675c92e9a6133659ccad5424
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- (Audio) Sarah: How do you think our clients will react to this news? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Jake thinks clients will be probably worried. Which option will deliver this message to Sarah?
+
+## --answers--
+
+`They'll likely be concerned.`
+
+---
+
+`They already know about the news.`
+
+### --feedback--
+
+Jake is not discussing whether the clients know about the news; he is focusing on their potential reaction.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The correct answer is `They'll likely be concerned.` Here's why:
+
+`They'll` indicates Jake is predicting the clients' future reaction.
+
+`Likely` suggests that worry is probable, though not certain.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.7,
+      "finishTimestamp": 44.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 3.32,
+      "dialogue": {
+        "text": "How do you think our clients will react to this news?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 3.82
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
new file mode 100644
index 0000000000..cb9b9f73d5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c94decb56d46654acf008.md
@@ -0,0 +1,109 @@
+---
+id: 675c94decb56d46654acf008
+title: Task 92
+challengeType: 19
+dashedName: task-92
+---
+
+<!-- (Audio) Jake: They'll likely be concerned. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How will the clients feel?
+
+## --answers--
+
+They'll be completely calm.
+
+### --feedback--
+
+Jake uses the word `concerned` which suggests worry, not calmness.
+
+---
+
+They'll likely be concerned.
+
+---
+
+They'll be unaware of the situation.
+
+### --feedback--
+
+Jake's statement focuses on their feelings, not whether they know about the situation.
+
+---
+
+They'll feel excited.
+
+### --feedback--
+
+The word `concerned` means worry, which is the opposite of excitement.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Likely be` suggests this is a probable outcome, though not certain.
+
+`Concerned` means feeling worried or anxious about something. In this context, Jake predicts that the clients will feel worried about the news. For example:
+
+- `The team was concerned about meeting the deadline.` - This shows they were worried about achieving their goal.
+
+- `Our clients were concerned about the system's performance.` - This indicates they were anxious about how well the system was functioning.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 46.0
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.4,
+      "dialogue": {
+        "text": "They'll likely be concerned",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.9
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
new file mode 100644
index 0000000000..c66686a2a9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9579b10f316b5542b331.md
@@ -0,0 +1,100 @@
+---
+id: 675c9579b10f316b5542b331
+title: Task 93
+challengeType: 22
+dashedName: task-93
+---
+
+<!-- (Audio) Jake: But I'll reassure them that we are taking all necessary steps to secure our systems. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`But I'll BLANK them that we BLANK BLANK all necessary steps to secure our systems.`
+
+## --blanks--
+
+`reassure`
+
+### --feedback--
+
+This word means to comfort or make someone feel less worried about something.
+
+---
+
+`are`
+
+### --feedback--
+
+This is part of the structure `to be` + a verb ending in `-ing`, used here to describe an action planned for the near future
+
+---
+
+`taking`
+
+### --feedback--
+
+This word means performing or carrying out an action or step. In this context, it refers to actions being planned or executed.
+
+# --explanation--
+
+`Reassure` means to provide confidence or reduce someone's anxiety about a situation.
+
+`We are taking` combines the verb `to be` with a verb ending in `-ing`. This is often used to talk about future actions already planned or happening soon. For example:
+
+- `I'll reassure the team that we are reviewing the report.` - This means you will comfort the team by telling them the review is happening soon.
+
+- `She is meeting the client tomorrow to reassure them about the changes.` - This shows the `to be` + a verb ending in `-ing` structure for a planned event.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.98,
+      "finishTimestamp": 50.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 6,
+      "dialogue": {
+        "text": "But I'll reassure them that we're taking all necessary steps to secure our systems.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
new file mode 100644
index 0000000000..f39ef43914
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c96e7feed5f75004ea8a4.md
@@ -0,0 +1,115 @@
+---
+id: 675c96e7feed5f75004ea8a4
+title: Task 94
+challengeType: 19
+dashedName: task-94
+---
+
+<!-- (Audio) Jake: They'll likely be concerned, but I'll reassure them that we are taking all necessary steps to secure our systems. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake's statement show about his priorities for the future?
+
+## --answers--
+
+Fixing the problem without telling the clients.
+
+### --feedback--
+
+The audio mentions both actions, not just fixing the issue.
+
+---
+
+Avoiding responsibility for what happened.
+
+### --feedback--
+
+The audio shows Jake is planning to take action, not avoiding it.
+
+---
+
+Keeping clients calm and fixing the security issue.
+
+---
+
+Waiting to see what happens next.
+
+### --feedback--
+
+The audio shows Jake is planning to act now, not waiting.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Jake's statement shows his priorities are about keeping clients calm and solving the problem. Here's how the audio explains this:
+
+`I'll reassure them` shows Jake wants to help clients feel less worried by telling them what the team is doing.
+
+`We are taking all necessary steps` shows Jake's focus on solving the security issue as quickly and completely as possible.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.6,
+      "finishTimestamp": 51.18
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.3,
+      "dialogue": {
+        "text": "They'll likely be concerned,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 2.38,
+      "finishTime": 7.58,
+      "dialogue": {
+        "text": "but I'll reassure them that we're taking all necessary steps to secure our systems.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.08
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
new file mode 100644
index 0000000000..27de1c1036
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9900820144823ed5b11a.md
@@ -0,0 +1,109 @@
+---
+id: 675c9900820144823ed5b11a
+title: Task 95
+challengeType: 22
+dashedName: task-95
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks, Jake. BLANK BLANK BLANK to discuss the investigation results and plan our next steps.`
+
+## --blanks--
+
+`Let's`
+
+### --feedback--
+
+This is a contraction for `Let us`, used to suggest doing something together. The first letter is capitalized.
+
+---
+
+`meet`
+
+### --feedback--
+
+This word means to come together, often to discuss or plan something.
+
+---
+
+`later`
+
+### --feedback--
+
+This word refers to a time in the future, not immediately.
+
+# --explanation--
+
+`Let's` is a contraction for `Let us`, used to make a suggestion or propose doing something together.
+
+`Meet` means to come together, often for a discussion or planning.
+
+`Later` refers to a future time, not immediately. Sarah is suggesting they meet in the near future to discuss the results and plan further actions. For example:
+
+`Let's meet tomorrow to finalize the details.` - This suggests getting together the next day to complete planning.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
new file mode 100644
index 0000000000..2cba93d41a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a309dcbc3053601e653.md
@@ -0,0 +1,101 @@
+---
+id: 675c9a309dcbc3053601e653
+title: Task 96
+challengeType: 22
+dashedName: task-96
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks, Jake. Let's meet later to discuss the BLANK BLANK and plan our next steps.`
+
+## --blanks--
+
+`investigation`
+
+### --feedback--
+
+This word refers to a detailed process of examining or finding information about something, especially a problem or issue.
+
+---
+
+`results`
+
+### --feedback--
+
+This word means the outcomes or findings from an action, process, or investigation.
+
+# --explanation--
+
+`Investigation` refers to a detailed examination or inquiry to uncover facts or information.
+
+`Results` are the findings or outcomes of the investigation. For example:
+
+- `The investigation showed there was a security breach.` - This means the inquiry revealed information about the breach.
+
+- `The results of the investigation helped us fix the issue.` - This indicates that the findings led to corrective actions.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
new file mode 100644
index 0000000000..912695fbd3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/675c9a9d87d492086e1ab3cf.md
@@ -0,0 +1,117 @@
+---
+id: 675c9a9d87d492086e1ab3cf
+title: Task 97
+challengeType: 19
+dashedName: task-97
+---
+
+<!-- (Audio) Sarah: Thanks, Jake. Let's meet later to discuss the investigation results and plan our next steps. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Sarah want to do?
+
+## --answers--
+
+Solve the issue immediately without a meeting.
+
+### --feedback--
+
+Sarah suggests meeting later, not solving the issue immediately.
+
+---
+
+Finish the investigation before meeting with the clients.
+
+### --feedback--
+
+Sarah is not talking about finishing the investigation first; she wants to discuss the results they already have.
+
+---
+
+Ask Jake to share the results and next steps with the clients.
+
+### --feedback--
+
+Sarah is talking about discussing the results with Jake, not sharing them with the clients.
+
+---
+
+Meet later to discuss the results and plan the next steps.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Here's how to find the answer:
+
+`Let's meet later` shows she is proposing a meeting in the future.
+
+`To discuss the investigation results` explains what the meeting will focus on.
+
+`Plan our next steps` shows that Sarah wants to decide on future actions during the meeting.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Sarah",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 55.82
+    }
+  },
+  "commands": [
+    {
+      "character": "Sarah",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Sarah",
+      "startTime": 1,
+      "finishTime": 2.72,
+      "dialogue": {
+        "text": "Thanks, Jake. Let's meet later",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "startTime": 2.72,
+      "finishTime": 5.42,
+      "dialogue": {
+        "text": "to discuss the investigation results and plan our next steps.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Sarah",
+      "opacity": 0,
+      "startTime": 6.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
new file mode 100644
index 0000000000..eebfe0f563
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67619dab2031295f7b4dcee1.md
@@ -0,0 +1,96 @@
+---
+id: 67619dab2031295f7b4dcee1
+title: Task 98
+challengeType: 22
+dashedName: task-98
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`probably`, `I'll reassure`, `I'll send`, `will need`, `it won't`, `will affect`, and `I'll alert`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: Sarah, I just found out that we've had a phishing attack on our system. It looks like someone BLANK to notify the team and take immediate action.`
+
+`Sarah: Oh no! Do you know where it originated from?`
+
+`Jake: Not yet, but I think it came from an email link. We need to investigate quickly. BLANK out a warning to everyone right away.`
+
+`Sarah: That sounds like a good plan. Do you think it BLANK our project deadlines?`
+
+`Jake: It might. I hope BLANK, but we should prepare for delays. I'll update the project manager about the situation.`
+
+`Sarah: BLANK the development team and tell them to check their emails carefully. Is there anything else we should do?`
+
+`Jake: We'll BLANK need to run a full system scan to ensure there's no hidden malware. Can you coordinate with the IT support team for that?`
+
+`Sarah: Yes, I'll contact them now. How do you think our clients will react to this news?`
+
+`Jake: They'll likely be concerned, but BLANK them that we are taking all necessary steps to secure our systems.`
+
+## --blanks--
+
+`will need`
+
+### --feedback--
+
+These two words together use the `Future Simple` tense and describe a future necessity. The second word indicates a requirement or something essential.
+
+---
+
+`I'll send`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, showing a future action. The first letter is capitalized. The second word means to deliver something to someone or somewhere.
+
+---
+
+`will affect`
+
+### --feedback--
+
+This phrase describes the future impact of an action using the `Future Simple` tense. The second word means to change or influence something.
+
+---
+
+`it won't`
+
+### --feedback--
+
+This is the contraction for `it will not`, showing a negative prediction about the future. The second word indicates refusal or something not happening.
+
+---
+
+`I'll alert`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, indicating a future action. The first letter is capitalized. The second word means to notify or warn someone.
+
+---
+
+`probably`
+
+### --feedback--
+
+This adverb is used to describe something that is likely to happen. It shows a high chance of something occurring.
+
+---
+
+`I'll reassure`
+
+### --feedback--
+
+This phrase uses the contraction of `I will`, indicating a future action to comfort or reassure someone. The first letter is capitalized. The second word means to calm someone's concerns or provide confidence.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
new file mode 100644
index 0000000000..0ebff27010
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c4698166cd2462c1d685.md
@@ -0,0 +1,178 @@
+---
+id: 6761c4698166cd2462c1d685
+title: "Dialogue 3: Planning for SQL Injection Prevention"
+challengeType: 21
+dashedName: dialogue-3-planning-for-sql-injection-prevention
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video.
+
+# --scene--
+
+```json
+{
+ "setup": {
+   "background": "company2-center.png",
+   "characters": [
+     {
+       "character": "Jake",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "Maria",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_5-3.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Jake",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Jake",
+     "startTime": 1,
+     "finishTime": 3.42,
+     "dialogue": {
+       "text": "I've been looking into our database security,",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 3.66,
+     "finishTime": 7.64,
+     "dialogue": {
+       "text": "and I think we're going to need some additional measures to prevent SQL injection attacks.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 8.3,
+     "finishTime": 13.62,
+     "dialogue": {
+       "text": "I agree. We've been noticing some unusual queries in the logs. What are you going to recommend to improve security?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 14.16,
+     "finishTime": 17.88,
+     "dialogue": {
+       "text": "We're going to implement parameterized queries to minimize the risk.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 18.16,
+     "finishTime": 21.62,
+     "dialogue": {
+       "text": "This should reduce the chances of unauthorized access to our data.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 22.06,
+     "finishTime": 26.18,
+     "dialogue": {
+       "text": "That sounds like a solid plan. Are we going to require additional training for our developers?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 26.82,
+     "finishTime": 31.68,
+     "dialogue": {
+       "text": "Yes. We're going to hold the session next week to ensure everyone knows how to implement these changes.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 31.94,
+     "finishTime": 34.98,
+     "dialogue": {
+       "text": "It's crucial that we all follow best practices.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 35.9,
+     "finishTime": 39.8,
+     "dialogue": {
+       "text": "I'm going to inform the team about the upcoming training. Is there anything else we need to do?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 40.12,
+     "finishTime": 46.08,
+     "dialogue": {
+       "text": "We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 46.58,
+     "finishTime": 49.34,
+     "dialogue": {
+       "text": "Great. I think this is going to make a big difference in our security.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Maria",
+     "startTime": 49.74,
+     "finishTime": 52.02,
+     "dialogue": {
+       "text": "Are we going to share this information with other departments?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Jake",
+     "startTime": 52.4,
+     "finishTime": 57.44,
+     "dialogue": {
+       "text": "We'll probably do that after we've completed the training. It's better to ensure our team is fully prepared first.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Maria",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.94
+   },
+   {
+     "character": "Jake",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 58.44
+   }
+ ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
new file mode 100644
index 0000000000..07d026345b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761c69821431133f4860640.md
@@ -0,0 +1,70 @@
+---
+id: 6761c69821431133f4860640
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What action will Jake take next?
+
+## --answers--
+
+He won't talk to the clients and focus only on fixing the system.
+
+### --feedback--
+
+The message shows Jake is keeping the clients informed, not ignoring their concerns.
+
+---
+
+He'll reassure the clients that steps are being taken.
+
+---
+
+He'll tell Sarah to report directly to the clients.
+
+### --feedback--
+
+Jake has already taken responsibility for communicating with the clients.
+
+---
+
+He'll ask the IT team to delay their investigation.
+
+### --feedback--
+
+The IT team is already actively monitoring the situation, so delaying the investigation doesn't make sense.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To determine what Jake will do next, focus on his message:
+
+`I'll provide you with regular updates` shows Jake's plan to keep the clients informed.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
new file mode 100644
index 0000000000..68ed2d0825
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ca7cf0fd854c646ebd11.md
@@ -0,0 +1,76 @@
+---
+id: 6761ca7cf0fd854c646ebd11
+title: Task 100
+challengeType: 19
+dashedName: task-100
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What is the clients' main concern?
+
+## --answers--
+
+They are worried about losing access to their accounts.
+
+### --feedback--
+
+The message focuses on the security of the clients' data, not account access.
+
+---
+
+They think the issue has already been fixed.
+
+### --feedback--
+
+The clients are asking for confirmation, which shows they are not sure the issue has been resolved.
+
+---
+
+They are concerned about the safety of their data.
+
+---
+
+They are asking for technical details about the system scan.
+
+### --feedback--
+
+The clients are asking *when* the issue will be resolved, not for technical details.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The clients say, `We're very concerned about the security of our data.`
+
+This clearly shows their main concern is the **safety of their data**.
+
+They ask, `Can you confirm when this issue will be fully resolved?` which suggests they are looking for reassurance that their data is secure and the problem will soon be fixed. For example:
+
+- `We're worried about losing sensitive information.` - This shows concern for data safety.
+
+- `Is the system safe now?` - This reflects a need for confirmation about the resolution.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
new file mode 100644
index 0000000000..48ed6deba0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cae47045b54f50840915.md
@@ -0,0 +1,72 @@
+---
+id: 6761cae47045b54f50840915
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What do Jake's actions show about his priorities?
+
+## --answers--
+
+Keeping the clients informed and addressing the issue quickly.
+
+---
+
+Focusing on fixing the technical issue.
+
+### --feedback--
+
+Jake promises to provide updates to the clients, so he is not just focusing on fixing the system.
+
+---
+
+Finding the person who made this mistake.
+
+### --feedback--
+
+Jake's message does not assign blame.
+
+---
+
+Delaying the resolution to gather more information.
+
+### --feedback--
+
+Jake highlights that steps are already being taken to resolve the issue quickly.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jake's actions show that he prioritizes keeping the clients informed and solving the issue quickly.
+
+`I'll provide you with regular updates` shows his focus on clear and transparent communication.
+
+`We're taking all necessary steps to secure the system` highlights his commitment to resolving the issue as soon as possible.  
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
new file mode 100644
index 0000000000..c65556d1ec
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761cb950d555c54150b2212.md
@@ -0,0 +1,74 @@
+---
+id: 6761cb950d555c54150b2212
+title: Task 102
+challengeType: 19
+dashedName: task-102
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is the message Jake sent to the clients after the phishing attack:
+
+`We're currently addressing the issue and taking all necessary steps to secure the system.`
+
+`We've run a full system scan to identify hidden malware, and the IT support team is actively monitoring the situation.`
+
+`I'll provide you with regular updates to ensure transparency.`
+
+`Please let us know if you have further concerns.`
+
+The clients replied:
+
+`We're very concerned about the security of our data. Can you confirm when this issue will be fully resolved?`
+
+What is the next step Jake refers to in his message?
+
+## --answers--
+
+Running a full system scan.
+
+### --feedback--
+
+Jake mentions that the full system scan has already been done.
+
+---
+
+Actively monitoring the system.
+
+---
+
+Resolving the issue completely.
+
+### --feedback--
+
+The text shows the issue is still being worked on, and Jake has not yet resolved it.
+
+---
+
+Sending details about the phishing attack.
+
+### --feedback--
+
+Jake focuses on actions being taken, not on sharing details about the phishing attack.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the next step Jake refers to, look at the specific actions mentioned in his message:
+
+`We've run a full system scan` shows this step has already been done.
+
+`The IT support team is actively monitoring the situation` is the next step currently happening to secure the system.
+
+Jake does not yet mention resolving the issue or providing additional details about the phishing attack.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
new file mode 100644
index 0000000000..1e70e5b13d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e3efbd12c067489c90fe.md
@@ -0,0 +1,82 @@
+---
+id: 6761e3efbd12c067489c90fe
+title: Task 103
+challengeType: 22
+dashedName: task-103
+---
+
+<!-- (audio) Jake: I've been looking into our database security. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I've been BLANK into our database security.`
+
+## --blanks--
+
+`looking`
+
+### --feedback--
+
+This word means trying to find information or investigate. it ends in `-ing`.
+
+# --explanation--
+
+`Looking into` means to investigate or examine something carefully. For example:
+
+- `The manager is looking into the issue with the server.` - This means the manager is investigating the server problem.
+
+- `She is looking into ways to improve our performance.` - This means she is searching for ways to make the team perform better.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 2.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.92
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
new file mode 100644
index 0000000000..2c880f8a46
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e51505b1d96f537b089e.md
@@ -0,0 +1,124 @@
+---
+id: 6761e51505b1d96f537b089e
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I've been looking into our database security, and I think BLANK BLANK BLANK some additional measures to prevent SQL injection attacks.`
+
+## --blanks--
+
+`we're`
+
+### --feedback--
+
+This is a contraction for `we are`.
+
+---
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned or intended action in the future. The first is a verb and the second a preposition.
+
+---
+
+`need`
+
+### --feedback--
+
+This verb means something is required or necessary. It is a verb in its base form.
+
+# --explanation--
+
+`Going to` is used to talk about planned actions or intentions for the future. For example:
+
+- `We are going to upgrade the system next month.` - This means the upgrade is planned and will happen soon.
+
+- `She is going to learn SQL next year.` - This means she intends to learn SQL in the future.
+
+In this sentence:
+
+`We're` is the contraction for `we are`.
+
+`Going to` shows the action is planned for the near future.
+
+`Need` is the base verb indicating something necessary or required.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
new file mode 100644
index 0000000000..1b1456c086
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e7b82f98fc7fb7d9c06b.md
@@ -0,0 +1,124 @@
+---
+id: 6761e7b82f98fc7fb7d9c06b
+title: Task 105
+challengeType: 19
+dashedName: task-105
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake currently looking into?
+
+## --answers--
+
+Database security
+
+---
+
+Server upgrades
+
+### --feedback--
+
+Jake doesn't mention upgrading servers; he's focused on something else.
+
+---
+
+New software
+
+### --feedback--
+
+Jake isn't talking about installing new software.
+
+---
+
+Network performance
+
+### --feedback--
+
+Jake's focus is not on network performance. Listen carefully to the audio.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Database security` refers to protecting databases from unauthorized access or attacks. For example:
+
+`The team is improving database security to prevent hackers from accessing confidential data.` - This means they are making the database safer to stop any illegal access.
+
+Jake says he is `looking into` their `database security`, which means he is investigating or checking its safety.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
new file mode 100644
index 0000000000..2e8b4f8e36
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e90350ebde88221daeea.md
@@ -0,0 +1,125 @@
+---
+id: 6761e90350ebde88221daeea
+title: Task 106
+challengeType: 19
+dashedName: task-106
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake think they need to do?
+
+## --answers--
+
+A new database
+
+### --feedback--
+
+Jake doesn't mention needing a new database. Listen carefully to what he says they require.
+
+---
+
+More team members
+
+### --feedback--
+
+Jake doesn't suggest needing more people for the task.
+
+---
+
+Additional measures
+
+---
+
+Less security
+
+### --feedback--
+
+This option is the opposite of what Jake suggests. He is looking to improve security, not reduce it.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Additional measures` refers to extra actions or steps taken to fix or improve something. For example:
+
+`We need additional measures to protect the system from future attacks.` - This means more steps are necessary to improve the system's safety.
+
+Jake says they need additional measures, meaning more steps are required to improve the database security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
+
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
new file mode 100644
index 0000000000..bdd401e122
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761e99e3e0f098cc0f265aa.md
@@ -0,0 +1,124 @@
+---
+id: 6761e99e3e0f098cc0f265aa
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What problem are the additional measures meant to address?
+
+## --answers--
+
+Slow database performance
+
+### --feedback--
+
+Jake is not talking about improving the database speed. Listen carefully to what the measures are for.
+
+---
+
+Data backup issues
+
+### --feedback--
+
+Jake does not mention any problem with data backups. Focus on the security issue he talks about.
+
+---
+
+Software updates
+
+### --feedback--
+
+Jake is not discussing updates to software. He is concerned with preventing a specific type of attack.
+
+---
+
+SQL injection attacks
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`SQL injection attacks` are a type of cyber attack where hackers insert harmful code into a database query to access or damage data. For example:
+
+`The company added security measures to prevent SQL injection attacks on their website.` - This means they took steps to stop hackers from entering harmful code.
+
+Jake says the `additional measures` are needed to `prevent SQL injection attacks`, meaning they are trying to stop this specific type of threat.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
new file mode 100644
index 0000000000..0690caa26b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761eb2e4b1192968b2303f4.md
@@ -0,0 +1,124 @@
+---
+id: 6761eb2e4b1192968b2303f4
+title: Task 108
+challengeType: 19
+dashedName: task-108
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How does Jake describe their current database security?
+
+## --answers--
+
+They are not prepared at all and need to start from scratch.
+
+### --feedback--
+
+Jake doesn't say they have no security at all. Listen again to his comment about needing additional measures.
+
+---
+
+They have some security, but they need more measures to improve it.
+
+---
+
+They have already taken additional measures and are now fully protected.
+
+### --feedback--
+
+Jake mentions `additional measures`, which means they haven't done it yet.
+
+---
+
+Their security is perfect, and no further actions are required.
+
+### --feedback--
+
+Jake clearly says they need to add more measures, so their security is not perfect yet.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Jake says he has been `looking into` their database security, which means he is investigating its current state. He concludes that they `need additional measures`, meaning some security exists, but it's not enough. For example:
+
+`The team needed additional measures to ensure their security was strong.` - This means the team added extra steps to improve something that already existed.
+
+Jake's statement shows their database security is in place but requires more work to prevent `SQL injection attacks`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
new file mode 100644
index 0000000000..c8cbde4537
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ecb48889faa066740143.md
@@ -0,0 +1,106 @@
+---
+id: 6761ecb48889faa066740143
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- (audio) Jake: I've been looking into our database security, and I think we're going to need some additional measures to prevent SQL injection attacks. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the best answer to Jake's comment?
+
+## --answers--
+
+`I agree.`
+
+---
+
+`Why don't we ignore it?`
+
+### --feedback--
+
+Ignoring the issue doesn't address Jake's concern about security.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The most appropriate answer is `I agree` because it supports Jake's suggestion that additional measures are needed to improve database security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 6.64
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I've been looking into our database security,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.66,
+      "dialogue": {
+        "text": "and I think we're going to need some additional measures",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.66,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "to prevent SQL injection attacks.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
new file mode 100644
index 0000000000..04a9c8dd49
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761ee00596d9fa8c8c3ac90.md
@@ -0,0 +1,103 @@
+---
+id: 6761ee00596d9fa8c8c3ac90
+title: Task 110
+challengeType: 22
+dashedName: task-110
+---
+
+<!-- (audio) Maria: I agree. We've been noticing some unusual queries in the logs. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I agree. We've been noticing some unusual BLANK in the BLANK.`
+
+## --blanks--
+
+`queries`
+
+### --feedback--
+
+This is the plural form of a request for information in a database.
+
+---
+
+`logs`
+
+### --feedback--
+
+These are files or records where events, activities, or actions are stored.
+
+# --explanation--
+
+`Query` refers to a request for information, often in a database. `Queries` means more than one request. For example:
+
+- `The developer sent a query to find user data.` - This means the developer made a single request for information.
+
+- `There were multiple queries for customer information.` - This means there were several requests for data.
+
+`Logs` refers to files or records that track events or actions. For example:
+
+`The team checked the logs to find unusual activities.` - This means they looked at the stored records to identify any issues.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.1,
+      "finishTimestamp": 10.36
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.64,
+      "dialogue": {
+        "text": "I agree.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.64,
+      "finishTime": 4.26,
+      "dialogue": {
+        "text": "We've been noticing some unusual queries in the logs.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
new file mode 100644
index 0000000000..410ae23ed2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f0dc81967cbbe1118dae.md
@@ -0,0 +1,113 @@
+---
+id: 6761f0dc81967cbbe1118dae
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- (audio) Maria: I agree. We've been noticing some unusual queries in the logs. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why does Maria agree with Jake?
+
+## --answers--
+
+Because the database is completely secure.
+
+### --feedback--
+
+Maria does not say the database is secure. She agrees with Jake about needing additional measures.
+
+---
+
+Because she noticed unusual queries in the logs.
+
+---
+
+Because they have already fixed the problem.
+
+### --feedback--
+
+Maria mentions noticing unusual queries, which suggests the problem is not yet fixed.
+
+---
+
+Because there are no issues in the logs.
+
+### --feedback--
+
+Maria says the opposite: there are unusual queries in the logs.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Maria agrees with Jake because she has evidence that supports his concern about database security.
+
+She mentions noticing `unusual queries in the logs`, which means some unexpected or suspicious requests were recorded.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.1,
+      "finishTimestamp": 10.36
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 1.64,
+      "dialogue": {
+        "text": "I agree.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 1.64,
+      "finishTime": 4.26,
+      "dialogue": {
+        "text": "We've been noticing some unusual queries in the logs.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
new file mode 100644
index 0000000000..605cd2e804
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f1e5287834c2cb5f4631.md
@@ -0,0 +1,98 @@
+---
+id: 6761f1e5287834c2cb5f4631
+title: Task 112
+challengeType: 22
+dashedName: task-112
+---
+
+<!-- (audio) What are you going to recommend to improve security? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`What BLANK BLANK BLANK recommend to improve security?`
+
+## --blanks--
+
+`are`
+
+### --feedback--
+
+This word is part of the verb `to be` and is used here to form a question about the future.
+
+---
+
+`you`
+
+### --feedback--
+
+This is the pronoun that refers to the person being asked.
+
+---
+
+`going to`
+
+### --feedback--
+
+These two words indicate a planned or intended action in the future. One is a verb, and the other is a preposition.
+
+# --explanation--
+
+This type of question uses `going to` to ask about someone's **future actions or plans**. You use it when you want to know what someone `intends to do` or has already planned. For example:
+
+- `What are you going to do about the missing files?` - This asks about the person's future action to solve a problem.
+
+- `When are you going to update the system?` - This asks about a specific plan for the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.52,
+      "finishTimestamp": 12.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "What are you going to recommend to improve security?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
new file mode 100644
index 0000000000..ad528387ce
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f2fbd2db7aca063b6a5c.md
@@ -0,0 +1,106 @@
+---
+id: 6761f2fbd2db7aca063b6a5c
+title: Task 113
+challengeType: 19
+dashedName: task-113
+---
+
+<!-- (audio) Maria: What are you going to recommend to improve security? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+What Jake suggests to improve security in the future.
+
+---
+
+What has already been done to improve security.
+
+### --feedback--
+
+Maria is asking about a future action, not something that has already happened.
+
+---
+
+What kind of security measures are not useful.
+
+### --feedback--
+
+Maria is asking for suggestions, not about measures that are ineffective.
+
+---
+
+Who is responsible for causing the security issues.
+
+### --feedback--
+
+Maria is focused on improving security, not finding out who caused the issues.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Recommend` means to suggest or advise something as a good idea or solution. Maria uses `going to` in her question to ask about **future actions** or plans. For example:
+
+`What are you going to recommend for the project?` - This asks what someone will suggest as a solution or improvement.
+
+In this sentence, Maria wants to know what Jake will suggest to improve security in the future. She is not asking about past actions or problems, but about ideas to move forward.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.52,
+      "finishTimestamp": 12.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "What are you going to recommend to improve security?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
new file mode 100644
index 0000000000..e6bd753de9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f509323d5ad6cfe9d212.md
@@ -0,0 +1,90 @@
+---
+id: 6761f509323d5ad6cfe9d212
+title: Task 114
+challengeType: 22
+dashedName: task-114
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're BLANK BLANK parameterized queries to minimize the risk.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned or intended action in the future. The first is a verb, and the second is a preposition.
+
+---
+
+`implement`
+
+### --feedback--
+
+This verb means to put an action, idea, or plan into effect.
+
+# --explanation--
+
+`Going to` is used to show that something has been decided and will happen soon.
+
+`Implement` means to put a plan or idea into action. For example:
+
+`The team is going to implement a new security strategy next month.` - This means the team has decided to take action and will begin soon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
new file mode 100644
index 0000000000..c71051c55c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f66b536d13df9a6e4b87.md
@@ -0,0 +1,84 @@
+---
+id: 6761f66b536d13df9a6e4b87
+title: Task 115
+challengeType: 22
+dashedName: task-115
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're going to implement BLANK queries to minimize the risk.`
+
+## --blanks--
+
+`parameterized`
+
+### --feedback--
+
+This word describes queries that use predefined values to improve security. It is a long word often used in database contexts.
+
+# --explanation--
+
+`Parameterized` comes from the root word `parameter`, which is a value or placeholder used to control how something works.
+
+When people say a query is `parameterized`, it means it uses predefined values (parameters) instead of inserting user input directly.
+
+This helps improve database security by preventing certain attacks like SQL injection. For example:
+
+- `The developer used parameterized queries to secure the database.` - This means they used placeholders to ensure no harmful code could be inserted.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
new file mode 100644
index 0000000000..d7c5ba0cd2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f6dc272d86e2f315b79c.md
@@ -0,0 +1,106 @@
+---
+id: 6761f6dc272d86e2f315b79c
+title: Task 116
+challengeType: 19
+dashedName: task-116
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Jake's plan?
+
+## --answers--
+
+To improve the database's performance with faster queries.
+
+### --feedback--
+
+Jake's plan focuses on minimizing risk, not improving the database speed.
+
+---
+
+To implement parameterized queries to minimize the risk.
+
+---
+
+To add more servers to handle heavy traffic.
+
+### --feedback--
+
+Jake doesn't mention servers or traffic. He talks about securing the database.
+
+---
+
+To fix the errors caused by broken queries.
+
+### --feedback--
+
+Jake is not fixing broken queries. He's focused on reducing risks by implementing a specific security method.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Implement` means to put an idea or solution into action.
+
+`Parameterized queries` are a method used in databases to reduce security risks, like SQL injection. This works by using placeholders for data instead of inserting user input directly into the query.
+
+In this sentence, Jake's plan is to take action to improve security and prevent risks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 16.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
new file mode 100644
index 0000000000..d89ad70d05
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f838245300ebfcf372cd.md
@@ -0,0 +1,80 @@
+---
+id: 6761f838245300ebfcf372cd
+title: Task 117
+challengeType: 22
+dashedName: task-117
+---
+
+<!-- (audio) This should reduce the chances of unauthorized access to our data. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`This should reduce the chances of BLANK access to our data.`
+
+## --blanks--
+
+`unauthorized`
+
+### --feedback--
+
+This word describes something that is not allowed or approved. It starts with `un-` to show the negative form.
+
+# --explanation--
+
+`Unauthorized` means **not allowed** or **not approved**. It is formed by adding the prefix `un-` to the root word `authorized`, which means permitted or approved. For example:
+
+`Unauthorized users tried to access the system.` - This means users who did not have permission attempted to get in.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
new file mode 100644
index 0000000000..86bfe5f3aa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6761f9d7a849d8f61aa12deb.md
@@ -0,0 +1,119 @@
+---
+id: 6761f9d7a849d8f61aa12deb
+title: Task 118
+challengeType: 19
+dashedName: task-118
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What problem is Jake trying to solve by implementing parameterized queries?
+
+## --answers--
+
+Data not being backed up correctly.
+
+### --feedback--
+
+Jake does not mention anything about data backups. Focus on the issue he wants to minimize.
+
+---
+
+Errors in the database caused by broken queries.
+
+### --feedback--
+
+Jake talks about minimizing risk, not fixing broken queries or errors.
+
+---
+
+Slow database performance when handling queries.
+
+### --feedback--
+
+Jake's goal is related to security, not improving database speed or performance.
+
+---
+
+Unauthorized access to data.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, listen for the words:
+
+`Should reduce` shows Jake's intention to make something smaller or less likely.
+
+`Unauthorized access` refers to someone without permission trying to view or use data.
+
+Jake says `this should reduce the chances of unauthorized access to our data`.
+
+This shows his plan is to minimize a security risk, not to fix backups, errors, or improve database performance.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5,
+      "finishTime": 8.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
new file mode 100644
index 0000000000..57f418be46
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762dceeac22841f223b0101.md
@@ -0,0 +1,96 @@
+---
+id: 6762dceeac22841f223b0101
+title: Task 119
+challengeType: 19
+dashedName: task-119
+---
+
+<!-- (audio) Jake: We're going to implement parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data. -->
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which option is the best answer to show support to Jake's plan?
+
+## --answers--
+
+`That sounds like a solid plan.`
+
+---
+
+`Let's focus on other issues for now.`
+
+### --feedback--
+
+This response does not address Jake's plan and shifts attention away from his suggestion.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The phrase `That sounds like a solid plan` is supportive because it shows agreement and confidence in the idea.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 13.16,
+      "finishTimestamp": 20.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "We're going to implement parameterized queries to minimize the risk.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5,
+      "finishTime": 8.46,
+      "dialogue": {
+        "text": "This should reduce the chances of unauthorized access to our data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
new file mode 100644
index 0000000000..8a89f9d9e9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e2adb437563844364cf1.md
@@ -0,0 +1,108 @@
+---
+id: 6762e2adb437563844364cf1
+title: Task 120
+challengeType: 19
+dashedName: task-120
+---
+
+<!-- (audio) Maria: That sounds like a solid plan. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's Maria's opinion about Jake's plan?
+
+## --answers--
+
+She thinks it is a good idea.
+
+---
+
+She thinks it is risky and might not minimize the problem.
+
+### --feedback--
+
+Maria does not mention any doubts or risks. Listen to how she uses the word `solid` to show support.
+
+---
+
+She thinks it needs more details to be effective.
+
+### --feedback--
+
+Maria does not suggest adding details. Her response shows confidence in the plan as it is.
+
+---
+
+She thinks it will require additional resources to work.
+
+### --feedback--
+
+Maria's response does not mention resources. She expresses agreement and support for Jake's plan.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Solid` means strong, reliable, and effective. It suggests that the plan is well thought out and likely to succeed.
+
+`Plan` refers to an organized strategy to solve a problem.
+
+`That sounds like a solid plan` shows support and confidence in Jake's idea. For example:
+
+`That sounds like a solid plan to improve security.` - This shows agreement and belief that the idea is dependable.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.96,
+      "finishTimestamp": 22.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.46,
+      "dialogue": {
+        "text": "That sounds like a solid plan.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 2.96
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
new file mode 100644
index 0000000000..a92c835f0b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762e430c7646a422c17966f.md
@@ -0,0 +1,104 @@
+---
+id: 6762e430c7646a422c17966f
+title: Task 121
+challengeType: 22
+dashedName: task-121
+---
+
+<!-- (audio) Maria: Are we going to require additional training for our developers? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are we going to BLANK BLANK BLANK for our developers?`
+
+## --blanks--
+
+`require`
+
+### --feedback--
+
+This verb means something is needed or necessary.
+
+---
+
+`additional`
+
+### --feedback--
+
+This word means extra or more. It is used to describe something that is added to what already exists.
+
+---
+
+`training`
+
+### --feedback--
+
+This word refers to the process of teaching or learning skills needed for a job or task.
+
+# --explanation--
+
+`Require` means to need or make something necessary. For example:
+
+`The job requires technical knowledge.` - This means technical knowledge is needed for the job.
+
+`Additional` means extra or more than what already exists. For example:
+
+`The project requires additional resources.` - This means extra resources are needed.
+
+`Training` refers to the process of learning or improving skills for a specific purpose. For example:
+
+`The company provided training for the new software.` - This means the company helped employees learn how to use the software.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.62,
+      "finishTimestamp": 25.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "Are we going to require additional training for our developers?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
new file mode 100644
index 0000000000..478b3fc00f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762edd89388ad7b3950d01a.md
@@ -0,0 +1,108 @@
+---
+id: 6762edd89388ad7b3950d01a
+title: Task 122
+challengeType: 19
+dashedName: task-122
+---
+
+<!-- (Audio) Maria: Are we going to require additional training for our developers? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If training is already complete.
+
+### --feedback--
+
+Maria is asking about something that might happen in the future, not the past.
+
+---
+
+If additional training will be required.
+
+---
+
+If training sessions are planned for managers.
+
+### --feedback--
+
+Maria's question is about developers, not managers.
+
+---
+
+If training will happen next week.
+
+### --feedback--
+
+Maria's question does not mention any specific time.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, focus on the parts of Maria's question:
+
+`Are we going to` indicates she is asking about a plan or action in the future.
+
+`Require additional training` means she is asking if more training is needed.
+
+`For our developers` specifies who might need the training.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 22.62,
+      "finishTimestamp": 25.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.96,
+      "dialogue": {
+        "text": "Are we going to require additional training for our developers?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
new file mode 100644
index 0000000000..66c38ed008
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6762f11f6a96d19057229bf2.md
@@ -0,0 +1,101 @@
+---
+id: 6762f11f6a96d19057229bf2
+title: Task 123
+challengeType: 22
+dashedName: task-123
+---
+
+<!-- (Audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, we're BLANK BLANK a session next week to ensure everyone knows how to implement these changes.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together indicate a planned action in the future. The first word is a verb ending in `-ing`, and the second is a preposition.
+
+---
+
+`hold`
+
+### --feedback--
+
+This means to organize or conduct an event, like a meeting or session.
+
+# --explanation--
+
+`Going to` indicates a future plan or intention. It is often used to talk about actions that are already decided or likely to happen.
+
+`Hold` refers to organizing or conducting an event, like a meeting, session, or training. For example:
+
+- `We're going to organize a team meeting next Monday.` - This shows a planned action in the near future.
+
+- `They are going to hold a workshop on software updates.` - This highlights a scheduled event for sharing knowledge or training.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
new file mode 100644
index 0000000000..7619da2910
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676320cd1c9cee55ab53687a.md
@@ -0,0 +1,113 @@
+---
+id: 676320cd1c9cee55ab53687a
+title: Task 124
+challengeType: 19
+dashedName: task-124
+---
+
+<!-- (audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is the next session going to happen?
+
+## --answers--
+
+This week
+
+### --feedback--
+
+Listen carefully to the audio. Jake does not say the session will happen during the current week.
+
+---
+
+Last week
+
+### --feedback--
+
+Jake is talking about a future session, not one that has already happened.
+
+---
+
+In a couple of weeks
+
+### --feedback--
+
+Jake mentions a specific time, not two weeks from now.
+
+---
+
+Next week
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+To find the correct answer, pay attention to the words that come after `hold a session`. Jake says, `next week`, which tells you the session will happen in the week after this one.
+
+`Next week` means the week following the current one. For instance, if today is Tuesday, `next week` starts on the following Sunday or Monday.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
new file mode 100644
index 0000000000..48cf723159
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676321f8a8692b5d4b211dde.md
@@ -0,0 +1,113 @@
+---
+id: 676321f8a8692b5d4b211dde
+title: Task 125
+challengeType: 19
+dashedName: task-125
+---
+
+<!-- (audio) Jake: Yes, we're going to hold a session next week to ensure everyone knows how to implement these changes. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why are they holding this meeting?
+
+## --answers--
+
+To make sure everyone understands how to apply the changes.
+
+---
+
+To discuss new changes they might make.
+
+### --feedback--
+
+Jake does not say they are planning changes, but how to implement the current ones.
+
+---
+
+To share updates about the company.
+
+### --feedback--
+
+The meeting is not about general updates but about specific changes.
+
+---
+
+To ensure everyone finishes their work on time.
+
+### --feedback--
+
+Jake does not mention deadlines or completing work in the audio.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To answer this question, focus on Jake's purpose for the session. He says, `to ensure everyone knows how to implement these changes`.
+
+The options "To make sure everyone understands how to apply the changes", matches the purpose described in the audio.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.82,
+      "finishTimestamp": 30.88
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.38,
+      "dialogue": {
+        "text": "Yes. We're going to hold the session next week",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.38,
+      "finishTime": 6.06,
+      "dialogue": {
+        "text": "to ensure everyone knows how to implement these changes.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
new file mode 100644
index 0000000000..05591d1d24
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632267336dcf6068f39407.md
@@ -0,0 +1,110 @@
+---
+id: 67632267336dcf6068f39407
+title: Task 126
+challengeType: 19
+dashedName: task-126
+---
+
+<!-- (audio) Jake: It's crucial that we all follow best practices. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What's important to Jake?
+
+## --answers--
+
+That everyone works hard.
+
+### --feedback--
+
+Jake does not talk about working hard in the audio.
+
+---
+
+That everyone follows best practices.
+
+---
+
+That everyone follows their own rules.
+
+### --feedback--
+
+Jake does not say anything about following personal rules.
+
+---
+
+That everyone communicates well.
+
+### --feedback--
+
+Jake does not mention communication as important.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the correct answer, break down the key words in the audio:
+
+`Crucial` means very important. Jake is talking about something that must be done.
+
+`Follow` means to do or obey something.
+
+`Best practices` refers to the best and most effective ways to do something.
+
+Jake says, `It's crucial that we all follow best practices`. This shows that he thinks it is very important for everyone to use the best methods when working.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.94,
+      "finishTimestamp": 33.98
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "It's crucial that we all follow best practices.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
new file mode 100644
index 0000000000..39ef7348e1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763238e902cdf688f49152f.md
@@ -0,0 +1,92 @@
+---
+id: 6763238e902cdf688f49152f
+title: Task 127
+challengeType: 22
+dashedName: task-127
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I'm BLANK BLANK the team about the upcoming training.`
+
+## --blanks--
+
+`going to`
+
+### --feedback--
+
+These two words together show that Maria is talking about something planned in the future. The first word is a verb ending in `-ing`, and the second is a preposition.
+
+---
+
+`inform`
+
+### --feedback--
+
+This word means to give information or tell someone about something.
+
+# --explanation--
+
+`Going to` shows that Maria is talking about something planned or decided for the future. For example:
+
+`I'm going to visit the headquarters tomorrow.` - it means the visit is planned.
+
+`Inform` means to give information or notify someone. For example:
+
+`He will inform his team leader about the issue.` - It means he will tell the team leader about the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
new file mode 100644
index 0000000000..018ccabf15
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763251d0b7d8872b5543df8.md
@@ -0,0 +1,116 @@
+---
+id: 6763251d0b7d8872b5543df8
+title: Task 128
+challengeType: 19
+dashedName: task-128
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Maria planning to do?
+
+## --answers--
+
+To attend a training session.
+
+### --feedback--
+
+Maria does not say she will attend the training.
+
+---
+
+To organize the training for the team.
+
+### --feedback--
+
+Maria does not mention organizing the training.
+
+---
+
+To inform the team about the upcoming training.
+
+---
+
+To ask the team about their training needs.
+
+### --feedback--
+
+Maria does not say anything about asking the team questions. She is going to provide information.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+To find the correct answer, focus on Maria's words in the audio:
+
+`I'm going to` shows her plan for the future.
+
+`Inform the team` tell us what Maria is planning to do.
+
+Maria's exact plan is to inform the team about something specific.
+
+`Upcoming` means something that will happen soon. For example:
+
+`We have an upcoming meeting next week.` - This means the meeting is scheduled for the near future.
+
+`Upcoming training` means a training session that is planned to take place soon.
+
+Together, the phrase shows Maria's responsibility to give information about the training that will happen in the near future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
new file mode 100644
index 0000000000..c96250b419
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676325dfad1ee0784c7f1a5e.md
@@ -0,0 +1,88 @@
+---
+id: 676325dfad1ee0784c7f1a5e
+title: Task 129
+challengeType: 19
+dashedName: task-129
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Maria wants to confirm if she needs to do more things. Which option is the best?
+
+## --answers--
+
+`Is there anything else we need to do?`
+
+---
+
+`Should I inform them now or later?`
+
+### --feedback--
+
+This question focuses on timing, not whether more tasks are required.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The best option is `Is there anything else we need to do?` because it directly asks about whether there are more tasks to complete.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 37.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.52,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.02
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
new file mode 100644
index 0000000000..1184550212
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763271c3d195780a672e061.md
@@ -0,0 +1,121 @@
+---
+id: 6763271c3d195780a672e061
+title: Task 130
+challengeType: 19
+dashedName: task-130
+---
+
+<!-- (audio) Maria: I'm going to inform the team about the upcoming training. Is there anything else we need to do? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+When the training will happen.
+
+### --feedback--
+
+Maria is not asking about the time of the training.
+
+---
+
+Who needs to be informed about the training.
+
+### --feedback--
+
+Maria is not asking about who should be informed.
+
+---
+
+How to organize the training.
+
+### --feedback--
+
+Maria is not asking about how to organize the training.
+
+---
+
+If there are more tasks to complete.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Anything` means any item, task, or thing.
+
+`Else` means in addition to what has already been mentioned.
+
+Together, `anything else` means "any other things". For example:
+
+- `Do you need anything else before I leave?` - This asks if the person needs more help or items.
+
+- `Is there anything else on the agenda?` - This asks if there are more topics to discuss.
+
+Maria says, `Is there anything else we need to do?` This shows she wants to know if there are more tasks she needs to do beyond informing the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.7,
+      "finishTimestamp": 38.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.42,
+      "dialogue": {
+        "text": "I'm going to inform the team about the upcoming training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3.8,
+      "finishTime": 5.1,
+      "dialogue": {
+        "text": "Is there anything else we need to do?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
new file mode 100644
index 0000000000..330c8abfcb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763285df9a9b6039696c389.md
@@ -0,0 +1,92 @@
+---
+id: 6763285df9a9b6039696c389
+title: Task 131
+challengeType: 22
+dashedName: task-131
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We're going to BLANK the database activity more BLANK.`
+
+## --blanks--
+
+`monitor`
+
+### --feedback--
+
+This word means to watch or check something carefully.
+
+---
+
+`closely`
+
+### --feedback--
+
+This word means in a careful or detailed way.
+
+# --explanation--
+
+The verb `monitor` means to watch or check something, especially in a business or technical setting. For example:
+
+`Managers monitor employee productivity to meet project deadlines.` - This means they check progress regularly to make sure work is on track.
+
+`Closely` means to do something in a careful or detailed way. For example:
+
+`The team is reviewing the security logs closely for any unusual activity.` - This means they are looking carefully at the logs for problems.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 41.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.72,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
new file mode 100644
index 0000000000..24b821538d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632a419a12aa10b1e76954.md
@@ -0,0 +1,110 @@
+---
+id: 67632a419a12aa10b1e76954
+title: Task 132
+challengeType: 19
+dashedName: task-132
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is going to be monitored?
+
+## --answers--
+
+The database activity
+
+---
+
+The server performance
+
+### --feedback--
+
+Jake does not mention monitoring the server performance.
+
+---
+
+The team's tasks
+
+### --feedback--
+
+Jake does not talk about monitoring the team's tasks.
+
+---
+
+The system logs
+
+### --feedback--
+
+Jake does not say anything about monitoring system logs.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Database` refers to a system where data is stored and organized.
+
+`Activity` refers to the actions or processes happening in the database.
+
+- `The database contains customer information and order details.` - This means the database stores important business data.
+
+- `There was unusual activity in the database last night.` - This means something unexpected happened in the database.
+
+Together, `database activity` means all the actions, changes, or processes happening within the database system.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.02,
+      "finishTimestamp": 41.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.82,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
new file mode 100644
index 0000000000..370fdcce77
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632cefda53f021ab6ecfb4.md
@@ -0,0 +1,100 @@
+---
+id: 67632cefda53f021ab6ecfb4
+title: Task 133
+challengeType: 22
+dashedName: task-133
+---
+
+<!-- (audio) This will help us catch any suspicious patterns early. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`This will BLANK BLANK BLANK any suspicious patterns early.`
+
+## --blanks--
+
+`help`
+
+### --feedback--
+
+This word means to assist or make something easier.
+
+---
+
+`us`
+
+### --feedback--
+
+This word refers to the group or team being talked about.
+
+---
+
+`catch`
+
+### --feedback--
+
+This word means to find or notice something.
+
+# --explanation--
+
+`Help` means to make it easier to do something or to provide assistance.
+
+`Catch` means to find, notice, or identify something. For example:
+
+`The system is designed to catch errors in real-time.` - This means the system finds mistakes as they happen.
+
+`Help us catch` means to assist in identifying something.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 41.96,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
new file mode 100644
index 0000000000..00d7873654
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632e1b477101295cf2fc77.md
@@ -0,0 +1,119 @@
+---
+id: 67632e1b477101295cf2fc77
+title: Task 134
+challengeType: 19
+dashedName: task-134
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why is Jake planning to monitor the database activity more closely?
+
+## --answers--
+
+To catch suspicious patterns early.
+
+---
+
+To improve the database structure.
+
+### --feedback--
+
+Jake does not mention improving the database structure.
+
+---
+
+To monitor the team's productivity.
+
+### --feedback--
+
+Jake is talking about monitoring database activity, not the team.
+
+---
+
+To track system performance over time.
+
+### --feedback--
+
+Jake does not mention tracking system performance over time.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Jake says, `This will help us catch any suspicious patterns early.` Let's break down what he means.
+
+`Help us catch` means to make it easier for the team to find or notice something.
+
+`Suspicious patterns` refers to activities or changes in the database that seem unusual or could signal potential problems, such as unauthorized access or errors in the data.
+
+`Early` means finding these patterns as soon as possible, before they can cause significant harm.
+
+Together, Jake's statement means that by monitoring the database closely, the team can quickly find and fix any unusual activity before it becomes a bigger issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.84,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
new file mode 100644
index 0000000000..05aaa1bfaf
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67632f1219de712fcf37d295.md
@@ -0,0 +1,99 @@
+---
+id: 67632f1219de712fcf37d295
+title: Task 135
+challengeType: 19
+dashedName: task-135
+---
+
+<!-- (audio) Jake: We're going to monitor the database activity more closely. This will help us catch any suspicious patterns early. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Maria thinks Jake's plan is important and useful. Which option better reflects that?
+
+## --answers--
+
+`Do you really think this will work?`
+
+### --feedback--
+
+This question shows doubt, not agreement with Jake's plan.
+
+---
+
+`I think this is going to make a big difference in our security.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`I think this is going to make a big difference in our security.` shows that Maria agrees with Jake's plan and thinks it is valuable.
+
+`Do you really think this will work?` shows doubt.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 39.12,
+      "finishTimestamp": 45.08
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "We're going to monitor the database activity more closely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.84,
+      "finishTime": 6.96,
+      "dialogue": {
+        "text": "This will help us catch any suspicious patterns early.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.46
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
new file mode 100644
index 0000000000..d02747ff4c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633077c55c0f38b9166323.md
@@ -0,0 +1,108 @@
+---
+id: 67633077c55c0f38b9166323
+title: Task 136
+challengeType: 22
+dashedName: task-136
+---
+
+<!-- (audio) Maria: Great. I think this is going to make a big difference in our security. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Great. I think this is going to BLANK BLANK BLANK BLANK in our security.`
+
+## --blanks--
+
+`make`
+
+### --feedback--
+
+This word means to create or cause something to happen.
+
+---
+
+`a`
+
+### --feedback--
+
+This is an article used before singular nouns.
+
+---
+
+`big`
+
+### --feedback--
+
+This word means large or significant.
+
+---
+
+`difference`
+
+### --feedback--
+
+This word means a change or effect on something.
+
+# --explanation--
+
+`Make` means to cause something to happen or exist.
+
+`A big difference` means a significant or noticeable change or improvement.
+
+Together, `make a big difference` means to cause something to improve or become better in an important way. For example:
+
+`Updating our software will make a big difference in system performance.` - This means the update will improve how the system works.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.58,
+      "finishTimestamp": 48.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.76,
+      "dialogue": {
+        "text": "Great. I think this is going to make a big difference in our security.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
new file mode 100644
index 0000000000..7352992b2d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763322b77048c43b92f9c28.md
@@ -0,0 +1,102 @@
+---
+id: 6763322b77048c43b92f9c28
+title: Task 137
+challengeType: 19
+dashedName: task-137
+---
+
+<!-- (audio) Maria: Great. I think this is going to make a big difference in our security. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does Maria think the changes will have an impact on security?
+
+## --answers--
+
+The changes already improved security.
+
+### --feedback--
+
+Maria does not say the changes have already happened. She is talking about the future.
+
+---
+
+The changes are currently improving security.
+
+### --feedback--
+
+Maria is not referring to something happening now. She is talking about what will happen later.
+
+---
+
+The changes might improve security someday.
+
+### --feedback--
+
+Maria is confident about the changes making an impact, not uncertain.
+
+---
+
+The changes will improve security in the future.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Maria says, `I think this is going to make a big difference in our security.` The phrase `is going to` shows that Maria is talking about the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.58,
+      "finishTimestamp": 48.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.76,
+      "dialogue": {
+        "text": "Great. I think this is going to make a big difference in our security.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.26
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
new file mode 100644
index 0000000000..45580e5d90
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633424bfc56f4fec3edf3c.md
@@ -0,0 +1,98 @@
+---
+id: 67633424bfc56f4fec3edf3c
+title: Task 138
+challengeType: 22
+dashedName: task-138
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Are we going to BLANK BLANK BLANK with other departments?`
+
+## --blanks--
+
+`share`
+
+### --feedback--
+
+This is a verb that means to give something to others or use it together.
+
+---
+
+`this`
+
+### --feedback--
+
+This is a demonstrative pronoun that refers to something specific being talked about.
+
+---
+
+`information`
+
+### --feedback--
+
+This is a noun that means knowledge or facts that are communicated.
+
+# --explanation--
+
+`Share` means to give something to others or to use it together.
+
+`This` is a demonstrative pronoun that refers to something specific, in this case, the information.
+
+`Information` refers to knowledge, data, or facts that are communicated.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
new file mode 100644
index 0000000000..64366032e9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676335dbbbe14c5acdafc970.md
@@ -0,0 +1,108 @@
+---
+id: 676335dbbbe14c5acdafc970
+title: Task 139
+challengeType: 19
+dashedName: task-139
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria want to know?
+
+## --answers--
+
+If the information will be shared with other departments.
+
+---
+
+If the departments need more information.
+
+### --feedback--
+
+Maria does not mention needing more information in her question.
+
+---
+
+When the information will be shared.
+
+### --feedback--
+
+Maria does not ask about the timing of sharing the information.
+
+---
+
+Why the information is important.
+
+### --feedback--
+
+Maria is not asking about the importance of the information.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the verb `share`. It means to give or make something available to others. Maria is asking if the information will be shared.
+
+`Other departments` tells you who might receive the information. Maria's question is specifically about these departments.
+
+The structure `Are we going to...` shows that Maria is asking about a plan for the future.
+
+By identifying these parts of the sentence, you can understand that Maria is asking whether the information will be shared with other departments.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
new file mode 100644
index 0000000000..6d267335bc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676338a796ace16be009e9d6.md
@@ -0,0 +1,89 @@
+---
+id: 676338a796ace16be009e9d6
+title: Task 140
+challengeType: 19
+dashedName: task-140
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Jake is still deciding what to do. What's the most appropriate answer to Maria's question?
+
+## --answers--
+
+`We'll probably do that after we've completed the training.`
+
+---
+
+`I think sharing this information is unnecessary.`
+
+### --feedback--
+
+This response contradicts the idea of considering sharing information.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The correct answer is `We'll probably do that after we've completed the training.` This response is appropriate because it aligns with Maria's question while emphasizing the need to complete the training first.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 51.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
new file mode 100644
index 0000000000..0d67d478c4
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676339b7a8460f7302b2d966.md
@@ -0,0 +1,98 @@
+---
+id: 676339b7a8460f7302b2d966
+title: Task 141
+challengeType: 22
+dashedName: task-141
+---
+
+<!-- (audio) Jake: We'll probably do that after we've completed the training. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We'll probably BLANK BLANK BLANK we've completed the training.`
+
+## --blanks--
+
+`do`
+
+### --feedback--
+
+This is a verb that means to perform or carry out an action.
+
+---
+
+`that`
+
+### --feedback--
+
+This is a demonstrative pronoun referring to something already mentioned.
+
+---
+
+`after`
+
+### --feedback--
+
+This is a conjunction that shows the sequence of events.
+
+# --explanation--
+
+`Do` means to perform or carry out an action.
+
+`That` is a demonstrative pronoun that refers to something already mentioned or understood. In this case, it refers to an action previously discussed.
+
+`After` is a conjunction that indicates the sequence of events.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 3.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
new file mode 100644
index 0000000000..feafb7ba43
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633a6ff2f2ef78701975c9.md
@@ -0,0 +1,136 @@
+---
+id: 67633a6ff2f2ef78701975c9
+title: Task 142
+challengeType: 19
+dashedName: task-142
+---
+
+<!-- (audio) Maria: Are we going to share this information with other departments? Jake: We'll probably do that after we've completed the training. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When is Jake planning to share the information with other departments?
+
+## --answers--
+
+Before they start the training.
+
+### --feedback--
+
+Jake mentions sharing the information after the training, not before.
+
+---
+
+After they've completed the training.
+
+---
+
+While the training is happening.
+
+### --feedback--
+
+Jake does not say they will share the information during the training.
+
+---
+
+He is not planning to share the information.
+
+### --feedback--
+
+Jake does mention sharing the information but plans to do so after the training.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`After we've completed` indicates that Jake is planning to share the information once the training is finished. Let's break it down:
+
+`After` shows the sequence of events, meaning the information will be shared following the training.
+
+`Completed the training` means finishing the training sessions or program.
+
+Together, this means Jake's plan is to share the information only once the training is fully done.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.74,
+      "finishTimestamp": 53.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.28,
+      "dialogue": {
+        "text": "Are we going to share this information with other departments?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.47
+    },
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 3.47
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.66,
+      "finishTime": 5.86,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.36
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
new file mode 100644
index 0000000000..46676e6f22
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b012085337c52b93096.md
@@ -0,0 +1,92 @@
+---
+id: 67633b012085337c52b93096
+title: Task 143
+challengeType: 22
+dashedName: task-143
+---
+
+<!-- (audio) Jake: It's better to ensure our team is fully prepared first. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It's better to ensure our team is BLANK BLANK first.`
+
+## --blanks--
+
+`fully`
+
+### --feedback--
+
+This is an adverb meaning completely or entirely.
+
+---
+
+`prepared`
+
+### --feedback--
+
+This is an adjective meaning ready or equipped to do something.
+
+# --explanation--
+
+`Fully` means completely or entirely. It shows that no part of the task or readiness is incomplete. For example:
+
+`The project was fully reviewed before the deadline.` - This means the review was completed entirely.
+
+`Prepared` means ready or equipped to do something. For example:
+
+`The team is prepared to present their findings.` - This means the team is ready to give the presentation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 53.6,
+      "finishTimestamp": 56.44
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.84,
+      "dialogue": {
+        "text": "It's better to ensure our team is fully prepared first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.34
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
new file mode 100644
index 0000000000..11dbacc17f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633b85c9f913803fd8591c.md
@@ -0,0 +1,111 @@
+---
+id: 67633b85c9f913803fd8591c
+title: Task 144
+challengeType: 19
+dashedName: task-144
+---
+
+<!-- (audio) Jake: We'll probably do that after we've completed the training. It's better to ensure our team is fully prepared first. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why doesn't Jake want to inform other departments before the training?
+
+## --answers--
+
+Because the team is already prepared.
+
+### --feedback--
+
+Jake does not say the team is already prepared. He talks about the need to prepare them first.
+
+---
+
+Because the other departments don't need the information.
+
+### --feedback--
+
+Jake does not mention that the other departments don't need the information.
+
+---
+
+Because the team needs to be fully prepared first.
+
+---
+
+Because the training is not important.
+
+### --feedback--
+
+Jake does not imply that the training is unimportant. In fact, he emphasizes its importance.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Fully prepared` means completely ready. Jake wants the team to be ready before sharing the information.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_5-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.4,
+      "finishTimestamp": 56.44
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "We'll probably do that after we've completed the training.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.04,
+      "dialogue": {
+        "text": "It's better to ensure our team is fully prepared first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 6.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
new file mode 100644
index 0000000000..94d9f6467b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67633d331eeb858a9803794f.md
@@ -0,0 +1,97 @@
+---
+id: 67633d331eeb858a9803794f
+title: Task 145
+challengeType: 22
+dashedName: task-145
+---
+
+<!-- REVIEW -->
+
+# --description--
+
+This is a review of the entire dialogue you just studied.
+
+# --instructions--
+
+Place the following phrases in the correct spot:
+
+`going to hold`, `going to need`, `monitor`, `do that after`, `require`, `implement`, and `are you going to`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Jake: I've been looking into our database security, and I think we're BLANK some additional measures to prevent SQL injection attacks.`
+
+`Maria: I agree. We've been noticing some unusual queries in the logs. What BLANK recommend to improve security?`
+
+`Jake: We're going to BLANK parameterized queries to minimize the risk. This should reduce the chances of unauthorized access to our data.`
+
+`Maria: That sounds like a solid plan. Are we going to BLANK additional training for our developers?`
+
+`Jake: Yes, we're BLANK a session next week to ensure everyone knows how to implement these changes. It's crucial that we all follow best practices.`
+
+`Maria: I'm going to inform the team about the upcoming training. Is there anything else we need to do?`
+
+`Jake: We're going to BLANK the database activity more closely. This will help us catch any suspicious patterns early.`
+
+`Maria: Great. I think this is going to make a big difference in our security. Are we going to share this information with other departments?`
+
+`Jake: We'll probably BLANK we've completed the training. It's better to ensure our team is fully prepared first.`
+
+## --blanks--
+
+`going to need`
+
+### --feedback--
+
+This phrase uses the `Future Simple` tense and indicates something necessary in the future.
+
+---
+
+`are you going to`
+
+### --feedback--
+
+This question uses the `Future Simple` tense to ask about plans or intentions.
+
+---
+
+`implement`
+
+### --feedback--
+
+This verb means to put something into practice or carry out a plan.
+
+---
+
+`require`
+
+### --feedback--
+
+This verb means to need or make something necessary.
+
+---
+
+`going to hold`
+
+### --feedback--
+
+This phrase uses the `Future Simple` tense to talk about scheduling or planning an event.
+
+---
+
+`monitor`
+
+### --feedback--
+
+This verb means to watch or check something carefully.
+
+---
+
+`do that after`
+
+### --feedback--
+
+This phrase combines a verb and a preposition to indicate completing one action following another.
+
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
new file mode 100644
index 0000000000..421bf93f13
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634107b478caa17f37c628.md
@@ -0,0 +1,72 @@
+---
+id: 67634107b478caa17f37c628
+title: Task 146
+challengeType: 19
+dashedName: task-146
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What is the purpose of the training mentioned in the text?
+
+## --answers--
+
+To improve the team's skills and reduce security risks.
+
+---
+
+To teach the team about project deadlines.
+
+### --feedback--
+
+The text does not mention anything about project deadlines.
+
+---
+
+To explain how to share updates with other departments.
+
+### --feedback--
+
+Sharing updates is mentioned at the end of the training but is not the main purpose of the training.
+
+---
+
+To monitor every department's activity.
+
+### --feedback--
+
+The text focuses on monitoring database activity, not department activity.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The purpose of the training is to improve the team's skills and reduce security risks. Let's break it down:
+
+The text begins with, `To protect our databases from threats like SQL injection attacks`. The preposition `to` introduces the purpose of the entire training. It shows that the main goal is to protect the database from threats.
+
+The next part, `we are going to focus on improving the team's skills`, explains how this purpose will be achieved. By improving their skills, the team will learn methods to address these threats effectively.
+
+The training is described as teaching developers `how to use parameterized queries and follow best practices`. These specific actions connect directly to reducing security risks, which ties back to the purpose stated at the beginning.
+
+By following this structure, you can conclude that the training is focused on improving skills to protect the database, making this the primary purpose of the session.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
new file mode 100644
index 0000000000..2ed677a913
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/67634294671bb8ac40e2cc85.md
@@ -0,0 +1,64 @@
+---
+id: 67634294671bb8ac40e2cc85
+title: Task 147
+challengeType: 19
+dashedName: task-147
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What actions are planned to reduce the risk of SQL injection attacks?
+
+## --answers--
+
+Running full system scans for hidden malware.
+
+### --feedback--
+
+The text does not mention running system scans to prevent SQL injection attacks.
+
+---
+
+Improving database structure with advanced tools.
+
+### --feedback--
+
+The text does not discuss changing the database structure as a preventive measure.
+
+---
+
+Teaching developers to use parameterized queries and follow best practices.
+
+---
+
+Monitoring network activity instead of database activity.
+
+### --feedback--
+
+The text emphasizes monitoring database activity, not network activity.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` These two actions are specifically mentioned as ways to reduce the risk of SQL injection attacks. 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
new file mode 100644
index 0000000000..2edbd8fa0a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/676342de292eafae91acee29.md
@@ -0,0 +1,64 @@
+---
+id: 676342de292eafae91acee29
+title: Task 148
+challengeType: 19
+dashedName: task-148
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+Who is going to participate in the training?
+
+## --answers--
+
+The project managers
+
+### --feedback--
+
+The text does not mention project managers as participants in the training.
+
+---
+
+The developers
+
+---
+
+The IT support team
+
+### --feedback--
+
+The IT support team is not mentioned as part of the training.
+
+---
+
+The clients
+
+### --feedback--
+
+The text does not mention clients participating in the training.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` This shows that developers are the ones participating in the training.  
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
new file mode 100644
index 0000000000..b2fdce00f2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-plan-future-events/6763432a8c2ae1b0de0e1fc0.md
@@ -0,0 +1,64 @@
+---
+id: 6763432a8c2ae1b0de0e1fc0
+title: Task 149
+challengeType: 19
+dashedName: task-149
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a message talking about the future training.
+
+`The Importance of Training for Database Security`
+
+`To protect our databases from threats like SQL injection attacks, we are going to focus on improving the team's skills. The training will teach developers how to use parameterized queries and follow best practices. These methods will help reduce the risk of unauthorized access to sensitive data.`
+
+`We are also going to discuss how to monitor database activity more closely. This will help the team find suspicious patterns early and respond quickly.`
+
+`At the end of the training, the team will be fully prepared to deal with new challenges and share important updates with other departments.`
+
+What will the training teach the team?
+
+## --answers--
+
+How to improve database performance.
+
+### --feedback--
+
+The text does not mention improving database performance as part of the training.
+
+---
+
+How to design new database structures.
+
+### --feedback--
+
+The training does not focus on creating new database structures.
+
+---
+
+How to secure network communications.
+
+### --feedback--
+
+The training focuses on database security, not network communications.
+
+---
+
+How to use parameterized queries and follow best practices.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The text states, `The training will teach developers how to use parameterized queries and follow best practices.` These are the two specific skills that the training will focus on. 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
index be23a7e272..87ec323ff2 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/66c8ffb7c913438ad893dcf2.md
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`BLANK received any detailed reports from users about this issue?`
+`BLANK any detailed reports from users about this issue?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
index b1682fdb15..b0bcc66654 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325a5443667173c717856f.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-111
 ---
 
-<!-- (audio) Linda: That’s true! You've been integrating UX into your work more than ever before. -->
+<!-- (audio) Linda: That's true! You've been integrating UX into your work more than ever before. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
index ce180fe911..f51c60f446 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67325bae5d23157c74091944.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-112
 ---
 
-<!-- (audio) Linda: That’s true! You've been integrating UX into your work more than ever before. -->
+<!-- (audio) Linda: That's true! You've been integrating UX into your work more than ever before. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
index 949d86af71..d4b8bda063 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326cb0e9a72b69d6efd417.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-123
 ---
 
-<!-- (audio) James: I’m happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
+<!-- (audio) James: I'm happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
index 027f1acbbf..4acd87ae3e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/67326fb4b198b97e4bcf4a69.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-125
 ---
 
-<!-- (audio) James: I’m happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
+<!-- (audio) James: I'm happy to hear that. After all, we're proactively enhancing the platform based on what we've learned. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
index 6b57edd965..305ba737ce 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-activities/6732800300eff4f49912e30f.md
@@ -17,7 +17,7 @@ Read the text and answer the question below.
 
 Linda posted an update about her team's development process:
 
-`Over the past year, we've been focusing on user feedback more than ever, and it's really changed our approach to development. Instead of just tackling technical issues, we're now looking at everything from the user’s perspective.`
+`Over the past year, we've been focusing on user feedback more than ever, and it's really changed our approach to development. Instead of just tackling technical issues, we're now looking at everything from the user's perspective.`
 
 `Last month, we rolled out a major update inspired by user feedback, and the response has been amazing. Now, rather than just reacting to issues, we're proactively making improvements based on what our users tell us.`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
index 4dc7c178b9..81c68a8aea 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/66609a1199ddd03548c45423.md
@@ -1,8 +1,8 @@
 ---
 id: 66609a1199ddd03548c45423
-title: "Dialogue 1: I'm Tom"
+title: "Dialogue 1: A Debugging Session Recap"
 challengeType: 21
-dashedName: dialogue-1-im-tom
+dashedName: dialogue-1-a-debugging-session-recap
 ---
 
 # --description--
@@ -17,42 +17,198 @@ dashedName: dialogue-1-im-tom
 
 ```json
 {
-  "setup": {
-    "background": "chaos.png",
-    "characters": [
-      {
-        "character": "David",
-        "position": {"x":50,"y":80,"z":8},
-        "opacity": 0
-      }
-    ],
-    "audio": {
-      "filename": "1.1-1.mp3",
-      "startTime": 1,
-      "startTimestamp": 5.7,
-      "finishTimestamp": 6.48
-    }
-  },
-  "commands": [
-    {
-      "character": "David",
-      "opacity": 1,
-      "startTime": 0
-    },
-    {
-      "character": "David",
-      "startTime": 1,
-      "finishTime": 0.78,
-      "dialogue": {
-        "text": "I'm Tom.",
-        "align": "center"
-      }
-    },
-    {
-      "character": "Tom",
-      "opacity": 0,
-      "startTime": 1.28
-    }
-  ]
+ "setup": {
+   "background": "interview-room3.png",
+   "characters": [
+     {
+       "character": "Lisa",
+       "position": { "x": -25, "y": 0, "z": 1 }
+     },
+     {
+       "character": "James",
+       "position": { "x": 125, "y": 0, "z": 1 }
+     }
+   ],
+   "audio": {
+     "filename": "B1_2-1.mp3",
+     "startTime": 1
+   },
+   "alwaysShowDialogue": true
+ },
+ "commands": [
+   {
+     "character": "Lisa",
+     "position": { "x": 25, "y": 0, "z": 1 },
+     "startTime": 0
+   },
+   {
+     "character": "James",
+     "position": { "x": 70, "y": 0, "z": 1 },
+     "startTime": 0.5
+   },
+   {
+     "character": "Lisa",
+     "startTime": 1,
+     "finishTime": 4.04,
+     "dialogue": {
+       "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 4.46,
+     "finishTime": 9.52,
+     "dialogue": {
+       "text": "Yes, I did. It was quite a hunt. First, I checked the recent changes we made to the code.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 9.86,
+     "finishTime": 10.86,
+     "dialogue": {
+       "text": "What did you find there?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 11.14,
+     "finishTime": 14.86,
+     "dialogue": {
+       "text": "Nothing at first. Then I reviewed the error logs more carefully.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 15.24,
+     "finishTime": 17.12,
+     "dialogue": {
+       "text": "That's when I noticed something odd.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 17.42,
+     "finishTime": 17.96,
+     "dialogue": {
+       "text": "What was it?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 18.3,
+     "finishTime": 20.78,
+     "dialogue": {
+       "text": "The system wasn't connecting to the database properly.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 21.16,
+     "finishTime": 26.36,
+     "dialogue": {
+       "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 26.86,
+     "finishTime": 29.48,
+     "dialogue": {
+       "text": "Ah, so the credentials were the issue. Did you fix them?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 29.48,
+     "finishTime": 33.78,
+     "dialogue": {
+       "text": "Yes, I updated the credentials and the connection was finally successful.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 34.1,
+     "finishTime": 35.58,
+     "dialogue": {
+       "text": "The app started working again.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 35.96,
+     "finishTime": 37.94,
+     "dialogue": {
+       "text": "Great job. Wasn't it stressful though?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 38.38,
+     "finishTime": 42.66,
+     "dialogue": {
+       "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 43.22,
+     "finishTime": 45.58,
+     "dialogue": {
+       "text": "Absolutely. Thanks for handling it, James.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 46.12,
+     "finishTime": 47.82,
+     "dialogue": {
+       "text": "Did anything else come up while you were debugging?",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "startTime": 48.3,
+     "finishTime": 52.6,
+     "dialogue": {
+       "text": "Not really. Everything else was running smoothly once the database issue was fixed.",
+       "align": "right"
+     }
+   },
+   {
+     "character": "Lisa",
+     "startTime": 53.12,
+     "finishTime": 57,
+     "dialogue": {
+       "text": "Perfect. Let's make sure we double check credentials after security updates in the future.",
+       "align": "left"
+     }
+   },
+   {
+     "character": "James",
+     "position": { "x": 125, "y": 0, "z": 1 },
+     "startTime": 57.5
+   },
+   {
+     "character": "Lisa",
+     "position": { "x": -25, "y": 0, "z": 1 },
+     "startTime": 58
+   }
+ ]
 }
 ```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
new file mode 100644
index 0000000000..e6326dbc47
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704f438e6e9120d5a1274c6.md
@@ -0,0 +1,106 @@
+---
+id: 6704f438e6e9120d5a1274c6
+title: Task 1
+challengeType: 19
+dashedName: task-1
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does the word `bug` mean in Lisa's question?
+
+## --answers--
+
+A small insect
+
+### --feedback--
+
+In the context of programming, a `bug` refers to an issue, not an insect.
+
+---
+
+A piece of hardware
+
+### --feedback--
+
+A `bug` refers to a software issue, not a physical component.
+
+---
+
+An error or flaw in the code
+
+---
+
+A new feature in the software
+
+### --feedback--
+
+A `bug` is not a feature; it's an unintended issue that needs to be fixed.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+A `bug` is an error, flaw, or fault in a computer program that causes it to produce incorrect or unexpected results. For example:
+
+- `I found a bug in the code.` - You discovered an error in the code.
+
+- `I am fixing a bug.` - You are working on solving a problem in the code.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
new file mode 100644
index 0000000000..1ec4342486
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fbd43885300e4aa221e9.md
@@ -0,0 +1,92 @@
+---
+id: 6704fbd43885300e4aa221e9
+title: Task 2
+challengeType: 22
+dashedName: task-2
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey, James. BLANK you BLANK that bug we were stuck on yesterday?`
+
+## --blanks--
+
+`Did`
+
+### --feedback--
+
+This word is used to form a question in the past tense. It's placed before the subject (`you`). Don't forget to capitalize it.
+
+---
+
+`find`
+
+### --feedback--
+
+This word means to locate or discover something, in its base form after `did` in questions.
+
+# --explanation--
+
+The `Simple Past` structure for forming questions starts with `did` + subject + base form of the verb. You use `did` to show the action happened in the past, but keep the main verb (e.g., `find`) in its base form. For example:
+
+- `Did they finish the report on time?` - You want to know if the report was concluded before it was due.
+
+- `Did she call you yesterday?` - You want to know if the person received a call the day before.
+
+In Lisa's question, `did you find` is the question form to ask if James located or identified the `bug` they were working on the day before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
new file mode 100644
index 0000000000..81fe3a3153
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6704fd952ad2560e9a7ca070.md
@@ -0,0 +1,108 @@
+---
+id: 6704fd952ad2560e9a7ca070
+title: Task 3
+challengeType: 19
+dashedName: task-3
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does the expression `stuck on` mean in this sentence?
+
+## --answers--
+
+To continuously work on something without any issues.
+
+### --feedback--
+
+While `stuck on` involves working on something, it specifically refers to being unable to make progress.
+
+---
+
+To be unable to solve or make progress on something.
+
+---
+
+To quickly solve a problem.
+
+### --feedback--
+
+`Stuck on` does not mean solving a problem quickly. It refers to facing difficulties or being unable to progress.
+
+---
+
+To ignore a problem.
+
+### --feedback--
+
+`Stuck on` means trying to solve something but being unable to move forward, not ignoring it.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The expression `stuck on` is used when someone is unable to move forward with a task or solve a problem. It suggests being trapped or unable to progress. For example:
+
+- `We were stuck on this code error for hours.` - We could not proceed until that error in the code was found.
+
+- `She got stuck on the final question of the exam.` - She spent a long time on the final question.
+
+In the dialogue, Lisa uses `stuck on` to describe how they were unable to make progress in solving a bug in their work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
new file mode 100644
index 0000000000..f091e7300b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705055b28e3c20fce27a15c.md
@@ -0,0 +1,92 @@
+---
+id: 6705055b28e3c20fce27a15c
+title: Task 4
+challengeType: 22
+dashedName: task-4
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Hey, James. Did you find that bug we were BLANK BLANK yesterday?`
+
+## --blanks--
+
+`stuck`
+
+### --feedback--
+
+This word means unable to move forward or solve a problem.
+
+---
+
+`on`
+
+### --feedback--
+
+This word shows the connection to the problem or task that was causing difficulty.
+
+# --explanation--
+
+The expression `stuck on` is used to describe a situation where someone is unable to make progress or solve an issue. It emphasizes being trapped or halted in a task. For example:
+
+- `I was stuck on that tricky math problem for hours.` - The problem made me waste a long time.
+
+- `We got stuck on deciding the best solution to the project's issues.` - We did not know the best solution and it took us a long time to find it.
+
+In this sentence, Lisa is referring to a bug they couldn't solve or fix the day before.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
new file mode 100644
index 0000000000..4aade2cd2a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050a8becee6d10619fa5ff.md
@@ -0,0 +1,92 @@
+---
+id: 67050a8becee6d10619fa5ff
+title: Task 5
+challengeType: 19
+dashedName: task-5
+---
+
+<!-- (Audio) Lisa: Hey, James. Did you find that bug we were stuck on yesterday? --> 
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could James tell Lisa that he found the bug using a very short answer to say it?
+
+## --answers--
+
+`Yes, I found it.`
+
+### --feedback--
+
+Short answers to questions that involve the `Simple Past` normally are `Yes,` + person + `did.` for affirmatives or `No,` + person + `didn't.` for negatives.
+
+---
+
+`Yes, I did.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When giving short answers to a question directed to you about something you did or did not do in the past, use `Yes, I did.` or `No, I didn't` to answer to them briefly. For example:
+
+- `Did you buy that car you wanted? No, I didn't.` - This means you did not buy the car.
+
+- `Did you pass the English test? Yes, I did` - This means you passed the test.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 0,
+      "finishTimestamp": 3.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Hey, James. Did you find that bug we were stuck on yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
new file mode 100644
index 0000000000..0cebfd16c3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67050fd29a37de112051064b.md
@@ -0,0 +1,84 @@
+---
+id: 67050fd29a37de112051064b
+title: Task 6
+challengeType: 22
+dashedName: task-6
+---
+
+<!-- (Audio) James: Yes, I did. It was quite a hunt. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I BLANK. It was quite a hunt.`
+
+## --blanks--
+
+`did`
+
+### --feedback--
+
+This word is used in short answers to confirm or emphasize an action in the past.
+
+# --explanation--
+
+Short answers in the `Simple Past` often use the auxiliary verb `did` to confirm or deny an action. This structure avoids repeating the full sentence while maintaining clarity. For example:
+
+Question: `Did you finish the project?` Short answer: `Yes, I did.`
+
+Question: `Did they call you back?` Short answer: `No, they didn't.`
+
+In the dialogue, James uses `Yes, I did` to confirm that he found the bug Lisa asked about.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.26,
+      "finishTimestamp": 5.34
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.08,
+      "dialogue": {
+        "text": "Yes, I did. It was quite a hunt.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
new file mode 100644
index 0000000000..c561e52141
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670515561e620a11f2d7308c.md
@@ -0,0 +1,113 @@
+---
+id: 670515561e620a11f2d7308c
+title: Task 7
+challengeType: 19
+dashedName: task-7
+---
+
+<!-- (Audio) James: Yes, I did. It was quite a hunt. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is the meaning of `quite a hunt` in James's answer?
+
+## --answers--
+
+It means a fast and easy search for something.
+
+### --feedback--
+
+`Quite a hunt` suggests difficulty, not an easy search.
+
+---
+
+It refers to an actual hunting activity, like searching for animals.
+
+### --feedback--
+
+The word `hunt` is used figuratively here, meaning a search for something.
+
+---
+
+It refers to a challenging or difficult search for something.
+
+---
+
+It means the bug was already fixed without any effort.
+
+### --feedback--
+
+`Quite a hunt` emphasizes that finding the bug required significant effort.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In this context, the word `hunt` is used figuratively to describe a focused search for something difficult to find. For example:
+
+- `It was a real hunt to track down that missing file.` - Finding the missing file was difficult.
+
+- `Finding the right apartment in the city was quite a hunt.` - We looked everywhere until we found the right apartment for us in this city.
+
+The expression `quite a/an` + noun is used to emphasize something as impressive, intense, or remarkable. For example:
+
+- `That was quite a show!` - This sentence emphasizes how impressive the show was.
+- `She gave quite an explanation.` - This sentence emphasizes that the explanation was thorough or detailed.
+
+Here, `quite a hunt` highlights that the search for the bug was challenging, intense, and significant.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 3.26,
+      "finishTimestamp": 5.34
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.08,
+      "dialogue": {
+        "text": "Yes, I did. It was quite a hunt.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
new file mode 100644
index 0000000000..146f720231
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705177d1d3dbb124955a397.md
@@ -0,0 +1,94 @@
+---
+id: 6705177d1d3dbb124955a397
+title: Task 8
+challengeType: 22
+dashedName: task-8
+---
+
+<!-- (Audio) James: First, I checked the recent changes we made to the code. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, I checked the BLANK changes we made to the code.`
+
+## --blanks--
+
+`First`
+
+### --feedback--
+
+This word is used to indicate the initial step or action in a sequence. As it is the first word in a sentence, do not forget to capitalize it.
+
+---
+
+`recent`
+
+### --feedback--
+
+This word describes something that happened or was made not long ago.
+
+# --explanation--
+
+In this sentence, `first` is used to show the initial action James took to debug the code. It indicates the start of a sequence of steps. Other examples of this usage include:
+
+- `First, we need to set up the database.` - This means setting up the database is the initial step.
+
+- `First, I turned on the computer.` - This means that before working on the computer, the initial thing I did was to turn it on.
+
+The word `recent` refers to something that happened or was made not long ago. It describes changes to the code that were made shortly before the bug was discovered. Another example:
+
+`The team discussed the most recent updates to the project.` - The updates that were talked about by the team were only the ones made in the last few days.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.5,
+      "finishTimestamp": 8.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.02,
+      "dialogue": {
+        "text": "First, I checked the recent changes we made to the code.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
new file mode 100644
index 0000000000..283565a56e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670518bd8ec6f012af235433.md
@@ -0,0 +1,96 @@
+---
+id: 670518bd8ec6f012af235433
+title: Task 9
+challengeType: 22
+dashedName: task-9
+---
+
+<!-- (Audio) James: First, I checked the recent changes we made to the code. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`First, I BLANK the recent changes we BLANK to the code.`
+
+## --blanks--
+
+`checked`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `check`, formed by adding `-ed` to the base verb.
+
+---
+
+`made`
+
+### --feedback--
+
+This is the `Simple Past` form of the irregular verb `make`, which does not follow the regular `-ed` pattern.
+
+# --explanation--
+
+You use the `Simple Past` tense in affirmative sentences when you want to talk about completed actions at a moment in the past.
+
+In the `Simple Past`, regular verbs like `check` are formed by adding `-ed` to the base verb. Irregular verbs, such as `make`, have unique forms that do not follow this rule. In James's sentence:
+
+`Checked` is the past form of the regular verb `check`, indicating an action that was completed in the past. For example:
+
+`He checked his email before the meeting.` - He looked at the e-mails at a moment in the past prior to the meeting.
+
+`Made` is the past form of the irregular verb `make`, indicating something that was created or done in the past. For example:
+
+`She made a list of items to buy.` - She created a list of what she wanted to buy before going to the store.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 5.5,
+      "finishTimestamp": 8.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.02,
+      "dialogue": {
+        "text": "First, I checked the recent changes we made to the code.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.52
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
new file mode 100644
index 0000000000..6b3c747577
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67051b185149b6130426a9ad.md
@@ -0,0 +1,114 @@
+---
+id: 67051b185149b6130426a9ad
+title: Task 10
+challengeType: 19
+dashedName: task-10
+---
+
+<!-- (Audio) Lisa: What did you find there? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+Why James found the bug.
+
+### --feedback--
+
+Lisa's question focuses on what James discovered, not on the reason for that.
+
+---
+
+When James found the bug.
+
+### --feedback--
+
+Lisa's question is not related to time. It's about what James found.
+
+---
+
+How James fixed the bug.
+
+### --feedback--
+
+Lisa isn't asking about the method or solution. She's asking for the result of James's search.
+
+---
+
+What James discovered.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+In the `Simple Past`, questions may start with a question word (e.g., `what`, `where`, `how`, `who`) using the following structure:
+
+**Question word + `did` + subject + base verb.**
+
+Lisa's question, `What did you find there?`, uses `what` to ask for specific information about the result of James's actions. Other examples include:
+
+- `Where did you go yesterday?` - You are asking about a location.
+
+- `How did they solve the problem?` - You are asking about a method.
+
+- `Who did you call last night?` - You are asking about a person.
+
+In the dialog, Lisa is asking about James's discovery while searching for the bug.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.86,
+      "finishTimestamp": 9.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.1,
+      "dialogue": {
+        "text": "What did you find there?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
new file mode 100644
index 0000000000..9019a032fa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053619dd65bd1459449bf0.md
@@ -0,0 +1,148 @@
+---
+id: 67053619dd65bd1459449bf0
+title: Task 11
+challengeType: 19
+dashedName: task-11
+---
+
+<!-- (Audio) Lisa: What did you find there? James: Nothing at first. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James discover initially?
+
+## --answers--
+
+He discovered nothing.
+
+---
+
+He discovered something.
+
+### --feedback--
+
+The expression James says doesn't say that he found something.
+
+---
+
+He found everything immediately.
+
+### --feedback--
+
+What James says contradicts the idea that he found everything.
+
+---
+
+He didn't look for anything.
+
+### --feedback--
+
+He was actually searching for something.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+James uses the word `nothing`, which indicates the absence of any discovery. For example:
+
+- `She found nothing unusual in the report.` -The report had the usual characteristics.
+
+- `We saw nothing strange during the test.` - It was a pretty common test.
+
+In contrast, in negative sentences, you'll use `anything` instead of `nothing`. For example:
+
+- Affirmative: `He found nothing.` - There were no discoveries.
+
+- Negative: `He didn't find anything.` - There were no discoveries.
+
+Notice that, in negative sentences and in questions with `did`, the main verb (in this case, `find`) is in its base form. The auxiliary verb `did` is what shows that this sentence is in the past tense. For example:
+
+- `They didn't find anything wrong with the program.` - Not finding anything was in the past.
+
+- `I didn't see anything unusual during the presentation.` - Nothing unusual was seen in the presentation that happened in the past.
+
+This structure helps avoid double negatives. James's answer, `Nothing at first`, reflects an affirmative sentence emphasizing that he couldn't find anything when he began his search.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.86,
+      "finishTimestamp": 11.04
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2,
+      "dialogue": {
+        "text": "What did you find there?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.14
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.14
+    },
+    {
+      "character": "James",
+      "startTime": 2.28,
+      "finishTime": 3.18,
+      "dialogue": {
+        "text": "Nothing at first.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
new file mode 100644
index 0000000000..55fb293609
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670538f8565fb514ddf24b85.md
@@ -0,0 +1,92 @@
+---
+id: 670538f8565fb514ddf24b85
+title: Task 12
+challengeType: 22
+dashedName: task-12
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK I reviewed the error logs more carefully.`
+
+## --blanks--
+
+`Then`
+
+### --feedback--
+
+This word is used to show the next step in a sequence of actions. It's in the beginning of the sentence, so don't forget to capitalize it.
+
+# --explanation--
+
+`Then` is used to indicate the next action in a sequence of events. It shows what happens after something else. For example:
+
+- `I turned on the computer, and then I opened my email.` - You only opened the email after turning on the computer.
+
+- `We fixed the bug, then we tested the application again.` - They only tested the application again after fixing the bug.
+
+In James's sentence, he uses `then` to explain the next action he took after checking the recent changes made to the code.
+
+Other words and phrases that can be used with the same meaning as `then` in this context are `after that` and `next`. For example:
+
+- `I checked the updates. After that, I started debugging.`
+
+- `I reviewed the requirements. Next, I shared my thoughts with the team.`.
+
+These words help structure descriptions of actions in chronological order.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
new file mode 100644
index 0000000000..c0c28e490c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053b9fe0a27715979bee1b.md
@@ -0,0 +1,94 @@
+---
+id: 67053b9fe0a27715979bee1b
+title: Task 13
+challengeType: 22
+dashedName: task-13
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Then I reviewed the BLANK BLANK more carefully.`
+
+## --blanks--
+
+`error`
+
+### --feedback--
+
+This word refers to mistakes or problems in a system or program.
+
+---
+
+`logs`
+
+### --feedback--
+
+This word refers to records or detailed reports of events or actions in a system.
+
+# --explanation--
+
+`Logs` generally means records or reports that document events, actions, or data over time. `Logs` are often used in technical contexts to track system activity. For example:
+
+`The server logs showed multiple login attempts.` - There is a record in the server of attempts of logging into it.
+
+`Error logs` specifically refer to records of system or application errors. These logs help identify issues by providing detailed information about what went wrong and when. For example:
+
+`The error logs revealed that the application crashed due to a missing file.` - In the record of issues or problems, you can see a missing file was the cause for the crash.
+
+In James's sentence, he refers to checking the `error logs` carefully to identify the source of a problem. These logs are essential for troubleshooting in programming.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
new file mode 100644
index 0000000000..921e911605
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053ea535fe23160e6b29c1.md
@@ -0,0 +1,96 @@
+---
+id: 67053ea535fe23160e6b29c1
+title: Task 14
+challengeType: 22
+dashedName: task-14
+---
+
+<!-- (Audio) James: Then I reviewed the error logs more carefully. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Then I reviewed the error logs BLANK BLANK.`
+
+## --blanks--
+
+`more`
+
+### --feedback--
+
+This word is used to indicate a higher degree or intensity.
+
+---
+
+`carefully`
+
+### --feedback--
+
+This word is an adverb that describes how the action was performed, with care.
+
+# --explanation--
+
+`More carefully` uses `more` to intensify the adverb `carefully`, which describes the way James reviewed the error logs. Adverbs like `carefully` modify verbs, showing how an action is performed.
+
+If you compare `more careful` and `more carefully`, the difference is in the fact that `more careful` is an adjective phrase describing a noun (person, place, or thing). For example:
+
+`She was more careful with her calculations.` - Here, `more careful` describes the subject/person, `she`.
+
+`More carefully` is an adverb phrase, which describes how the action is performed. For example:
+
+`She checked her calculations more carefully.` - It describes how the calculations were `checked` - in other words, it describes the action of `checking`, not the person who `checks`.
+
+In James's sentence, `more carefully` explains that James increased the level of attention or detail in the reviewing of the logs. It describes the review, not James.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 11.3,
+      "finishTimestamp": 13.86
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.56,
+      "dialogue": {
+        "text": "Then I reviewed the error logs more carefully.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.06
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
new file mode 100644
index 0000000000..af24cbccb4
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67053faa1471c916446ad615.md
@@ -0,0 +1,116 @@
+---
+id: 67053faa1471c916446ad615
+title: Task 15
+challengeType: 19
+dashedName: task-15
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James discover when reviewing the error logs?
+
+## --answers--
+
+He didn't discover anything.
+
+### --feedback--
+
+James explicitly states that he noticed `something`, meaning he found something.
+
+---
+
+He discovered something.
+
+---
+
+He discovered a common mistake.
+
+### --feedback--
+
+James mentions finding `something odd`. `Odd` is different from `common`.
+
+---
+
+He didn't look for anything.
+
+### --feedback--
+
+James was actively investigating and found something during his review.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Something` is used in affirmative sentences to indicate that a thing exists or happened. For example:
+
+- `He found something unusual in the logs.` - He discovered that the logs had a different thing from the usual.
+
+- `She noticed something during the meeting.` - One particular thing drew her attention during the meeting.
+
+In contrast, `anything` is used in negative sentences or questions. For example:
+
+- Negative: `He didn't find anything in the logs.` - The logs did not help him understand the problem.
+
+- Question: `Did she notice anything during the meeting?` - You are asking if she was able to see something during the meeting.
+
+In negative sentences with `did not` or `didn't`, the main verb remains in its base form (`find`, `notice` etc.), and `anything` is used instead of `something`.
+
+Here, James says, `That's when I noticed something odd`, meaning he found something during his review process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
new file mode 100644
index 0000000000..467d8d263f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670541bdd115c71686a398c3.md
@@ -0,0 +1,84 @@
+---
+id: 670541bdd115c71686a398c3
+title: Task 16
+challengeType: 22
+dashedName: task-16
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`That's when I noticed something BLANK.`
+
+## --blanks--
+
+`odd`
+
+### --feedback--
+
+This word means strange or unusual.
+
+# --explanation--
+
+`Odd` is used to describe something that is unusual, strange, or unexpected. It often refers to something that does not fit the norm or is out of the ordinary. For example:
+
+- `The system showed an odd behavior during the test.` - Meaning the system acted different from the normal.
+
+- `I saw an odd pattern in the data.` - Meaning the pattern in the data was different.
+
+In James's sentence, he uses `odd` to describe something he noticed that seemed strange or unexpected while reviewing the logs.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
new file mode 100644
index 0000000000..0dee3f856f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705425a4b3df216cb6de9a7.md
@@ -0,0 +1,94 @@
+---
+id: 6705425a4b3df216cb6de9a7
+title: Task 17
+challengeType: 19
+dashedName: task-17
+---
+
+<!-- (Audio) James: That's when I noticed something odd. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Lisa ask **in a short way** about James's discovery in the error logs?
+
+## --answers--
+
+`What was the odd thing that you found when you were reviewing the error logs?`
+
+### --feedback--
+
+Even though this is exactly what she wants to know, it is not a short question.
+
+---
+
+`What was it?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+James talks about `something odd`. Lisa asks him to identify what this odd thing (`it`) was by asking `What was it?`. `Was` is used because it is a singular thing (`something odd`) and it was found in the past, when James reviewed the error logs.
+
+Remember that, in questions, you normally invert verb and subject, so `it was` becomes `was it`. For example:
+
+- `It was fun!` - You're saying you liked an activity.
+
+- `Was it fun?` - You're asking the other person if they liked it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.12
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
new file mode 100644
index 0000000000..a2124d76af
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705442e6a6ebf1725bc8e1f.md
@@ -0,0 +1,142 @@
+---
+id: 6705442e6a6ebf1725bc8e1f
+title: Task 18
+challengeType: 19
+dashedName: task-18
+---
+
+<!-- (Audio) James: That's when I noticed something odd. Lisa: What was it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+She wants to know where it was.
+
+### --feedback--
+
+Lisa's question is not about the location of the problem, but about what James noticed.
+
+---
+
+She wants to know what it was.
+
+---
+
+She wants to know when it happened.
+
+### --feedback--
+
+Lisa's question is not about time. It's about identifying the odd thing.
+
+---
+
+She wants to know why it was odd.
+
+### --feedback--
+
+Lisa's question focuses on what the odd thing was, not about why James thought it was odd.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The verb `to be` in the `Simple Past` is used to describe or ask about states or characteristics in the past. The forms are `was` (singular) and `were` (plural). For example:
+
+- Affirmative: `The meeting was productive.` - You had a good opinion about the meeting
+
+- Negative: `The meeting wasn't productive.` - Your opinion about the meeting was that it was a waste of time.
+
+In questions, the verb `to be` and the subject are inverted. For example:
+
+- Affirmative sentence: `It was a bug.` - You're confirming the presence of a bug in the code.
+
+- Question: `Was it a bug?` - You want to know if it was a bug. Notice `was` goes before `it` here.
+
+In this dialogue, Lisa asks `What was it?` to ask James to identify what the `something odd` that he noticed was.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.24,
+      "finishTimestamp": 16.96
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.88,
+      "dialogue": {
+        "text": "That's when I noticed something odd.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.03
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 3.03
+    },
+    {
+      "character": "Lisa",
+      "startTime": 3.18,
+      "finishTime": 3.72,
+      "dialogue": {
+        "text": "What was it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
new file mode 100644
index 0000000000..771ccd9100
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705573e13b1211820a3ac67.md
@@ -0,0 +1,108 @@
+---
+id: 6705573e13b1211820a3ac67
+title: Task 19
+challengeType: 19
+dashedName: task-19
+---
+
+<!-- (Audio) James: The system wasn't connecting to the database properly. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did James find in the error logs?
+
+## --answers--
+
+The system was connecting to many databases at the same time.
+
+### --feedback--
+
+James states that the system wasn't connecting properly to the database. There is no mention of more than one database in the sentence.
+
+---
+
+The system was turned off.
+
+### --feedback--
+
+James didn't mention that the system was off. The issue was with its connection to the database.
+
+---
+
+The system wasn't connecting to the database properly.
+
+---
+
+There were no errors in the system.
+
+### --feedback--
+
+James found an error: the system wasn't connecting to the database.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The negative form of the verb `to be` in the `Simple Past` tense is `was not` or `wasn't` for singular subjects, and `were not` or `weren't` for plural subjects. It is used to describe something that did not happen or was not true. For example:
+
+- Singular: `The code wasn't running as expected.` - An issue was happening with the code.
+
+- Plural: `The changes weren't implemented correctly.` - Errors in the implementation caused the bugs.
+
+In James's sentence, he uses `wasn't` to explain that the system was failing to connect to the database. Negative sentences with `wasn't` or `weren't` indicate what did not occur or work as you might expect.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.3,
+      "finishTimestamp": 19.78
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "The system wasn't connecting to the database properly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
new file mode 100644
index 0000000000..d3012ef7e2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055872382df21871200427.md
@@ -0,0 +1,84 @@
+---
+id: 67055872382df21871200427
+title: Task 20
+challengeType: 22
+dashedName: task-20
+---
+
+<!-- (Audio) James: The system wasn't connecting to the database properly. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`The system wasn't connecting to the database BLANK.`
+
+## --blanks--
+
+`properly`
+
+### --feedback--
+
+This word means in the correct or appropriate way.
+
+# --explanation--
+
+`Properly` is the adverb form of the adjective `proper`. Both words can express doing something in the correct or suitable manner, but their usage differs depending on the sentence structure. For example:
+
+- `The application didn't function properly after the update.` - This means the updates brought errors to the code. The adverb `properly` modifies the verb `function`.
+
+- `This wasn't a proper configuration of the database.` - The adjective `proper` describes the noun `configuration`.
+
+Here, James uses `properly` to describe that the system wasn't connecting to the database in the correct way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.3,
+      "finishTimestamp": 19.78
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 3.48,
+      "dialogue": {
+        "text": "The system wasn't connecting to the database properly.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
new file mode 100644
index 0000000000..2a544ee3ca
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055c02b6774a18f8f7186f.md
@@ -0,0 +1,98 @@
+---
+id: 67055c02b6774a18f8f7186f
+title: Task 21
+challengeType: 22
+dashedName: task-21
+---
+
+<!-- (Audio) James: After that, I realized we didn't update the database credentials after the last security patch. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`After that, I realized we didn't update the database BLANK after the last security BLANK.`
+
+## --blanks--
+
+`credentials`
+
+### --feedback--
+
+This word refers to the username, password, or other information required to access a system.
+
+---
+
+`patch`
+
+### --feedback--
+
+This word refers to an update or fix applied to software or a system, often for security purposes.
+
+# --explanation--
+
+`Credentials` refers to information such as usernames, passwords, or keys that allow a user or system to access another system or resource. For example:
+
+- `Please enter your credentials to log in to the server.` - meaning you should insert your information to access the server.
+
+- `The credentials were incorrect, so the login failed.` - meaning the information you inserted is different from the one the system has in its database.
+
+A `patch` is an update or fix applied to software or systems to correct issues, improve functionality, or enhance security. For example:
+
+- `The developers released a patch to fix the bug.` - meaning they fixed the bug through an update to the system.
+
+- `Make sure to apply the latest security patch to protect your system.` - meaning the last security update will be able to protect your system better.
+
+Here, James explains that the issue was caused by forgetting to update the database `credentials` after applying a security `patch`.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.16,
+      "finishTimestamp": 25.36
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 6.2,
+      "dialogue": {
+        "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 6.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
new file mode 100644
index 0000000000..0bad385235
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055d274231051940d0c8ea.md
@@ -0,0 +1,94 @@
+---
+id: 67055d274231051940d0c8ea
+title: Task 22
+challengeType: 22
+dashedName: task-22
+---
+
+<!-- (Audio) James: After that, I realized we didn't update the database credentials after the last security patch. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK BLANK, I realized we didn't update the database credentials after the last security patch.`
+
+## --blanks--
+
+`After`
+
+### --feedback--
+
+The opposite of `before`. Capitalize it as it is in the beginning of a sentence.
+
+---
+
+`that`
+
+### --feedback--
+
+Demonstrative pronoun used when something is more distant from the speaker. When something is close to the speaker, you can use `this`.
+
+# --explanation--
+
+`After that` is used to show the order of events, meaning the next action or event followed something that happened previously. It helps organize actions in chronological order. For example:
+
+- `We finished the code review. After that, we started debugging.` - First, they reviewed the code. Then, they debugged it.
+
+- `He submitted the report. After that, he took a short break.` - First, he submitted the report. Then, he rested.
+
+`After that` is similar in meaning to expressions like `then` or `next`, but it specifically emphasizes that one action follows another in time.
+
+Here, James uses `after that` to indicate that realizing what the credentials issue was came after another action in the debugging process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.16,
+      "finishTimestamp": 25.36
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 6.2,
+      "dialogue": {
+        "text": "After that, I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 6.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
new file mode 100644
index 0000000000..271d3441ce
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67055f5c9bdb8e1999102827.md
@@ -0,0 +1,120 @@
+---
+id: 67055f5c9bdb8e1999102827
+title: Task 23
+challengeType: 19
+dashedName: task-23
+---
+
+<!-- (Audio) James: I realized we didn't update the database credentials after the last security patch. Lisa: Ah, so the credentials were the issue. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+After these lines, Lisa then asks James if he solved the problem. How could she ask that **in a brief way**?
+
+## --answers--
+
+`Did you fix the credentials that were causing the issue?`
+
+### --feedback--
+
+That is indeed what she wants to know, but she asks a much shorter question than this one.
+
+---
+
+`Did you fix them?`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When talking about something you already mentioned before, you can use `it` to replace it if it is a singular noun or `them` if it is a plural noun to avoid repetition. For example:
+
+- `You were looking for a car to buy. Did you buy it?` - `It` is used instead of `the car` in the question.
+
+- `How were your tests last week? Did you do well on all of them?` - `Them` replaces `your tests` here.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 20.88,
+      "finishTimestamp": 27.62
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "I realized we didn't update the database credentials after the last security patch.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.73
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 5.73
+    },
+    {
+      "character": "Lisa",
+      "startTime": 5.98,
+      "finishTime": 7.74,
+      "dialogue": {
+        "text": "Ah, so the credentials were the issue.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 8.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
new file mode 100644
index 0000000000..30101291fb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705605c7fb8f619e0068634.md
@@ -0,0 +1,114 @@
+---
+id: 6705605c7fb8f619e0068634
+title: Task 24
+challengeType: 19
+dashedName: task-24
+---
+
+<!-- (Audio) Lisa: Ah, so the credentials were the issue. Did you fix them? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Lisa asking James about?
+
+## --answers--
+
+She is asking if James fixed the credentials.
+
+---
+
+She is asking if the credentials caused the issue.
+
+### --feedback--
+
+Lisa already understands that the credentials were the problem. She is asking if James fixed them.
+
+---
+
+She is asking if James fixed the database.
+
+### --feedback--
+
+Lisa's question specifically refers to the credentials, not to the database as a whole.
+
+---
+
+She is asking if there are more issues.
+
+### --feedback--
+
+Lisa's question focuses on whether James fixed the credentials.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Issue` in this context means a problem or difficulty that needs to be solved. In the sentence, it refers to the database credentials being incorrect. For example:
+
+- `There was an issue with the system configuration.` - The problem was related to the configuration of the system.
+
+- `The main issue was a missing file.` - The problem was caused by a file not being where it should be.
+
+`Them` is a pronoun used to replace plural nouns already mentioned. In Lisa's question, `them` refers to the `credentials`. For example:
+
+- `The files were corrupted. Did you fix them?` - `them` refers to the files.
+
+- `The permissions were incorrect. I updated them this morning.` - `them` refers to the permissions.
+
+Lisa's question asks if James fixed the credentials.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 25.86,
+      "finishTimestamp": 28.48
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "Ah, so the credentials were the issue. Did you fix them?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
new file mode 100644
index 0000000000..3c649d9faf
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670561a8af3d901a431549fe.md
@@ -0,0 +1,117 @@
+---
+id: 670561a8af3d901a431549fe
+title: Task 25
+challengeType: 19
+dashedName: task-25
+---
+
+<!-- (Audio) James: Yes, I updated the credentials and the connection was finally successful. The app started working again. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was necessary to make the app work again?
+
+## --answers--
+
+Restarting the app.
+
+### --feedback--
+
+James doesn't mention restarting the app as the solution. He says updating the credentials was necessary.
+
+---
+
+Fixing the database server.
+
+### --feedback--
+
+James mentions updating the credentials, not fixing the server, as the key to solving the issue.
+
+---
+
+Updating the credentials.
+
+---
+
+Reinstalling the app.
+
+### --feedback--
+
+James says updating the credentials solved the issue, not reinstalling the app.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Successful` means achieving the desired result or goal. In this context, James says the connection was `successful`, meaning the database connection worked correctly after updating the credentials. For example:
+
+- `The team completed a successful deployment yesterday.` - meaning the deployment finished with good results.
+
+- `Her solution to the problem was successful and saved a lot of time.` - meaning she found a good solution to the problem.
+
+In James's case, updating the credentials to make a successful connection to the database was necessary for the app to start working again.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.48,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.3,
+      "dialogue": {
+        "text": "Yes, I updated the credentials and the connection was finally successful.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "startTime": 5.62,
+      "finishTime": 7.1,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
new file mode 100644
index 0000000000..f9c2b9d940
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670562a2aa92081a89ba77f6.md
@@ -0,0 +1,113 @@
+---
+id: 670562a2aa92081a89ba77f6
+title: Task 26
+challengeType: 22
+dashedName: task-26
+---
+
+<!-- (Audio) James: Yes, I updated the credentials and the connection was finally successful. The app started working again. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, I BLANK the credentials and the connection BLANK finally successful. The app BLANK working again.`
+
+## --blanks--
+
+`updated`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `update`, created by adding `-ed` to the base verb.
+
+---
+
+`was`
+
+### --feedback--
+
+This is the `Simple Past` form of the verb `to be`, used here to describe the state of the connection.
+
+---
+
+`started`
+
+### --feedback--
+
+This is the `Simple Past` form of the regular verb `start`, created by adding `-ed` to the base verb.
+
+# --explanation--
+
+Affirmative sentences in the `Simple Past` follow specific rules:
+
+For the verb `to be`, the forms are `was` (singular) and `were` (plural). These forms are used without auxiliary verbs. For example:
+
+- `The project was successful.` - This means the project brought good results.
+
+- `They were happy with the results.` - this represents how `they` felt about the results of the project.
+
+Regular verbs in the Simple Past are formed by adding `-ed` to the base verb. For example:
+
+- `I worked on the project yesterday.` - You add `-ed` to the base form of the verb `work` to say that the action happened in a moment in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.48,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.3,
+      "dialogue": {
+        "text": "Yes, I updated the credentials and the connection was finally successful.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "startTime": 5.62,
+      "finishTime": 7.1,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
new file mode 100644
index 0000000000..a9c803c3d8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705638c3791881aed186e9d.md
@@ -0,0 +1,90 @@
+---
+id: 6705638c3791881aed186e9d
+title: Task 27
+challengeType: 19
+dashedName: task-27
+---
+
+<!-- (Audio) James: The app started working again. -->
+
+<!-- SPEAKING --> 
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How can Lisa congratulate James **in a brief way** to make him know she is happy with the results?
+
+## --answers--
+
+`Congratulations on a job well done. I'm really happy to know you solved this issue.`
+
+### --feedback--
+
+That is the idea. However, Lisa could say that in a much shorter form.
+
+---
+
+`Great job.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Great job` can be used to tell someone you are satisfied with their effort or achievement. It expresses appreciation and acknowledgment of their success. For example:
+
+Kid: `Mom, I finished all my homework!` Mother: `Great job.`
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.9,
+      "finishTimestamp": 34.58
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.68,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 3.18
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
new file mode 100644
index 0000000000..5b08edcaf8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670564e883b7911b4ec31e29.md
@@ -0,0 +1,134 @@
+---
+id: 670564e883b7911b4ec31e29
+title: Task 28
+challengeType: 19
+dashedName: task-28
+---
+
+<!-- (Audio) James: The app started working again. Lisa: Great job. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What can you conclude based on Lisa's comment?
+
+## --answers--
+
+She is telling James the app is broken.
+
+### --feedback--
+
+Lisa's comment intends to praise James for fixing the app, not to criticize him.
+
+---
+
+She is praising James for his effort.
+
+---
+
+She is asking James to work faster.
+
+### --feedback--
+
+Lisa's comment is about appreciating James's work, not asking for speed.
+
+---
+
+She is unsure if the app is working.
+
+### --feedback--
+
+Lisa's comment shows that she is confident in James's success and appreciates his work.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The phrase `Great job` is used to praise or compliment someone for their effort or achievement. It expresses appreciation and acknowledgment of their success. For example:
+
+`You fixed the bug in record time. Great job!` - meaning you think it is great that the other person fixed the bug so fast.
+
+Lisa's use of `Great job` in the dialogue reflects her recognition of James's effort in solving the problem and getting the app working again.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 32.9,
+      "finishTimestamp": 35.52
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 2.68,
+      "dialogue": {
+        "text": "The app started working again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 2.87
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 2.87
+    },
+    {
+      "character": "Lisa",
+      "startTime": 3.06,
+      "finishTime": 3.62,
+      "dialogue": {
+        "text": "Great job.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 4.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
new file mode 100644
index 0000000000..60e30e466f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056697de96ba1ba012eb44.md
@@ -0,0 +1,60 @@
+---
+id: 67056697de96ba1ba012eb44
+title: Task 42
+challengeType: 22
+dashedName: task-42
+---
+
+# --instructions--
+
+Fill each blank with one of the following words to add the correct sequential linkers to the text below: `After`, `Finally`, `First`, or `Then`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK, James checked the code for recent changes. BLANK, he reviewed the error logs more carefully. BLANK that, he found the bug in the database credentials. BLANK, he updated the credentials, and the app worked again.`
+
+## --blanks--
+
+`First`
+
+### --feedback--
+
+James' initial action was checking the code. The first letter is capitalized.
+
+---
+
+`Then`
+
+### --feedback--
+
+This linker indicates the immediate next action, which was reviewing the error logs. The first letter is capitalized.
+
+---
+
+`After`
+
+### --feedback--
+
+This word combined with the following makes a linker that correctly introduces a step with more separation, when James found the bug in the credentials. The first letter is capitalized.
+
+---
+
+`Finally`
+
+### --feedback--
+
+This linker indicates that updating the credentials was the last step in solving the issue. The first letter is capitalized.
+
+# --explanation--
+
+Sequential linkers like `first`, `then`, `after that`, and `finally` are used to describe the order of actions or events.
+
+- `First` is used to describe the initial action.
+
+- `Then` refers to the next immediate step.
+
+- `After that` is used to introduce a step following another action with some distinction between them.
+
+- `Finally` marks the last step in a sequence.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
new file mode 100644
index 0000000000..42892a829e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67056b4950144e1cf10c53a6.md
@@ -0,0 +1,64 @@
+---
+id: 67056b4950144e1cf10c53a6
+title: Task 43
+challengeType: 19
+dashedName: task-43
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What would be the most appropriate subject for James' email to the team?
+
+## --answers--
+
+`Update on the system connection issue`
+
+### --feedback--
+
+This subject is relevant but a bit too vague about the exact problem James fixed.
+
+---
+
+`Bug fixed. Database credentials updated`
+
+---
+
+`Security patch problems`
+
+### --feedback--
+
+This subject is misleading because the security patch wasn't the problem, it was the credentials not being updated after the patch.
+
+---
+
+`Error logs reviewed. No issues found`
+
+### --feedback--
+
+This subject is incorrect because James did find an issue while reviewing the error logs.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find the most appropriate subject take into consideration the whole email and think about the main issue discussed.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
new file mode 100644
index 0000000000..6c62c01113
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670570ad97d26e1d6bad572d.md
@@ -0,0 +1,66 @@
+---
+id: 670570ad97d26e1d6bad572d
+title: Task 44
+challengeType: 19
+dashedName: task-44
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What was the first thing James did to investigate the bug?
+
+## --answers--
+
+He checked the recent code changes.
+
+---
+
+He updated the credentials.
+
+### --feedback--
+
+This is incorrect because James updated the credentials later.
+
+---
+
+He reviewed the error logs.
+
+### --feedback--
+
+James reviewed the error logs after checking the recent code changes.
+
+---
+
+He restarted the system.
+
+### --feedback--
+
+This action wasn't mentioned in the dialogue.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To find out what was the first thing James did, focus on the sentence that starts with `First I...`.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
new file mode 100644
index 0000000000..eca1d02afd
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705725e2814c91dd738e8f4.md
@@ -0,0 +1,66 @@
+---
+id: 6705725e2814c91dd738e8f4
+title: Task 45
+challengeType: 19
+dashedName: task-45
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+What was the main cause of the bug James found?
+
+## --answers--
+
+The error logs were not updated.
+
+### --feedback--
+
+This is incorrect because the issue wasn't related to the logs.
+
+---
+
+The system wasn't connecting to the database properly.
+
+---
+
+The code changes introduced a new error.
+
+### --feedback--
+
+The bug wasn't directly caused by the code changes.
+
+---
+
+The internet connection was unstable.
+
+### --feedback--
+
+James doesn't mention this.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out the main cause of the bug, look for the part of the text that talks about the system's connection. Focus on the sentence that starts with `Then, I...`.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
new file mode 100644
index 0000000000..9fb48db944
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6705742b9616e01e275e5c08.md
@@ -0,0 +1,66 @@
+---
+id: 6705742b9616e01e275e5c08
+title: Task 46
+challengeType: 19
+dashedName: task-46
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+How did James fix the problem?
+
+## --answers--
+
+He reviewed the error logs again.
+
+### --feedback--
+
+Reviewing the logs helped James find the issue but didn't directly fix it.
+
+---
+
+He updated the credentials.
+
+---
+
+He made changes to the code.
+
+### --feedback--
+
+The issue wasn't fixed by changing the code, but by updating the credentials.
+
+---
+
+He restarted the app.
+
+### --feedback--
+
+Restarting the app wasn't mentioned as part of the solution.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out how James fixed the problem, look for the part of the text that talks about updating the credentials. Focus on the sentence that starts with `We hadn't...`.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
new file mode 100644
index 0000000000..201b595e5b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057604ca099f1e7df78e77.md
@@ -0,0 +1,66 @@
+---
+id: 67057604ca099f1e7df78e77
+title: Task 47
+challengeType: 19
+dashedName: task-47
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+When were the credentials updated last time?
+
+## --answers--
+
+Before the bug was found.
+
+### --feedback--
+
+The credentials weren't updated before the bug was found, which was actually the cause of the issue.
+
+---
+
+After the last security patch.
+
+---
+
+When the error logs were cleared.
+
+### --feedback--
+
+The error logs revealed the issue, but the credentials weren't updated when the logs were cleared.
+
+---
+
+During the last system backup.
+
+### --feedback--
+
+No mention of a system backup was made, so this doesn't apply to the situation.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To find out when the credentials were updated, check the part where James explains why the app wasn't working. Focus on the sentence starting with, `We hadn't updated...`. 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
new file mode 100644
index 0000000000..cdff5a1471
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67057e02da44871f492f6f35.md
@@ -0,0 +1,66 @@
+---
+id: 67057e02da44871f492f6f35
+title: Task 48
+challengeType: 19
+dashedName: task-48
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the following text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is James' email to his team.
+
+`To: Team`
+
+`Subject: Bug fixed. Database credentials updated`
+
+`Hey team,`
+
+`I found the bug from yesterday. First, I checked the recent code changes but didn't see anything. Then, I looked at the error logs and realized the system wasn't connecting to the database properly. We hadn't updated the credentials after the last security patch. I fixed the credentials, and the app is now running smoothly!`
+
+`Best regards,` `James`
+
+Is the app working now?
+
+## --answers--
+
+No, the app still has bugs.
+
+### --feedback--
+
+The bug was fixed after updating the credentials, so the app no longer has issues.
+
+---
+
+Yes, it's running smoothly.
+
+---
+
+No, the database is still down.
+
+### --feedback--
+
+The database connection issue was resolved, so it's not down anymore.
+
+---
+
+Yes, but only partially.
+
+### --feedback--
+
+The app is fully operational, not partially working.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To figure out if the app is working now, look at the last part of James' explanation where he says, `I fixed...`.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
new file mode 100644
index 0000000000..83bb86d2ce
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f6ca334a541048d0e9a76.md
@@ -0,0 +1,223 @@
+---
+id: 670f6ca334a541048d0e9a76
+title: "Dialogue 2: Project Post-Mortem"
+challengeType: 21
+dashedName: dialogue-2-project-post-mortem
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video
+
+# --scene--
+
+```json
+{
+"setup": {
+  "background": "company2-center.png",
+  "characters": [
+    {
+      "character": "Linda",
+      "position": { "x": -25, "y": 0, "z": 1 }
+    },
+    {
+      "character": "Jake",
+      "position": { "x": 125, "y": 0, "z": 1 }
+    }
+  ],
+  "audio": {
+    "filename": "B1_2-2.mp3",
+    "startTime": 1
+  },
+  "alwaysShowDialogue": true
+},
+"commands": [
+  {
+    "character": "Linda",
+    "position": { "x": 25, "y": 0, "z": 1 },
+    "startTime": 0
+  },
+  {
+    "character": "Jake",
+    "position": { "x": 70, "y": 0, "z": 1 },
+    "startTime": 0.5
+  },
+  {
+    "character": "Linda",
+    "startTime": 1,
+    "finishTime": 4.88,
+    "dialogue": {
+      "text": "I was thinking we could do a quick post-mortem of the design project.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 5.42,
+    "finishTime": 10.42,
+    "dialogue": {
+      "text": "Sure. I was reviewing our security protocols for the project just yesterday. What's on your mind?",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 11.08,
+    "finishTime": 14.44,
+    "dialogue": {
+      "text": "Well, during the project, I was working closely with the development team,",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 14.58,
+    "finishTime": 17.94,
+    "dialogue": {
+      "text": "and we were constantly updating the user interface based on user feedback.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 18.58,
+    "finishTime": 20.78,
+    "dialogue": {
+      "text": "I noticed that. But there was a time",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 20.78,
+    "finishTime": 24.26,
+    "dialogue": {
+      "text": "when we weren't considering security implications during those updates, right?",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 24.66,
+    "finishTime": 29.14,
+    "dialogue": {
+      "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 29.14,
+    "finishTime": 32.18,
+    "dialogue": {
+      "text": "Did you use to check the updates for security vulnerabilities?",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 32.9,
+    "finishTime": 35.5,
+    "dialogue": {
+      "text": "I did, but not always in real time.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 35.78,
+    "finishTime": 39.12,
+    "dialogue": {
+      "text": "Sometimes I was checking them a day later, which wasn't ideal.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 39.68,
+    "finishTime": 42.66,
+    "dialogue": {
+      "text": "I remember there was a week when we were all working overtime.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 43,
+    "finishTime": 45.1,
+    "dialogue": {
+      "text": "You were fixing a security issue, weren't you?",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 45.88,
+    "finishTime": 49.48,
+    "dialogue": {
+      "text": "Exactly. There was a major vulnerability that needed immediate action.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 49.68,
+    "finishTime": 53.2,
+    "dialogue": {
+      "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 53.72,
+    "finishTime": 55.56,
+    "dialogue": {
+      "text": "It was quite a learning curve for us.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Linda",
+    "startTime": 55.74,
+    "finishTime": 58.92,
+    "dialogue": {
+      "text": "We didn't use to integrate security and design as much as we should.",
+      "align": "left"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 59.7,
+    "finishTime": 65.94,
+    "dialogue": {
+      "text": "Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "startTime": 66.06,
+    "finishTime": 68.64,
+    "dialogue": {
+      "text": "We can't afford to overlook this aspect again.",
+      "align": "right"
+    }
+  },
+  {
+    "character": "Jake",
+    "position": { "x": 125, "y": 0, "z": 1 },
+    "startTime": 69.14
+  },
+  {
+    "character": "Linda",
+    "position": { "x": -25, "y": 0, "z": 1 },
+    "startTime": 69.64
+  }
+]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
new file mode 100644
index 0000000000..24008becf5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f71de33e0be053934a9c3.md
@@ -0,0 +1,106 @@
+---
+id: 670f71de33e0be053934a9c3
+title: Task 49
+challengeType: 19
+dashedName: task-49
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Linda mean by `postmortem`?
+
+## --answers--
+
+She means a review of the design project after its completion to analyze what went well and what didn't.
+
+---
+
+She means creating a new design for the project.
+
+### --feedback--
+
+A `postmortem` is not about designing something new but about reviewing what happened after a project.
+
+---
+
+She means canceling the design project.
+
+### --feedback--
+
+A `postmortem` is done after a project is completed, not about canceling it.
+
+---
+
+She means reviewing the project before starting it.
+
+### --feedback--
+
+A `postmortem` happens after the project is finished, not before.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The term `postmortem` comes from Latin, meaning *after death*, but in a business context, it refers to a meeting or review conducted after the completion of a project to analyze its successes and problems.
+
+This meeting helps organizations learn from their experiences and improve future projects. For example:
+
+`The team conducted a postmortem to discuss the challenges faced during the product launch.` - This means the team met after product launch to discuss the challenges they encountered in the process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
new file mode 100644
index 0000000000..017e62394f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/670f74145be4b907a1b9c915.md
@@ -0,0 +1,92 @@
+---
+id: 670f74145be4b907a1b9c915
+title: Task 50
+challengeType: 22
+dashedName: task-50
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I BLANK BLANK we could do a quick postmortem of the design project.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`thinking`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It is used to talk about a process that happens on your mind.
+
+# --explanation--
+
+The `Past Continuous` tense is used to describe actions or thoughts that were in progress at a specific time in the past.
+
+This tense is often used to describe background actions or ongoing processes in the past. The structure is **`was`/`were` + verb ending in `-ing`**.
+
+In this sentence, `I was thinking` shows that Linda's thought about doing a postmortem was in progress at a specific time. Another example:
+
+`He was reviewing the report when the meeting started.` - Meaning that the action of reviewing the report was in progress and another situation interrupted it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
new file mode 100644
index 0000000000..cdee09e739
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bc2f9f242e03ebeccbe9.md
@@ -0,0 +1,92 @@
+---
+id: 6710bc2f9f242e03ebeccbe9
+title: Task 51
+challengeType: 19
+dashedName: task-51
+---
+
+<!-- (Audio) Linda: I was thinking we could do a quick postmortem of the design project. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake very briefly tell Linda that he agrees with the idea of having a quick `postmortem`?
+
+## --answers--
+
+`Oh, absolutely. I think doing a postmortem would be a great idea.`
+
+### --feedback--
+
+Even though this is correct, it is not brief. There's a simple, 4-letter word you can use to say exactly the same.
+
+---
+
+`Sure.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+When agreeing with someone's idea you can briefly tell a person that by saying `Sure`. For example:
+
+- `Would you like to visit another country some day? Sure.` - This means you want to do it.
+
+- `How about going to the movies this week? Sure.` - This means you accept the invitation.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.5,
+      "finishTimestamp": 4.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 0,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "I was thinking we could do a quick postmortem of the design project.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
new file mode 100644
index 0000000000..6834c3899c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710bf5df20df90498c991a2.md
@@ -0,0 +1,106 @@
+---
+id: 6710bf5df20df90498c991a2
+title: Task 52
+challengeType: 19
+dashedName: task-52
+---
+
+<!-- (Audio) Jake: Sure. I was reviewing our security protocols for the project just yesterday. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was Jake doing yesterday?
+
+## --answers--
+
+He was updating the security protocols.
+
+### --feedback--
+
+Jake says he was reviewing the protocols, not updating them.
+
+---
+
+He was designing a new security system.
+
+### --feedback--
+
+Jake was reviewing existing protocols, not designing a new system.
+
+---
+
+He was reviewing the security protocols for the project.
+
+---
+
+He was fixing a bug in the project.
+
+### --feedback--
+
+Jake's focus was on reviewing the security protocols, not fixing a bug.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The `Past Continuous` tense often emphasizes the duration or background of an action in the past. It is used to describe an action that was ongoing at a specific time in the past. The structure is: **`was`/`were` + verb ending in `-ing`**.
+
+In Jake's sentence, `I was reviewing` shows that the action of reviewing was in progress yesterday. Another example:
+
+`She was testing the new feature when the system crashed.` - Here, the crashing of the system happened in the middle of her action of testing the new feature - the test was a longer ongoing action.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.42,
+      "finishTimestamp": 8.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.28,
+      "dialogue": {
+        "text": "Sure. I was reviewing our security protocols for the project just yesterday.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
new file mode 100644
index 0000000000..efca669837
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c59075616806206fcf44.md
@@ -0,0 +1,90 @@
+---
+id: 6710c59075616806206fcf44
+title: Task 53
+challengeType: 22
+dashedName: task-53
+---
+
+<!-- (Audio) Jake: Sure. I was reviewing our security protocols for the project just yesterday. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Sure. I was reviewing our BLANK BLANK for the project just yesterday.`
+
+## --blanks--
+
+`security`
+
+### --feedback--
+
+This word refers to measures or procedures taken to protect systems or data.
+
+---
+
+`protocols`
+
+### --feedback--
+
+This word refers to rules or procedures that need to be followed in specific situations.
+
+# --explanation--
+
+A `protocol` is a set of rules or procedures designed to guide behavior or processes. A `security protocol` refers to specific procedures designed to protect systems, networks, or data from unauthorized access or threats. For example:
+
+`Our security protocols require two-factor authentication for all logins.` - This means that the use of two-factor authentication for logging in is a part of the procedures related to protecting the system.
+
+In this sentence, Jake is referring to reviewing the rules and procedures (the `protocols`) designed to ensure the project's security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.42,
+      "finishTimestamp": 8.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.28,
+      "dialogue": {
+        "text": "Sure. I was reviewing our security protocols for the project just yesterday.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.78
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
new file mode 100644
index 0000000000..d5af040376
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710c7bd388290075f19552c.md
@@ -0,0 +1,106 @@
+---
+id: 6710c7bd388290075f19552c
+title: Task 54
+challengeType: 19
+dashedName: task-54
+---
+
+<!-- (Audio) Jake: What's on your mind? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Jake asking Linda?
+
+## --answers--
+
+He is asking what Linda is working on.
+
+### --feedback--
+
+Jake is asking about her thoughts, not her current task.
+
+---
+
+He is asking what Linda is thinking about.
+
+---
+
+He is asking if Linda is busy.
+
+### --feedback--
+
+Jake's question is about her thoughts, not her availability.
+
+---
+
+He is asking if Linda is worried about something.
+
+### --feedback--
+
+While the question could refer to concerns, it is more general, asking about what she is thinking.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`What's on your mind?` is used to ask someone what they are thinking about or if they have any concerns or thoughts they want to share.
+
+It's often used in both personal and professional settings to encourage open communication. It is a conversational way to invite someone to express their thoughts. For example:
+
+`You seem quiet today. What's on your mind?` - You are asking the other person what they are thinking about.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 8.72,
+      "finishTimestamp": 9.62
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 1.9,
+      "dialogue": {
+        "text": "What's on your mind?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.4
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
new file mode 100644
index 0000000000..267bc8ff84
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e0e2cafeeb09e6cb2d8f.md
@@ -0,0 +1,115 @@
+---
+id: 6710e0e2cafeeb09e6cb2d8f
+title: Task 55
+challengeType: 22
+dashedName: task-55
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Well, during the project, I BLANK BLANK closely with the development team, and we BLANK constantly BLANK the user interface based on user feedback.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`working`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`, describing the act of laboring.
+
+---
+
+`were`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the plural first-person form.
+
+---
+
+`updating`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`, describing an ongoing action of improving or modernizing something.
+
+# --explanation--
+
+The `Past Continuous` tense is used to describe actions that were ongoing at a specific time in the past. When two `Past Continuous` sentences are used together, they often describe simultaneous actions or actions happening alongside each other.
+
+In this sentence, Linda is describing how she and her team were both working and updating the user interface continuously throughout the project. This shows two actions happening at the same time in the past, providing context or background for each other. For example:
+
+`While I was preparing the report, they were testing the new features.` - This means the action of my preparing the report and the testing of the new features happened at the same time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
new file mode 100644
index 0000000000..9b7e8768f3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710e614f70bd10afb6ca7f7.md
@@ -0,0 +1,107 @@
+---
+id: 6710e614f70bd10afb6ca7f7
+title: Task 56
+challengeType: 22
+dashedName: task-56
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Well, during the project, I was working BLANK with the development team, and we were BLANK updating the user interface based on user feedback.`
+
+## --blanks--
+
+`closely`
+
+### --feedback--
+
+This word is an adverb describing how someone works in a careful, detailed, or collaborative way.
+
+---
+
+`constantly`
+
+### --feedback--
+
+This word is an adverb describing an action that happens continuously or very frequently.
+
+# --explanation--
+
+`Closely` is an adverb that means working in a careful, detailed, or collaborative way. It is related to the adjective `close`, which refers to a short distance or a strong relationship. For example:
+
+- `The manager worked closely with the design team.` - This sentence uses the adverb, which describes how they worked.
+
+- `They have a close relationship.` - This sentence uses the adjective, which describes the relationship.
+
+`Constantly` is an adverb that describes something that happens continuously or very frequently. It is related to the adjective `constant`, which refers to something that does not change or stops. For example:
+
+- `She constantly checks her emails throughout the day.` - This sentence uses the adverb, which describes the frequency of the action of checking.
+
+- `There was a constant need for updates.` - This sentence uses the adjective, which describes the need as being frequent.
+
+In the sentence, Linda uses `closely` to describe how her collaboration with the team was and `constantly` to show how frequently they updated the user interface.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
new file mode 100644
index 0000000000..187e9c47d5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6710ef64fecf900ca5296978.md
@@ -0,0 +1,119 @@
+---
+id: 6710ef64fecf900ca5296978
+title: Task 57
+challengeType: 19
+dashedName: task-57
+---
+
+<!-- (Audio) Linda: Well, during the project, I was working closely with the development team, and we were constantly updating the user interface based on user feedback. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did the development team use to constantly update the user interface?
+
+## --answers--
+
+They used user feedback.
+
+---
+
+They used new features.
+
+### --feedback--
+
+Linda says they updated the user interface based on user feedback, not new features.
+
+---
+
+They used system logs.
+
+### --feedback--
+
+Linda specifically mentions user feedback, not system logs, as the source for updates.
+
+---
+
+They used bug reports.
+
+### --feedback--
+
+While bug reports are important, Linda refers to user feedback for updating the user interface.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The `user interface` (UI) refers to the part of a system or software that users interact with directly, such as buttons, menus, and screens. For example:
+
+`The user interface was redesigned to be more intuitive.` - Meaning the part of the software the user interacts with was improved.
+
+`User feedback` refers to opinions, suggestions, or issues reported by users about their experience with a product or service. For example:
+
+`The company improved the app based on user feedback.` - Meaning the comments and suggestions coming from the users were read and used to make the app better.
+
+In this context, Linda explains that the team relied on user feedback to make constant improvements to the user interface, ensuring it met the needs of users.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.08,
+      "finishTimestamp": 17.34
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.36,
+      "dialogue": {
+        "text": "Well, during the project, I was working closely with the development team,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "startTime": 4.5,
+      "finishTime": 8.26,
+      "dialogue": {
+        "text": "and we were constantly updating the user interface based on user feedback.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 8.76
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
new file mode 100644
index 0000000000..685bdc81e8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121364e79da2047818b743.md
@@ -0,0 +1,107 @@
+---
+id: 67121364e79da2047818b743
+title: Task 58
+challengeType: 19
+dashedName: task-58
+---
+
+<!-- (Audio) Jake: I noticed that. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake mean when he says `I noticed that`?
+
+## --answers--
+
+
+He means he ignored it.
+
+### --feedback--
+
+`Notice` refers to observing or becoming aware of something, not ignoring it.
+
+---
+
+He means he forgot about it.
+
+### --feedback--
+
+`Notice` refers to paying attention, not forgetting.
+
+---
+
+He means he became aware of it or observed it.
+
+---
+
+He means he created it.
+
+### --feedback--
+
+`Notice` refers to observing something, not creating it.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Notice` means to become aware of something by seeing, hearing, or sensing it. It often implies paying attention to details. For example:
+
+`I noticed the error in the report before the meeting.` - This means you saw there was an error.
+
+It can refer to becoming aware of both physical things and situations. In this sentence, Jake means that he observed or became aware that the team was using user feedback to improve the user interface.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 18.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 2.12,
+      "dialogue": {
+        "text": "I noticed that.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 2.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
new file mode 100644
index 0000000000..d5f941c9ca
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121be3d5093805dfdbaa71.md
@@ -0,0 +1,108 @@
+---
+id: 67121be3d5093805dfdbaa71
+title: Task 59
+challengeType: 22
+dashedName: task-59
+---
+
+<!-- (Audio) Jake: I noticed that. But there was a time when we weren't considering security implications during those updates, right? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I noticed that. But there was a time when we BLANK BLANK security implications during those updates, right?`
+
+## --blanks--
+
+`weren't`
+
+### --feedback--
+
+This is the negative form of the auxiliary verb `to be` in the `Past Continuous`, used for **plural** subjects.
+
+---
+
+`considering`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It has to do with thinking carefully about something.
+
+# --explanation--
+
+The `Past Continuous` in its negative form is used to describe actions that were not happening at a specific time in the past. The structure is:  
+**`wasn't` / `weren't` + verb ending in `-ing`**. For example:
+
+- `He wasn't listening during the meeting.` - This sentence uses the singular form `was`
+
+- `They weren't following the instructions carefully.` - This sentence uses the plural form `were`.
+
+In this context, `weren't considering` means that, at a certain point in the past, the team was not taking security implications into account while performing updates.
+
+The verb `consider` means to think carefully about something before making a decision or taking action. For example:
+
+`We need to consider all options before finalizing the project plan.` - Meaning it's necessary to think about the options.
+
+In Jake's sentence, `considering` refers to the team evaluating or thinking about security implications.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 23.46
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "I noticed that. But there was a time",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "when we weren't considering security implications during those updates, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
new file mode 100644
index 0000000000..83de71ed0c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67121d26052fb606bd59705c.md
@@ -0,0 +1,115 @@
+---
+id: 67121d26052fb606bd59705c
+title: Task 60
+challengeType: 19
+dashedName: task-60
+---
+
+<!-- (Audio) Jake: I noticed that. But there was a time when we weren't considering security implications during those updates, right? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Jake mean with his question?
+
+## --answers--
+
+He is asking if the team always considered security implications.
+
+### --feedback--
+
+Jake's question suggests there might have been a time when security was overlooked.
+
+---
+
+He is asking if security was never important.
+
+### --feedback--
+
+Jake's question focuses on whether there was a specific time when security wasn't considered, not on its overall importance.
+
+---
+
+He is asking if the updates were unnecessary.
+
+### --feedback--
+
+Jake is asking about the consideration of security implications, not the necessity of the updates.
+
+---
+
+He is asking if there was a time when security concerns were not taken into account during the updates.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Implications` refers to the possible results or effects of an action or decision, especially those that are not immediately obvious. In this context, `security implications` are the potential consequences of not considering security during updates. For example:
+
+`Before launching the new feature, the team discussed the implications for user privacy.` - Meaning they discussed the possible consequences to user privacy that this new feature could bring.
+
+In Jake's question, he is referring to the potential negative outcomes of not considering security during past updates.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 17.58,
+      "finishTimestamp": 23.46
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.2,
+      "dialogue": {
+        "text": "I noticed that. But there was a time",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 3.2,
+      "finishTime": 6.88,
+      "dialogue": {
+        "text": "when we weren't considering security implications during those updates, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 7.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
new file mode 100644
index 0000000000..f6a79172da
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67122e8300d8e90843b04967.md
@@ -0,0 +1,110 @@
+---
+id: 67122e8300d8e90843b04967
+title: Task 61
+challengeType: 19
+dashedName: task-61
+---
+
+<!-- (Audio) Linda: Yes, that's true. We used to focus solely on design aspects and user experience. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did the team normally pay attention to exclusively in the past?
+
+## --answers--
+
+They focused solely on design aspects and user experience.
+
+---
+
+They focused on security protocols.
+
+### --feedback--
+
+Linda specifically says they focused on design aspects and user experience, not security.
+
+---
+
+They paid attention to marketing strategies.
+
+### --feedback--
+
+Linda refers to focusing on design and user experience, not marketing.
+
+---
+
+They worked only on backend development.
+
+### --feedback--
+
+Linda says the team concentrated on design aspects and user experience, not backend development.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Used to` refers to actions or situations that were habitual or true in the past but are no longer the case. For example:
+
+`We used to have weekly team meetings, but now we meet monthly.` - This means it was the team's habit to meet more frequently in the past - once a week instead of once a month, as they do now.
+
+`Solely` means exclusively or only. It emphasizes that something was the only focus or priority. For example:
+
+`The company is solely focused on developing new technology.` - Meaning this is the **only** thing the company wants to concentrate its efforts on.
+
+In this sentence, Linda explains that the team previously focused only on design and user experience, with no consideration for other aspects like security.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.66,
+      "finishTimestamp": 28.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
new file mode 100644
index 0000000000..ef0eec257a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67176c867303f30476f3d126.md
@@ -0,0 +1,90 @@
+---
+id: 67176c867303f30476f3d126
+title: Task 62
+challengeType: 22
+dashedName: task-62
+---
+
+<!-- (Audio) Linda: Yes, that's true. We used to focus solely on design aspects and user experience. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yes, that's true. We used to focus solely on design aspects and BLANK BLANK.`
+
+## --blanks--
+
+`user`
+
+### --feedback--
+
+This word refers to the person who interacts with a product or system.
+
+---
+
+`experience`
+
+### --feedback--
+
+This word refers to how a person feels when using a product or system.
+
+# --explanation--
+
+`User experience` (UX) refers to the overall experience a person has when interacting with a product, system, or service, including ease of use, satisfaction, and efficiency. For example:
+
+`Improving the user experience on our website increased customer satisfaction.` - This means that the look and feel of the site and how the user interacts to it was changed and this generated positive results.
+
+In this sentence, Linda mentions that the team used to focus on how users interacted with and felt about the design of their product.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.66,
+      "finishTimestamp": 28.54
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 5.88,
+      "dialogue": {
+        "text": "Yes, that's true. We used to focus solely on design aspects and user experience.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 6.38
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
new file mode 100644
index 0000000000..c48c4f5ffa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717756d3483e6060d2cd800.md
@@ -0,0 +1,110 @@
+---
+id: 6717756d3483e6060d2cd800
+title: Task 63
+challengeType: 19
+dashedName: task-63
+---
+
+<!-- (Audio) Linda: Did you use to check the updates for security vulnerabilities? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Linda asking in this question?
+
+## --answers--
+
+She is asking if security updates are currently being checked.
+
+### --feedback--
+
+Linda's question is about a past habit, not about the current practice.
+
+---
+
+She is asking if checking for security vulnerabilities was a regular practice in the past.
+
+---
+
+She is asking if security vulnerabilities are easy to fix.
+
+### --feedback--
+
+Linda's question is about whether they used to check for vulnerabilities, not their ease of fixing.
+
+---
+
+She is asking if vulnerabilities were ignored.
+
+### --feedback--
+
+Linda is asking if they regularly checked for vulnerabilities, not if they were ignored.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In the interrogative form, `used to` asks about past habits or routines that may no longer be true. The structure is: `Did` + subject + `use to` + base verb`?` For example:
+
+`Did you use to attend weekly meetings?` - You are asking if the other person normally attended the meetings.
+
+A `vulnerability` is a weakness or flaw that can be exploited, especially in the context of security. For example:
+
+`The team identified a vulnerability in the system that needed immediate attention.` - There was a weak spot in the system that had to be dealt with.
+
+In this sentence, Linda is asking if checking updates for security weaknesses was a regular part of their past process.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 28.54,
+      "finishTimestamp": 31.78
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.24,
+      "dialogue": {
+        "text": "Did you use to check the updates for security vulnerabilities?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.74
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
new file mode 100644
index 0000000000..206292eda3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775877ee558061e6eebf8.md
@@ -0,0 +1,90 @@
+---
+id: 671775877ee558061e6eebf8
+title: Task 64
+challengeType: 22
+dashedName: task-64
+---
+
+<!-- (Audio) Jake: I did, but not always in real time. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I did, but not always in BLANK BLANK.`
+
+## --blanks--
+
+`real`
+
+### --feedback--
+
+This word refers to something happening in the actual moment it occurs.
+
+---
+
+`time`
+
+### --feedback--
+
+This word refers to the ongoing or current moment in which events happen.
+
+# --explanation--
+
+The phrase `in real time` refers to something happening immediately as events occur, without delay. It is often used in the context of monitoring, communication, or data processing. For example:
+
+`The system updates the dashboard in real time, so you can see changes instantly.` - Meaning the dashboard changes immediately after the updates after the updates are applied.
+
+In Jake's sentence, he means that while he checked for security vulnerabilities, it wasn't always done immediately as the updates happened.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 31.9,
+      "finishTimestamp": 34.7
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.8,
+      "dialogue": {
+        "text": "I did, but not always in real time.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.3
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
new file mode 100644
index 0000000000..10f827b127
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775a360c128062f906b24.md
@@ -0,0 +1,106 @@
+---
+id: 671775a360c128062f906b24
+title: Task 65
+challengeType: 19
+dashedName: task-65
+---
+
+<!-- (Audio) Jake: Sometimes I was checking them a day later, which wasn't ideal. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Jake think about checking the updates a day later?
+
+## --answers--
+
+He thought it wasn't ideal.
+
+---
+
+He thought it was the best solution.
+
+### --feedback--
+
+Jake explicitly says it wasn't ideal.
+
+---
+
+He didn't think it was a problem.
+
+### --feedback--
+
+Jake's comment shows that he recognized it wasn't an ideal approach.
+
+---
+
+He thought it was impossible.
+
+### --feedback--
+
+Jake mentions that he did check them a day later, but it wasn't ideal.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Which` is a relative pronoun used to provide additional information about something mentioned earlier in the sentence. In this case, `which` refers to the entire idea of checking the updates a day later and clarifies that it wasn't ideal. For example:
+
+`She missed the deadline, which caused a delay in the project.` - Here, `which` refers to `missing the deadline` and explains the resulting delay.
+
+Similarly, Jake uses `which` to express that checking updates a day later wasn't the best practice.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 34.78,
+      "finishTimestamp": 38.52
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.74,
+      "dialogue": {
+        "text": "Sometimes I was checking them a day later, which wasn't ideal.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
new file mode 100644
index 0000000000..6e0e6ecb27
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775bb104def063ffbdaab.md
@@ -0,0 +1,82 @@
+---
+id: 671775bb104def063ffbdaab
+title: Task 66
+challengeType: 22
+dashedName: task-66
+---
+
+<!-- (Audio) Linda: I remember there was a week when we were all working overtime. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I remember there was a week when we were all working BLANK.`
+
+## --blanks--
+
+`overtime`
+
+### --feedback--
+
+This word refers to working beyond the regular hours.
+
+# --explanation--
+
+`To work overtime` means to work extra hours beyond the standard schedule, often to meet deadlines or complete urgent tasks. For example:
+
+`The team had to work overtime to finish the project before the deadline.` - Meaning you had to work extra hours to complete the project in order to meet the deadline.
+
+In this sentence, Linda is recalling a specific week when everyone had to put in extra hours to meet the demands of their work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 38.78,
+      "finishTimestamp": 42.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "I remember there was a week when we were all working overtime.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
new file mode 100644
index 0000000000..aa3b704542
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775db2ecd44064fdb1f04.md
@@ -0,0 +1,94 @@
+---
+id: 671775db2ecd44064fdb1f04
+title: Task 67
+challengeType: 22
+dashedName: task-67
+---
+
+<!-- (Audio) Linda: You were fixing a security issue, weren't you? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`You were fixing a security issue, BLANK you?`
+
+## --blanks--
+
+`weren't`
+
+### --feedback--
+
+This word is part of a tag question using the auxiliary verb for the `Past Continuous`. It is used to confirm or seek agreement about something.
+
+# --explanation--
+
+`Tag questions` are short questions added to the end of a statement to confirm information or seek agreement. The structure depends on the main sentence:
+
+If the main sentence is positive, the tag is negative. For example:
+
+`You were working late, weren't you?` - You want to confirm if the other person was working late - you believe they were.
+
+If the main sentence is negative, the tag is positive. For Example:
+
+`You weren't at the meeting, were you?` - You want to confirm if the person did not attend the meeting - you believe they didn't.
+
+In this sentence, Linda uses the tag question `weren't you?` to confirm if Jake was fixing a security issue, because she thinks he was.
+
+A `security issue` refers to a problem or vulnerability that could compromise the safety or protection of a system, data, or user. For example:
+
+`The team addressed a security issue that allowed unauthorized access.` - meaning the team had to deal with a problem in security that was giving access to people without the proper authorization.
+
+In this context, Linda is asking about Jake's work on a specific problem related to security because she vividly remembers that was what was happening at the time.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.2,
+      "finishTimestamp": 44.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "You were fixing a security issue, weren't you?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
new file mode 100644
index 0000000000..22334a1aa5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671775f2f55c4c066193a1c1.md
@@ -0,0 +1,94 @@
+---
+id: 671775f2f55c4c066193a1c1
+title: Task 68
+challengeType: 19
+dashedName: task-68
+---
+
+<!-- (Audio) Linda: You were fixing a security issue, weren't you? --> 
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake tell Linda that was precisely what was happening at that time?
+
+## --answers--
+
+`Exactly.`
+
+---
+
+`I think so.`
+
+### --feedback--
+
+This answer means you agree with the other person, you believe they are right, but you are not sure of it.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Exactly` is used to confirm or strongly agree with something someone else has said. It indicates that the statement is fully correct. For example:
+
+Person 1: `Did you mean we should start testing today?`
+
+Person 2: `Exactly.` - meaning you are sure the tests should start today.
+
+In this context, Jake could say `Exactly` to confirm that he was indeed fixing a security issue back then as Linda mentioned.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 42.2,
+      "finishTimestamp": 44.3
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "You were fixing a security issue, weren't you?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
new file mode 100644
index 0000000000..357f3e67bc
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717760c06f5e10671ef0268.md
@@ -0,0 +1,94 @@
+---
+id: 6717760c06f5e10671ef0268
+title: Task 69
+challengeType: 22
+dashedName: task-69
+---
+
+<!-- (Audio) Jake: Exactly. There was a major vulnerability that needed immediate action. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Exactly. There was a major BLANK that needed BLANK action.`
+
+## --blanks--
+
+`vulnerability`
+
+### --feedback--
+
+This word refers to a weakness or flaw in a system that could be exploited.
+
+---
+
+`immediate`
+
+### --feedback--
+
+This word refers to something happening right away.
+
+# --explanation--
+
+A `major vulnerability` is a significant weakness or flaw in a system that could lead to serious consequences if exploited. It usually requires urgent attention to protect the system or data. For example:
+
+`The team discovered a major vulnerability in the software that could allow unauthorized access.` - This means the weakness was a serious one.
+
+`Immediate action` refers to steps that must be taken right away to address a pressing issue or problem. For example:
+
+`When the server crashed, the team took immediate action to restore functionality.` - This means the team acted as fast as they could to restore the server's functionality.
+
+In this dialogue, Jake explains that the vulnerability was serious enough to require urgent measures to prevent potential risks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.68,
+      "finishTimestamp": 48.68
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5,
+      "dialogue": {
+        "text": "Exactly. There was a major vulnerability that needed immediate action.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.5
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
new file mode 100644
index 0000000000..e3aa46bac9
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b543037e030fc7008aa7.md
@@ -0,0 +1,106 @@
+---
+id: 6717b543037e030fc7008aa7
+title: Task 70
+challengeType: 22
+dashedName: task-70
+---
+
+<!-- (Audio) Jake: While I was addressing that, the team was waiting for my green light to proceed. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`While I BLANK BLANK that, the team BLANK BLANK for my green light to proceed.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular first-person form.
+
+---
+
+`addressing`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It means to deal with or resolve something.
+
+---
+
+`was`
+
+### --feedback--
+
+This is the auxiliary verb used to form the `Past Continuous` in the singular third-person form.
+
+---
+
+`waiting`
+
+### --feedback--
+
+This is the main verb in the `Past Continuous`. It means to remain ready or expect something.
+
+# --explanation--
+
+The verb `address` in this context means to deal with or resolve an issue or problem. Jake was focusing on resolving the matter while the team waited for his approval. For example:
+
+`The manager addressed the client's concerns during the meeting.` - Here, `addressed` refers to taking action to deal with the client's concerns.
+
+In the sentence, Jake uses the `Past Continuous` (`was addressing`) to describe the ongoing action of resolving the issue while another ongoing action (`the team was waiting`) happened simultaneously.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.78,
+      "finishTimestamp": 52.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
new file mode 100644
index 0000000000..eb1a5ee7c8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b55fb3b4160fd757b7af.md
@@ -0,0 +1,106 @@
+---
+id: 6717b55fb3b4160fd757b7af
+title: Task 71
+challengeType: 19
+dashedName: task-71
+---
+
+<!-- (Audio) Jake: While I was addressing that, the team was waiting for my green light to proceed. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What was the team waiting for in order to resume their work?
+
+## --answers--
+
+They were waiting for Jake to fix everything.
+
+### --feedback--
+
+While Jake was resolving an issue, the team was specifically waiting for his green light, or permission, to continue.
+
+---
+
+They were waiting for new instructions.
+
+### --feedback--
+
+Jake's sentence focuses on the team waiting for his approval, not new instructions.
+
+---
+
+They were waiting for the system to restart.
+
+### --feedback--
+
+Jake doesn't mention the system restarting. The team was waiting for his permission.
+
+---
+
+They were waiting for Jake's permission or authorization.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+`Green light` in this context means approval or permission to start or continue an activity. It is often used figuratively to represent a signal to proceed. For example:
+
+`The manager gave the green light to launch the new product.` - Meaning the manager authorized the launch.
+
+In this sentence, Jake explains that the team was waiting for his permission to resume their work while he was resolving an issue.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.78,
+      "finishTimestamp": 52.5
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 4.72,
+      "dialogue": {
+        "text": "While I was addressing that, the team was waiting for my green light to proceed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 5.22
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
new file mode 100644
index 0000000000..e1147fd638
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5754dcaae0fe7bb179b.md
@@ -0,0 +1,82 @@
+---
+id: 6717b5754dcaae0fe7bb179b
+title: Task 72
+challengeType: 22
+dashedName: task-72
+---
+
+<!-- (Audio) Linda: It was quite a learning curve for us. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It was BLANK a learning curve for us.`
+
+## --blanks--
+
+`quite`
+
+### --feedback--
+
+This word is used to emphasize the degree or extent of something.
+
+# --explanation--
+
+`Quite` is used in this context to emphasize the significant degree or extent of the learning curve. It adds intensity, suggesting that the learning experience was challenging or noteworthy. For example:
+
+`The project was quite a success, exceeding all expectations.` - Here, `quite` highlights the extent of the project's success.
+
+In Linda's sentence, it emphasizes that the learning curve was substantial for the team.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 52.72,
+      "finishTimestamp": 54.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.04,
+      "dialogue": {
+        "text": "It was quite a learning curve for us.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
new file mode 100644
index 0000000000..0fd27a8fee
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b59830cdb50ff9f67623.md
@@ -0,0 +1,106 @@
+---
+id: 6717b59830cdb50ff9f67623
+title: Task 73
+challengeType: 19
+dashedName: task-73
+---
+
+<!-- (Audio) Linda: It was quite a learning curve for us. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Linda think about working with the security aspects of the project?
+
+## --answers--
+
+She thought it was easy and required no learning.
+
+### --feedback--
+
+A `learning curve` implies there were challenges and a need to learn new things, not ease.
+
+---
+
+She thought it was unnecessary to work on security aspects.
+
+### --feedback--
+
+Linda's comment suggests that working on security aspects was a valuable learning experience, not unnecessary.
+
+---
+
+She thought it was a challenging but educational experience.
+
+---
+
+She thought it was unrelated to the project.
+
+### --feedback--
+
+Linda's comment directly relates to the team's work on security aspects, describing it as a significant learning experience.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Learning curve` refers to the time, effort, and challenges involved in gaining knowledge or mastering a new skill. For example:
+
+`Switching to the new software was a steep learning curve for the employees.` - This implies the employees had a lot of difficulty learning how to operate the new software.
+
+In this context, Linda is describing how working with security aspects required the team to learn and adapt, and that they possibly faced some difficulties along the way.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 52.72,
+      "finishTimestamp": 54.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 3.04,
+      "dialogue": {
+        "text": "It was quite a learning curve for us.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 3.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
new file mode 100644
index 0000000000..9f42eb53c5
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5b2b0c1d21009b2b0fd.md
@@ -0,0 +1,94 @@
+---
+id: 6717b5b2b0c1d21009b2b0fd
+title: Task 74
+challengeType: 22
+dashedName: task-74
+---
+
+<!-- (Audio) Linda: We didn't use to integrate security and design as much as we should. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We BLANK BLANK to integrate security and design as much as we should.`
+
+## --blanks--
+
+`didn't`
+
+### --feedback--
+
+This is the auxiliary verb of the simple tenses in the negative form. It shows that the action this was not a habit in the past.
+
+---
+
+`use`
+
+### --feedback--
+
+This is the base form of the verb used for past habits, not conjugated in its past form here, because the auxiliary verb `didn't` carries the past tense.
+
+# --explanation--
+
+In negative sentences with `used to`, the auxiliary verb `didn't` is used to indicate the past, and the main verb `use` remains in its base form (not conjugated).
+
+This structure emphasizes that an action was not habitual or common in the past.
+
+**Important:** The auxiliary verb `didn't` makes the sentence negative. The verb `use` stays in its base form because the past tense is already conveyed by `didn't`. For example:
+
+`We didn't use to have weekly meetings, but now we do.` - This means weekly meetings were not common back then.
+
+In Linda's sentence, she is saying that integrating security and design was not a regular practice in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 55.04,
+      "finishTimestamp": 58.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "We didn't use to integrate security and design as much as we should.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
new file mode 100644
index 0000000000..54d37c3598
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5c73e81e8101bed0ea2.md
@@ -0,0 +1,96 @@
+---
+id: 6717b5c73e81e8101bed0ea2
+title: Task 75
+challengeType: 19
+dashedName: task-75
+---
+
+<!-- (Audio) Linda: We didn't use to integrate security and design as much as we should. -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Jake tell Linda he agrees with what she is saying?
+
+## --answers--
+
+`Nonsense.`
+
+### --feedback--
+
+When you use `nonsense` to reply to a comment, it is because you do not believe it is true or deserves credit.
+
+---
+
+`Agreed.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Agreed` is a concise way to express strong agreement with someone's statement. It is the opposite of the expression `Nonsense.`
+
+`Agreed` is often used in professional or conversational contexts to show alignment with what has been said. For Example:
+
+Person 1: `We should prioritize user feedback in our next update.`
+
+Person 2: `Agreed.` - This answer implies you strongly agree with prioritizing used feedback on the next update.
+
+In this context, Jake could use `Agreed` to acknowledge that he fully supports Linda's statement about the lack of integration between security and design in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Linda",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 55.04,
+      "finishTimestamp": 58.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Linda",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Linda",
+      "startTime": 1,
+      "finishTime": 4.18,
+      "dialogue": {
+        "text": "We didn't use to integrate security and design as much as we should.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Linda",
+      "opacity": 0,
+      "startTime": 4.68
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
new file mode 100644
index 0000000000..499bfc59aa
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5dc5fd2c0102b2aacec.md
@@ -0,0 +1,103 @@
+---
+id: 6717b5dc5fd2c0102b2aacec
+title: Task 76
+challengeType: 22
+dashedName: task-76
+---
+
+<!-- (Audio) Jake: Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Agreed. Moving BLANK, we should BLANK that security checks are happening while the design updates are being made.`
+
+## --blanks--
+
+`forward`
+
+### --feedback--
+
+This phrase refers to looking or planning ahead into the future.
+
+---
+
+`ensure`
+
+### --feedback--
+
+This word means to make certain or guarantee that something happens.
+
+# --explanation--
+
+`Moving forward` means looking ahead or planning for the future. It emphasizes taking steps or making changes from this point onward. For example:
+
+`Moving forward, the team will prioritize communication to avoid delays.` - This means that prioritizing communication is something that will start being done from now on.
+
+`Ensure` means to make certain or guarantee that something happens as intended. It is often used when setting priorities or responsibilities. For example:
+
+`We need to ensure that all employees are aware of the new guidelines.` - This means we should pay attention to the fact the employees know what the new guidelines are.
+
+In this context, Jake is emphasizing the importance of planning for the future by guaranteeing that security checks align with design updates.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 58.6,
+      "finishTimestamp": 65.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.5,
+      "dialogue": {
+        "text": "Agreed. Moving forward, we should ensure that security checks are happening",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.4,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "while the design updates are being made.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
new file mode 100644
index 0000000000..6fe4927f8b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b5f5be4456103b8ff767.md
@@ -0,0 +1,115 @@
+---
+id: 6717b5f5be4456103b8ff767
+title: Task 77
+challengeType: 19
+dashedName: task-77
+---
+
+<!-- (Audio) Jake: Agreed. Moving forward, we should ensure that security checks are happening while the design updates are being made. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+When does Jake think security checks should happen?
+
+## --answers--
+
+They should happen before the design updates are made.
+
+### --feedback--
+
+Jake specifically mentions that security checks should occur simultaneously with the design updates.
+
+---
+
+They should happen after the design updates are complete.
+
+### --feedback--
+
+Jake's statement indicates the checks should happen during, not after, the updates.
+
+---
+
+They don't need to happen at all.
+
+### --feedback--
+
+Jake is stressing the importance of security checks during the design updates.
+
+---
+
+They should happen while the design updates are being made.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The `Present Continuous` tense is used here to describe two ongoing actions happening at the same time: `security checks are happening` and `design updates are being made`. This emphasizes simultaneous activities. For example:
+
+`The team is testing the new feature while the developers are fixing bugs.` - This means the tests and the process of bug fixing are happening at the same time.
+
+This tense is often used to indicate that two events are occurring at the same time, creating a sense of coordination or overlap in actions. In Jake's statement, he stresses the importance of ensuring that both actions occur simultaneously.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 58.6,
+      "finishTimestamp": 65.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 5.5,
+      "dialogue": {
+        "text": "Agreed. Moving forward, we should ensure that security checks are happening",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "startTime": 5.4,
+      "finishTime": 7.64,
+      "dialogue": {
+        "text": "while the design updates are being made.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 8.14
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
new file mode 100644
index 0000000000..202142b8fe
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b611f1230c104cbf5d38.md
@@ -0,0 +1,90 @@
+---
+id: 6717b611f1230c104cbf5d38
+title: Task 78
+challengeType: 22
+dashedName: task-78
+---
+
+<!-- (Audio) Jake: We can't afford to overlook this aspect again. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`We BLANK BLANK to overlook this aspect again.`
+
+## --blanks--
+
+`can't`
+
+### --feedback--
+
+This word indicates inability or prohibition.
+
+---
+
+`afford`
+
+### --feedback--
+
+This word means to have the resources, time, or capacity to do something.
+
+# --explanation--
+
+`Can't afford` means that something is not feasible or permissible, often due to resource, time, or risk constraints. It emphasizes the necessity of avoiding a specific action or making a particular choice. For example:
+
+`We can't afford to miss the deadline for this project.` - This means that missing the deadline is not something we can do.
+
+In this context, Jake is emphasizing the critical importance of not ignoring this aspect in the future.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 65.16,
+      "finishTimestamp": 67.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.78,
+      "dialogue": {
+        "text": "We can't afford to overlook this aspect again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
new file mode 100644
index 0000000000..9158491d15
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6717b6a5308335105c51cfe6.md
@@ -0,0 +1,106 @@
+---
+id: 6717b6a5308335105c51cfe6
+title: Task 79
+challengeType: 19
+dashedName: task-79
+---
+
+<!-- (Audio) Jake: We can't afford to overlook this aspect again. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What, in Jake's opinion, can't they afford to do anymore?
+
+## --answers--
+
+They can't afford to prioritize this aspect.
+
+### --feedback--
+
+Jake's concern is about not ignoring the aspect, not about prioritizing it.
+
+---
+
+They can't afford to overlook this aspect again.
+
+---
+
+They can't afford to discuss this aspect.
+
+### --feedback--
+
+Jake is emphasizing the need to address this aspect, not avoid discussing it.
+
+---
+
+They can't afford to remember this aspect.
+
+### --feedback--
+
+Jake is referring to the danger of overlooking or ignoring this aspect, not about remembering it.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The verb `overlook` means to fail to notice or consider something important, often unintentionally. For example:
+
+`The team overlooked a critical error in the report, causing delays.` - Here, `overlooked` refers to failing to notice an error that had significant consequences.
+
+In this context, Jake is stressing that ignoring or neglecting this aspect would be a mistake.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "company2-center.png",
+    "characters": [
+      {
+        "character": "Jake",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.4
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-2.mp3",
+      "startTime": 1,
+      "startTimestamp": 65.16,
+      "finishTimestamp": 67.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Jake",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Jake",
+      "startTime": 1,
+      "finishTime": 3.78,
+      "dialogue": {
+        "text": "We can't afford to overlook this aspect again.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Jake",
+      "opacity": 0,
+      "startTime": 4.28
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
new file mode 100644
index 0000000000..a42f03be45
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d19c62da85c0982472a57.md
@@ -0,0 +1,68 @@
+---
+id: 671d19c62da85c0982472a57
+title: Task 80
+challengeType: 22
+dashedName: task-80
+---
+
+# --instructions--
+
+This is a review of the entire dialogue you just studied.
+
+Place the following phrases in the correct spot: `major vulnerability`, `security vulnerabilities`, `real time`, `learning curve`, `working overtime`,  and `quick post-mortem`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Linda and Jake discuss their design project experience. First, Linda suggests they do a BLANK to review what went well and what didn't. Jake admits to reviewing BLANK, though not always in BLANK.`
+
+`Linda recalls a time when the whole team was BLANK, and Jake was addressing a BLANK that required immediate attention. Both agree that the project was a BLANK, teaching them the importance of integrating security into the design process.`
+
+## --blanks--
+
+`quick post-mortem`
+
+### --feedback--
+
+It's a review done after a project to reflect on successes and challenges.
+
+---
+
+`security vulnerabilities`
+
+### --feedback--
+
+Those are weaknesses that could expose the system to threats.
+
+---
+
+`real time`
+
+### --feedback--
+
+It means checking things as they happen, without delay.
+
+---
+
+`working overtime`
+
+### --feedback--
+
+It refers to putting in extra hours to meet project needs.
+
+---
+
+`major vulnerability`
+
+### --feedback--
+
+It's a critical issue that requires immediate attention to avoid risks.
+
+---
+
+`learning curve`
+
+### --feedback--
+
+It represents the time and effort needed to master something new.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
new file mode 100644
index 0000000000..4cddc1fac3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f358f62320b707af87f.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f358f62320b707af87f
+title: Task 81
+challengeType: 19
+dashedName: task-81
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What is the main point of the blog post?
+
+## --answers--
+
+The team learned the importance of addressing security issues during design updates.
+
+---
+
+The team completed their project ahead of time.
+
+### --feedback--
+
+The text mentions that the team faced delays and challenges, not early completion.
+
+---
+
+The team avoided overtime by planning well.
+
+### --feedback--
+
+The text clearly states that the team had to work overtime to address a security problem.
+
+---
+
+The team decided to postpone security checks until after the project.
+
+### --feedback--
+
+The lesson learned was to check for security issues during design, not afterward.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the entire text. The main idea of the post is learning from mistakes and improving processes.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
new file mode 100644
index 0000000000..7c0d24843a
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f5590e7110b82940771.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f5590e7110b82940771
+title: Task 82
+challengeType: 19
+dashedName: task-82
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+Why did the team work overtime?
+
+## --answers--
+
+They wanted to impress the client by finishing early.
+
+### --feedback--
+
+The overtime was due to a security issue, not to finish early.
+
+---
+
+They needed more time to improve user feedback.
+
+### --feedback--
+
+The text does not mention overtime related to user feedback.
+
+---
+
+They found a serious security problem that needed to be fixed immediately.
+
+---
+
+They worked late to complete documentation.
+
+### --feedback--
+
+The text focuses on fixing security issues, not documentation.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Focus on the paragraph that starts with `Last week, our team had to…`. This explains why the team worked late.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
new file mode 100644
index 0000000000..773c16a6b0
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f7ca5f2aa0bb63b9e22.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f7ca5f2aa0bb63b9e22
+title: Task 83
+challengeType: 19
+dashedName: task-83
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What did the team learn from working overtime?
+
+## --answers--
+
+They learned to ignore minor bugs until the end of the project.
+
+### --feedback--
+
+The lesson was about addressing security issues promptly, not ignoring problems.
+
+---
+
+They learned to address security issues during design updates.
+
+---
+
+They found that working late is the best way to solve issues.
+
+### --feedback--
+
+The text emphasizes learning better practices, not relying on overtime work.
+
+---
+
+They realized that delays in security checks are acceptable.
+
+### --feedback--
+
+The text teaches the opposite: to stay on top of things and not fall behind.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `We now know that we need to…`. This teaches the main lesson: integrating security checks during design updates.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
new file mode 100644
index 0000000000..823679eb59
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1f94461c820bc68e3694.md
@@ -0,0 +1,62 @@
+---
+id: 671d1f94461c820bc68e3694
+title: Task 84
+challengeType: 19
+dashedName: task-84
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+Who was responsible for security?
+
+## --answers--
+
+Linda
+
+### --feedback--
+
+Linda is mentioned in the dialogue but isn't responsible for security.
+
+---
+
+Jake
+
+---
+
+The entire team
+
+### --feedback--
+
+The text specifically mentions that someone handles security.
+
+---
+
+A third-party consultant
+
+### --feedback--
+
+There is no mention of a consultant handling security in the text.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `Jake, who handles…`. This identifies him as the person responsible for security.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
new file mode 100644
index 0000000000..a3c58c5cc3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d1fab38a4710bd7a6b9c0.md
@@ -0,0 +1,62 @@
+---
+id: 671d1fab38a4710bd7a6b9c0
+title: Task 85
+challengeType: 19
+dashedName: task-85
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is Linda's blog post based on dialogue with Jake.
+
+`Lessons Learned from a Security Challenge` `By Linda` `October 26, 2024`
+
+`Last week, our team had to work overtime. We found a serious security problem in our design project. Jake, who handles security, worked late to fix it while the rest of the team waited to continue. It wasn't easy, but we learned a lot.`
+
+`We now know that we need to check for security issues while working on design updates, not after. This experience taught us how important it is to stay on top of things and not fall behind.`
+
+What lesson did the team take from the experience?
+
+## --answers--
+
+They decided to delay updates to reduce workload.
+
+### --feedback--
+
+The text emphasizes staying on top of things, not postponing updates.
+
+---
+
+They found that security issues aren't very important.
+
+### --feedback--
+
+The text highlights the importance of security, not downplaying it.
+
+---
+
+They decided to avoid security checks in future projects.
+
+### --feedback--
+
+The lesson was to integrate security checks into the design process, not avoid them.
+
+---
+
+They learned to stay on top of things and not fall behind.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Focus on the sentence that starts with `This experience taught us…`. This highlights the overall takeaway about staying on top of tasks.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
new file mode 100644
index 0000000000..9c0c877d80
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671d292ef6180210164c33e8.md
@@ -0,0 +1,196 @@
+---
+id: 671d292ef6180210164c33e8
+title: "Dialogue 3: Tech Conference Experience"
+challengeType: 21
+dashedName: dialogue-3-tech-conference-experience
+---
+
+# --description--
+
+Watch the video below to understand the context of the upcoming lessons.
+
+# --assignment--
+
+Watch the video
+
+# --scene--
+
+```json
+{
+"setup": {
+ "background": "cafe.png",
+ "characters": [
+   {
+     "character": "Maria",
+     "position": { "x": -25, "y": 0, "z": 1 }
+   },
+   {
+     "character": "Brian",
+     "position": { "x": 125, "y": 0, "z": 1 }
+   }
+ ],
+ "audio": {
+   "filename": "B1_2-3.mp3",
+   "startTime": 1
+ },
+ "alwaysShowDialogue": true
+},
+"commands": [
+ {
+   "character": "Maria",
+   "position": { "x": 25, "y": 0, "z": 1 },
+   "startTime": 0
+ },
+ {
+   "character": "Brian",
+   "position": { "x": 70, "y": 0, "z": 1 },
+   "startTime": 0.5
+ },
+ {
+   "character": "Maria",
+   "startTime": 1,
+   "finishTime": 4.38,
+   "dialogue": {
+     "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 4.64,
+   "finishTime": 7.68,
+   "dialogue": {
+     "text": "Wow, Maria. So nice to see you. Let's catch up.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 7.74,
+   "finishTime": 10.86,
+   "dialogue": {
+     "text": "I attended some really interesting sessions these last few days.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 11.28,
+   "finishTime": 14.56,
+   "dialogue": {
+     "text": "Yeah, me too. I checked out the latest in Python development.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 14.9,
+   "finishTime": 18.1,
+   "dialogue": {
+     "text": "Do you remember how we used to get excited about new tech back at work?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 18.74,
+   "finishTime": 23.24,
+   "dialogue": {
+     "text": "Absolutely. We used to spend our lunch breaks chatting about the newest trends in programming.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 23.84,
+   "finishTime": 25.74,
+   "dialogue": {
+     "text": "Did you go to the AI workshop yesterday?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 25.74,
+   "finishTime": 31.16,
+   "dialogue": {
+     "text": "Yes, I did. While the speaker was going through neural networks, I thought about our project last year.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 31.62,
+   "finishTime": 35.4,
+   "dialogue": {
+     "text": "I remember you would often stay late, fine-tuning the code until it was just right.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 36.72,
+   "finishTime": 40.24,
+   "dialogue": {
+     "text": "Now I take care of the training so that others can do the same.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 40.74,
+   "finishTime": 44.66,
+   "dialogue": {
+     "text": "Speaking of which, did you manage to catch the cyber security talk this morning?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 45.16,
+   "finishTime": 47.6,
+   "dialogue": {
+     "text": "I missed it. I was in a design sprint workshop.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Maria",
+   "startTime": 48.04,
+   "finishTime": 50.66,
+   "dialogue": {
+     "text": "We brainstormed for two hours straight. How was it?",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 50.66,
+   "finishTime": 54.2,
+   "dialogue": {
+     "text": "It was eye-opening, especially the parts about protecting data.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "startTime": 54.54,
+   "finishTime": 58.28,
+   "dialogue": {
+     "text": "It made me think of how we handled security in our earlier projects.",
+     "align": "center"
+   }
+ },
+ {
+   "character": "Brian",
+   "position": { "x": 125, "y": 0, "z": 1 },
+   "startTime": 58.78
+ },
+ {
+   "character": "Maria",
+   "position": { "x": -25, "y": 0, "z": 1 },
+   "startTime": 59.28
+ }
+]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
new file mode 100644
index 0000000000..b449610707
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7579f5e0000560fcce55.md
@@ -0,0 +1,94 @@
+---
+id: 671f7579f5e0000560fcce55
+title: Task 86
+challengeType: 22
+dashedName: task-86
+---
+
+<!-- (Audio) Maria: Brian, is that you? What a surprise to see you here at PyCon. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Brian, is that you? BLANK BLANK surprise to see you here at PyCon.`
+
+## --blanks--
+
+`What`
+
+### --feedback--
+
+This word is used as an intensifier to express strong emotion or emphasis.
+
+---
+
+`a`
+
+### --feedback--
+
+This is the indefinite article used with singular, countable nouns following `what` to enhance the expression.
+
+# --explanation--
+
+The structure `what` + an indefinite article is used to emphasize strong feelings or reactions about something. It often expresses surprise, admiration, or emotion. For example:
+
+`What a beautiful day it is!` - Here, the structure highlights the speaker's admiration for the day.
+
+Similarly, in Maria's sentence, `What a surprise` emphasizes her astonishment at seeing Brian at PyCon.
+
+`PyCon` is a well-known conference for Python programming enthusiasts, developers, and professionals. It provides a platform for learning, networking, and sharing Python-related knowledge.  For example:
+
+`I attended PyCon last year and learned about the latest Python frameworks.` - This means the person was at PyCon last year and learned a lot.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.56,
+      "finishTimestamp": 3.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
new file mode 100644
index 0000000000..3b03739af2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7592e571ad05716b2c67.md
@@ -0,0 +1,90 @@
+---
+id: 671f7592e571ad05716b2c67
+title: Task 87
+challengeType: 19
+dashedName: task-87
+---
+
+<!-- (Audio) Maria: Brian, is that you? What a surprise to see you here at PyCon! -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Brian wants to keep the conversation flowing. What should he say next?
+
+## --answers--
+
+`Sorry Maria, I'm running late for my talk. Let's meet later.`
+
+### --feedback--
+
+While it suggests politeness, it doesn't match the friendly and enthusiastic tone of the original answer.
+
+---
+
+`Wow Maria! So nice to see you. Let's catch up.`
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+In the dialogue, Brian responds with excitement and friendliness.
+
+The correct answer reflects his positive attitude with phrases like `So nice to see you` and `Let's catch up`, which align with the original conversation's tone.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 0.56,
+      "finishTimestamp": 3.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.38,
+      "dialogue": {
+        "text": "Brian, is that you? What a surprise to see you here at PyCon.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.88
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
new file mode 100644
index 0000000000..c3ebc93249
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ab41a1520581f5923a.md
@@ -0,0 +1,84 @@
+---
+id: 671f75ab41a1520581f5923a
+title: Task 88
+challengeType: 22
+dashedName: task-88
+---
+
+<!-- (Audio) Brian: Wow Maria! So nice to see you. Let's catch up. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Wow Maria! So nice to see you. Let's BLANK up.`
+
+## --blanks--
+
+`catch`
+
+### --feedback--
+
+Combined with the following word, it's a phrase that Brian uses to suggest talking with Maria about what they've both been up to recently.
+
+# --explanation--
+
+`Catch up` means to meet and update each other on recent events or activities after some time apart. For examples:
+
+- `She stayed late to catch up on her tasks.` - Meaning she worked longer to finish tasks she was behind on.
+
+- `Let's catch up during the meeting tomorrow.` - Meaning you and the other person can talk and update each other at the meeting.
+
+In this context, Brian is telling Maria that they should talk to each other to know what they've been doing.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 4.2,
+      "finishTimestamp": 7.24
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.04,
+      "dialogue": {
+        "text": "Wow, Maria. So nice to see you. Let's catch up.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.54
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
new file mode 100644
index 0000000000..66fec57d96
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75ca1748e8059234fa3d.md
@@ -0,0 +1,104 @@
+---
+id: 671f75ca1748e8059234fa3d
+title: Task 89
+challengeType: 19
+dashedName: task-89
+---
+
+<!-- (Audio) Brian: I attended some really interesting sessions these last few days. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What has Brian been doing at PyCon?
+
+## --answers--
+
+He has been organizing the sessions.
+
+### --feedback--
+
+Brian says he attended the sessions, not that he organized them.
+
+---
+
+He has been attending some interesting sessions.
+
+---
+
+He has been presenting at the sessions.
+
+### --feedback--
+
+Brian talks about attending sessions, not presenting them.
+
+---
+
+He has been networking with other attendees.
+
+### --feedback--
+
+While Brian might have been networking, his statement is specifically about attending sessions.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+To `attend sessions` means to participate in organized events, such as talks, discussions, or meetings, often as an audience member. It typically refers to events at conferences, workshops, or professional gatherings. For example:
+
+`She attended several training sessions as part of her trainee program.` - Here, she took in a training because this is part of the trainee program.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.3,
+      "finishTimestamp": 10.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "I attended some really interesting sessions these last few days.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
new file mode 100644
index 0000000000..f9e82f1d83
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75e368cbd505a301ca7d.md
@@ -0,0 +1,94 @@
+---
+id: 671f75e368cbd505a301ca7d
+title: Task 90
+challengeType: 19
+dashedName: task-90
+---
+
+<!-- SPEAKING -->
+
+<!-- (Audio) Brian: I attended some really interesting sessions these last few days. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Maria succinctly tell Brian she attended some sessions at PyCon as well?
+
+## --answers--
+
+`Yeah, me too.`
+
+---
+
+`Why not?`
+
+### --feedback--
+
+`Why not?` doesn't indicate agreement or a shared experience.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Me too` is used to express agreement or show that the same statement applies to the speaker. It is a concise and informal way to respond to shared experiences or feelings.  For example:
+
+Person 1: `I love Python programming.`
+
+Person 2: `Me too.`  - Meaning they love programming in Python as well.
+
+In this context, Maria could say `Yeah, me too` to quickly let Brian know that she also attended really interesting sessions at PyCon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 7.3,
+      "finishTimestamp": 10.42
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.12,
+      "dialogue": {
+        "text": "I attended some really interesting sessions these last few days.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 4.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
new file mode 100644
index 0000000000..f20217b44d
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f75fea017ea05b31a80c6.md
@@ -0,0 +1,94 @@
+---
+id: 671f75fea017ea05b31a80c6
+title: Task 91
+challengeType: 22
+dashedName: task-91
+---
+
+<!-- (Audio) Maria: Yeah, me too. I checked out the latest in Python development. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Yeah, me too. I BLANK out the BLANK in Python development.`
+
+## --blanks--
+
+`checked`
+
+### --feedback--
+
+This is the past tense of the verb `check`, meaning to examine or explore something.
+
+---
+
+`latest`
+
+### --feedback--
+
+This word refers to the most recent or up-to-date version of something.
+
+# --explanation--
+
+`Check out` means to examine, explore, or take a look at something. It is often used informally when discussing things of interest. For example:
+
+`I checked out the new library in town.` - This means you went to the new library to see if you liked it.
+
+`Latest` refers to the most recent or up-to-date version of something. For example:
+
+`They announced the latest features in the software update.` - This means the most recent features of the software were announced by the team or company.
+
+In her sentence, Maria says she attended events where the most recent developments in Python were discussed during her time at PyCon.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 10.74,
+      "finishTimestamp": 14.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.48,
+      "dialogue": {
+        "text": "Yeah, me too. I checked out the latest in Python development.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
new file mode 100644
index 0000000000..204772e6e1
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f761703824805c35c2eda.md
@@ -0,0 +1,108 @@
+---
+id: 671f761703824805c35c2eda
+title: Task 92
+challengeType: 19
+dashedName: task-92
+---
+
+<!-- (Audio) Maria: Do you remember how we used to get excited about new tech back at work? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What is Maria asking Brian about?
+
+## --answers--
+
+She is asking if he still gets excited about technology.
+
+### --feedback--
+
+Maria is referring to how they used to feel in the past, not the present.
+
+---
+
+She is asking if they used to dislike new technology.
+
+### --feedback--
+
+Maria mentions getting excited about new technology, not disliking it.
+
+---
+
+She is asking if he remembers how they used to feel excited about new technology at work.
+
+---
+
+She is asking if he remembers the latest tech updates.
+
+### --feedback--
+
+Maria's focus is on their shared feelings about new technology in the past, not current updates.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+The phrase created by using `get` followed by an adjective describes a change of state or becoming a certain way. For example:
+
+- `They always get excited when a new Python update is released.` - `Get excited` means to become enthusiastic or thrilled. This means they are always filled with enthusiasm when a new Python update comes up.
+
+- `He got tired after working on the project all night.` - This means he wasn't tired before, but he is tired now, after a whole night of working on the project.
+
+In Maria's sentence, she is asking if Brian remembers the enthusiasm they used to feel about new technologies while working together.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.46,
+      "finishTimestamp": 17.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.2,
+      "dialogue": {
+        "text": "Do you remember how we used to get excited about new tech back at work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
new file mode 100644
index 0000000000..08bdc903c8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f765a22e32e05d4f5074e.md
@@ -0,0 +1,94 @@
+---
+id: 671f765a22e32e05d4f5074e
+title: Task 93
+challengeType: 19
+dashedName: task-93
+---
+
+<!-- (Audio) Maria: Do you remember how we used to get excited about new tech back at work? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Brian tell Maria he definitely remembers the excitement about new tech Maria mentioned?
+
+## --answers--
+
+`Absolutely.`
+
+---
+
+`I vaguely remember.`
+
+### --feedback--
+
+`I vaguely remember` means that something is not very vivid in the speaker's memory.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+The word `Absolutely` is used to express strong agreement or affirmation. It is often used in response to a statement or question to emphasize certainty or enthusiasm. For example:
+
+Person 1: `Do you think this approach will work?`
+
+Person 2: `Absolutely!` - This means you are sure the approach will be successful.
+
+In this context, Brian could say `Absolutely` to enthusiastically confirm that he remembers getting excited about new technology at work.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 14.46,
+      "finishTimestamp": 17.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 4.2,
+      "dialogue": {
+        "text": "Do you remember how we used to get excited about new tech back at work?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.7
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
new file mode 100644
index 0000000000..6096e864af
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76959b3ca3060eddbe70.md
@@ -0,0 +1,103 @@
+---
+id: 671f76959b3ca3060eddbe70
+title: Task 94
+challengeType: 22
+dashedName: task-94
+---
+
+<!-- (Audio) Brian: Absolutely. We used to spend our lunch breaks chatting about the newest trends in programming. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Absolutely. We used to spend our lunch breaks BLANK about the newest BLANK in programming.`
+
+## --blanks--
+
+`chatting`
+
+### --feedback--
+
+This word means talking informally with others, often in a relaxed or casual way.
+
+---
+
+`trends`
+
+### --feedback--
+
+This word refers to general directions or popular developments in a particular field.
+
+# --explanation--
+
+`Chat` means to talk informally, usually in a relaxed or casual setting. It often refers to light or friendly conversations. For example:
+
+`We chatted about our plans for the weekend during the coffee break.` - Meaning they talked about the plans.
+
+A `trend` refers to a general direction in which something is developing or becoming popular. In the context of programming, it refers to popular technologies or approaches. For example:
+
+`The trend of using AI in everyday applications is growing rapidly.` - This means the general idea is to start using AI in the creation of commonly used applications.
+
+In this sentence, Brian talks about how they used to have informal conversations (`chatting`) about new and popular developments (`trends`) in programming during lunch breaks.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 18.1,
+      "finishTimestamp": 22.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3.46,
+      "dialogue": {
+        "text": "Absolutely. We used to spend our lunch breaks",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 3.46,
+      "finishTime": 5.7,
+      "dialogue": {
+        "text": "chatting about the newest trends in programming.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 6.2
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
new file mode 100644
index 0000000000..846743c10c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76b915c1cf062570fdfc.md
@@ -0,0 +1,138 @@
+---
+id: 671f76b915c1cf062570fdfc
+title: Task 95
+challengeType: 19
+dashedName: task-95
+---
+
+<!-- (Audio) Brian: Did you go to the AI workshop yesterday? Maria: Yes, I did. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Which workshop can we be sure Maria attended yesterday?
+
+## --answers--
+
+The Python workshop.
+
+### --feedback--
+
+Maria specifically confirms attending the AI workshop, not the Python workshop.
+
+---
+
+The AI workshop.
+
+---
+
+The cybersecurity workshop.
+
+### --feedback--
+
+Maria attended the AI workshop, as confirmed in her response.
+
+---
+
+The design workshop.
+
+### --feedback--
+
+Maria explicitly says she attended the AI workshop, not the design workshop.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+AI stands for `Artificial Intelligence`, a field of computer science that focuses on creating systems capable of performing tasks that typically require human intelligence, such as learning, reasoning, and decision-making. For example:
+
+`AI is being used to improve natural language processing in chatbots.` - This means that Artificial Intelligence is used to help chatbots communicate in a more efficient way with humans.
+
+An `AI workshop` is a session or event where participants learn about AI concepts, tools, or applications. These workshops often include hands-on activities to help attendees understand and implement AI technologies. For example:
+
+`The AI workshop covered topics like machine learning and neural networks.` - This means the AI workshop taught machine learning and neural networks.
+
+In this dialog, Maria confirms that she attended an AI workshop yesterday.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 23.3,
+      "finishTimestamp": 26.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 3,
+      "dialogue": {
+        "text": "Did you go to the AI workshop yesterday?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 3
+    },
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 3
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "Yes, I did.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
new file mode 100644
index 0000000000..c741f69cbb
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76d4b7384c063c097048.md
@@ -0,0 +1,103 @@
+---
+id: 671f76d4b7384c063c097048
+title: Task 96
+challengeType: 22
+dashedName: task-96
+---
+
+<!-- (Audio) Maria: While the speaker was going through neural networks, I thought about our project last year. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`While the speaker was BLANK BLANK neural networks, I thought about our project last year.`
+
+## --blanks--
+
+`going`
+
+### --feedback--
+
+This verb is used as part of the phrasal verb `go through`, meaning to review or explain something in detail. Use it in the `-ing` form.
+
+---
+
+`through`
+
+### --feedback--
+
+This preposition is part of the phrasal verb `go through`, referring to a detailed explanation or review.
+
+# --explanation--
+
+To `go through` means to review, explain, or examine something in detail. It is often used when covering material in a structured or methodical way. For example:
+
+`The instructor went through the project requirements step by step.` - This means the instructor checked the requirements in a detailed manner.
+
+`Neural networks` are a type of artificial intelligence inspired by the structure and function of the human brain. For example:
+
+`The AI model uses neural networks to classify images with high accuracy.` - This means the AI model uses this structure based on the human brain to process data.
+
+In this sentence, Maria describes how the speaker was explaining neural networks during the workshop, prompting her to think about a past project.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 26.66,
+      "finishTimestamp": 30.72
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "While the speaker was going through neural networks,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3.48,
+      "finishTime": 5.06,
+      "dialogue": {
+        "text": "I thought about our project last year.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
new file mode 100644
index 0000000000..e8e9fd0725
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f76eede9f200652954940.md
@@ -0,0 +1,91 @@
+---
+id: 671f76eede9f200652954940
+title: Task 97
+challengeType: 22
+dashedName: task-97
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`I remember you would often stay late, BLANK the code until it was just right.`
+
+## --blanks--
+
+`fine-tuning`
+
+### --feedback--
+
+This is a compound word that refers to making small adjustments to improve something or make it perfect. remember to use `-`
+
+# --explanation--
+
+`Fine-tuning` means making small, precise adjustments to improve something or optimize it to achieve the desired result. It is often used in technical or creative contexts. For example:
+
+`She spent hours fine-tuning the presentation to ensure it was perfect for the audience.` - This means she adjusted even the smallest details of the presentation to make it perfect.
+
+In this sentence, Maria describes how Brian would carefully adjust the code, making it as efficient or correct as possible.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 34.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "fine-tuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
new file mode 100644
index 0000000000..581e026f56
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7708379ef00668b843d4.md
@@ -0,0 +1,119 @@
+---
+id: 671f7708379ef00668b843d4
+title: Task 98
+challengeType: 19
+dashedName: task-98
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Did Brian use to work regular hours to adjust the code?
+
+## --answers--
+
+No, he would often stay late fine-tuning the code.
+
+---
+
+Yes, he only worked regular hours to adjust the code.
+
+### --feedback--
+
+Maria explicitly mentions that Brian would often stay late, which suggests he worked beyond regular hours.
+
+---
+
+No, he only adjusted the code during meetings.
+
+### --feedback--
+
+Maria describes Brian staying late to fine-tune the code, not working on it exclusively during meetings.
+
+---
+
+Yes, but only when there was an urgent task.
+
+### --feedback--
+
+Maria indicates that staying late was a regular habit for Brian, not something limited to urgent tasks.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Would` in this context expresses a habitual action or repeated behavior in the past. It is often used to describe actions that someone regularly performed, similar to `used to`.
+
+However, `would` focuses more on the action itself, while `used to` can describe states or habits. For example:
+
+- `She would always read a book before going to bed.` - Reading a book before going to bed was a common action for her.
+
+`She used to live in New York before moving here.` - here `used to` is used because living in a place expresses a state of things not an action or something you would habitually do.
+
+In this sentence, Maria uses `would` to describe Brian's repeated habit of staying late to fine-tune the code, which emphasizes his dedication.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 34.96
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "fine-tuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.48
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
new file mode 100644
index 0000000000..54d64453b8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7727d2e4240680c126bc.md
@@ -0,0 +1,143 @@
+---
+id: 671f7727d2e4240680c126bc
+title: Task 99
+challengeType: 19
+dashedName: task-99
+---
+
+<!-- (Audio) Maria: I remember you would often stay late, fine-tuning the code until it was just right. Brian: Now I take care of the training so that others can do the same. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Brian do now, and why does he do that?
+
+## --answers--
+
+He still fine-tunes the code himself, but not as often.
+
+### --feedback--
+
+Brian says he focuses on training others now, not doing the fine-tuning himself.
+
+---
+
+He takes care of hiring new team members for coding tasks.
+
+### --feedback--
+
+Brian mentions handling training, not hiring.
+
+---
+
+He reviews others' work without providing training.
+
+### --feedback--
+
+Brian emphasizes that he takes care of the training to help others learn.
+
+---
+
+He takes care of the training so that others can stay late to fine-tune the code.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+The phrase `so that` is used to express purpose or reason, showing why an action is done. For example:
+
+`She explained the process clearly so that everyone could understand it.` - This means her intent with explaining the process clearly was to make everyone understand it.
+
+In the dialog, Brian uses it to show that his goal in providing training is to empower others to perform at the same level as he did when he fine-tuned the code himself.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 30.98,
+      "finishTimestamp": 39.8
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 2.84,
+      "dialogue": {
+        "text": "I remember you would often stay late,",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "startTime": 3,
+      "finishTime": 4.98,
+      "dialogue": {
+        "text": "finetuning the code until it was just right.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 5.64
+    },
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 5.64
+    },
+    {
+      "character": "Brian",
+      "startTime": 6.3,
+      "finishTime": 9.82,
+      "dialogue": {
+        "text": "Now I take care of the training so that others can do the same.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 10.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
new file mode 100644
index 0000000000..bc15b04b00
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f774373f2ce0696fe9621.md
@@ -0,0 +1,98 @@
+---
+id: 671f774373f2ce0696fe9621
+title: Task 100
+challengeType: 22
+dashedName: task-100
+---
+
+<!-- (Audio) Brian: Speaking of which, did you manage to catch the cybersecurity talk this morning? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Speaking of which, did you BLANK to catch the BLANK talk this morning?`
+
+## --blanks--
+
+`manage`
+
+### --feedback--
+
+This word means to succeed in doing something, often with some difficulty.
+
+---
+
+`cybersecurity`
+
+### --feedback--
+
+This word refers to the practice of protecting systems, networks, and data from digital threats.
+
+# --explanation--
+
+`Speaking of which` is used to link a new topic to something that was just mentioned, often as a natural transition in conversation. For example:
+
+`The keynote speaker mentioned Python. Speaking of which, have you tried the new Python library?` - here, `speaking of which` is used to make the transition between the mention the keynote speaker made and the new library.
+
+In this context, `manage` means to succeed in doing something, especially something that might have been difficult. For example:
+
+`Despite the time crunch, I managed to submit the report on time.` - This means you were successful in sending the report before your deadline.
+
+`Cybersecurity` refers to the practice of protecting computer systems, networks, and data from digital attacks or unauthorized access. For example:
+
+`The company invested in cybersecurity measures to prevent data breaches.` - This means the company is concerned with protecting their systems.
+
+In this sentence, Brian asks if Maria attended the talk about protecting systems and data from threats in the morning.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 40.1,
+      "finishTimestamp": 44.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 5.12,
+      "dialogue": {
+        "text": "Speaking of which, did you manage to catch the cybersecurity talk this morning?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.62
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
new file mode 100644
index 0000000000..5a12c90413
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7767854d6806ac4fb5f4.md
@@ -0,0 +1,110 @@
+---
+id: 671f7767854d6806ac4fb5f4
+title: Task 101
+challengeType: 19
+dashedName: task-101
+---
+
+<!-- (Audio) Maria: I missed it. I was in a design sprint workshop. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+Why could Maria not attend the cybersecurity workshop in the morning?
+
+## --answers--
+
+Because she wasn't interested in the topic.
+
+### --feedback--
+
+Maria doesn't mention a lack of interest; she was in another workshop.
+
+---
+
+Because she forgot about it.
+
+### --feedback--
+
+Maria says she missed it because she was attending the design sprint workshop, not because she forgot.
+
+---
+
+Because she was in a design sprint workshop.
+
+---
+
+Because it was canceled.
+
+### --feedback--
+
+Maria explains that she missed the workshop because she was in another one, not because it was canceled.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+`Miss` means to fail to attend or participate in something. For example:
+
+`I missed the meeting because I was stuck in traffic.` - This means that you spent too long in traffic and this caused a delay to get to work.
+
+A `design sprint` is a time-boxed, collaborative process where a team works on solving a design problem or developing a prototype within a short period, usually a few days. For example:
+
+`The team completed a design sprint to test the new user interface concept.` This means the team participated in this collaborative process to test the concept.
+
+In this context, Maria couldn't attend the cybersecurity workshop because she was actively participating in a design sprint workshop.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.72,
+      "finishTimestamp": 47.16
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.44,
+      "dialogue": {
+        "text": "I missed it. I was in a design sprint workshop.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 3.94
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
new file mode 100644
index 0000000000..6836a92549
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77bfcd2bc306c2f6f338.md
@@ -0,0 +1,114 @@
+---
+id: 671f77bfcd2bc306c2f6f338
+title: Task 102
+challengeType: 19
+dashedName: task-102
+---
+
+<!-- (Audio) Maria: We brainstormed for two hours straight. How was it? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Maria say they did at the design sprint workshop?
+
+## --answers--
+
+They brainstormed for two hours straight.
+
+### --feedback--
+
+Maria explains that they spent two hours brainstorming during the design sprint workshop.
+
+---
+
+They worked individually for two hours straight.
+
+### --feedback--
+
+Maria mentions brainstorming, which is a collaborative activity, not individual work.
+
+---
+
+They completed the entire design in two hours straight.
+
+### --feedback--
+
+Maria says they brainstormed, not that they finished the entire design.
+
+---
+
+They took frequent breaks during their brainstorming.
+
+### --feedback--
+
+Maria emphasizes that they brainstormed for two hours without stopping.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+To `brainstorm` means to generate ideas or solutions through an open, collaborative discussion, often in a group. It focuses on creativity and problem-solving. For example:
+
+`The team brainstormed ideas for the new marketing campaign.` - This means that the team collaboratively discussed new ideas together for the new marketing campaign.
+
+`Straight` in this context means continuously or without stopping. It emphasizes uninterrupted activity. For example:
+
+`He studied for five hours straight to prepare for the exam.` - This means he did not stop studying for five hours to prepare for the exam.
+
+In this sentence, Maria explains that they brainstormed for two continuous hours during the design sprint workshop.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Maria",
+        "position": {
+          "x": 50,
+          "y": 0,
+          "z": 1.5
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 47.4,
+      "finishTimestamp": 50.22
+    }
+  },
+  "commands": [
+    {
+      "character": "Maria",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Maria",
+      "startTime": 1,
+      "finishTime": 3.82,
+      "dialogue": {
+        "text": "We brainstormed for two hours straight. How was it?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Maria",
+      "opacity": 0,
+      "startTime": 4.32
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
new file mode 100644
index 0000000000..32728be1ce
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f77dedcc3b006dcfa9c73.md
@@ -0,0 +1,92 @@
+---
+id: 671f77dedcc3b006dcfa9c73
+title: Task 103
+challengeType: 22
+dashedName: task-103
+---
+
+<!-- (Audio) Brian: It was eye-opening, especially the parts about protecting data. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It was BLANK, especially the parts about BLANK data.`
+
+## --blanks--
+
+`eye-opening`
+
+### --feedback--
+
+This word means enlightening or revealing, often leading to a new understanding or perspective. It's a composite word, so don't forget the hyphen between the words.
+
+---
+
+`protecting`
+
+### --feedback--
+
+This word is the `-ing` form of a verb used after the preposition `about`, referring to the act of safeguarding something.
+
+# --explanation--
+
+The term `eye-opening` describes something that is enlightening or surprising, often revealing new or unexpected information. For example:
+
+`The workshop on cybersecurity was eye-opening for the team.` - this means the workshop brought many new ideas and it helped the team understand a lot of things about cybersecurity.
+
+When a verb, like `to protect` follows a preposition, like `about`, it must be in the `-ing` form (gerund). This structure is common in English to describe actions connected to the preposition.  In the sentence, `about protecting` highlights the topic being discussed. For example:
+
+`She is interested in learning more about artificial intelligence.` - here, `in` is the preposition and `to learn` is the verb in the `-ing` form.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.22,
+      "finishTimestamp": 53.76
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It was eye-opening, especially the parts about protecting data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
new file mode 100644
index 0000000000..9b561ad71f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7800b5174406f2d0df76.md
@@ -0,0 +1,70 @@
+---
+id: 671f7800b5174406f2d0df76
+title: Task 106
+challengeType: 22
+dashedName: task-106
+---
+
+# --instructions--
+
+This is a review of the entire dialogue you just studied.
+
+Place the following phrases in the correct spot:
+
+`design sprint workshop`, `neural networks`, `AI workshop`, `cybersecurity talk`, `fine-tuning the code`, and `newest trends in programming`.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Maria and Brian meet at PyCon and talk about their experiences at the conference. Maria mentions attending an BLANK, where she explored the BLANK. Brian recalls how they used to chat during lunch breaks about the BLANK.`
+
+`Maria also remembers a project from last year and how Brian spent time BLANK. Brian, who now focuses on training, asks if Maria attended the BLANK, but she missed it because she was busy in a BLANK.`
+
+## --blanks--
+
+`AI workshop`
+
+### --feedback--
+
+Maria participated in this workshop yesterday.
+
+---
+
+`neural networks`
+
+### --feedback--
+
+This topic is part of a workshop that Maria references. It deals with systems modeled after the human brain to process data.
+
+---
+
+`newest trends in programming`
+
+### --feedback--
+
+They used to enjoy conversations about the latest technologies and developments in the programming world.
+
+---
+
+`fine-tuning the code`
+
+### --feedback--
+
+This phrase refers to making small adjustments to ensure the code works perfectly, which Maria recalls Brian often doing.
+
+---
+
+`cybersecurity talk`
+
+### --feedback--
+
+This talk focused on data protection, a topic that Brian found insightful.
+
+---
+
+`design sprint workshop`
+
+### --feedback--
+
+This type of session involves rapid brainstorming and problem-solving activities, which Maria mentions participating in for two hours.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
new file mode 100644
index 0000000000..3ce7f61d20
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f78193bb0510709b169b8.md
@@ -0,0 +1,62 @@
+---
+id: 671f78193bb0510709b169b8
+title: Task 107
+challengeType: 19
+dashedName: task-107
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What was Maria and Brian's dream years ago?
+
+## --answers--
+
+To work on AI projects together.
+
+### --feedback--
+
+Their dream involved attending an event, not a specific project focus.
+
+---
+
+To attend one of the biggest tech conferences, PyCon.
+
+---
+
+To become senior developers in their office.
+
+### --feedback--
+
+The text describes them as junior developers with a different goal in mind.
+
+---
+
+To start their own tech company.
+
+### --feedback--
+
+The dream mentioned is related to attending a tech conference, not starting a business.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+Focus on the sentence that starts with `Years ago, Maria and Brian…`. This sentence explains Maria and Brian's goal when they were junior developers, sitting in their office and dreaming about the future.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
new file mode 100644
index 0000000000..41e895640e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7834b9a323071f7a325e.md
@@ -0,0 +1,62 @@
+---
+id: 671f7834b9a323071f7a325e
+title: Task 108
+challengeType: 19
+dashedName: task-108
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+How did Maria and Brian feel about programming trends when they were junior developers?
+
+## --answers--
+
+They were uninterested in programming trends.
+
+### --feedback--
+
+The text suggests they felt quite the opposite about programming trends.
+
+---
+
+They preferred only to work on established technologies.
+
+### --feedback--
+
+The text indicates that they were enthusiastic about new trends, not sticking solely to established tech.
+
+---
+
+They ignored new trends to focus on their work.
+
+### --feedback--
+
+Ignoring trends doesn't align with the text's description of their excitement.
+
+---
+
+They were excited about every new programming trend.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+Focus on the sentence that starts with `Back then, they were junior developers…`. This sentence provides insight into how Maria and Brian felt about new programming trends early in their careers.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
new file mode 100644
index 0000000000..ae445d6343
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f7852f3a7e80737cc21d0.md
@@ -0,0 +1,62 @@
+---
+id: 671f7852f3a7e80737cc21d0
+title: Task 109
+challengeType: 19
+dashedName: task-109
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What sessions are Maria and Brian attending at PyCon?
+
+## --answers--
+
+Sessions on programming languages and web design.
+
+### --feedback--
+
+The text gives different examples of the session topics they attended.
+
+---
+
+Sessions on Python basics and data entry.
+
+### --feedback--
+
+The topics mentioned in the text are not related to basic or introductory subjects.
+
+---
+
+Sessions on AI and cybersecurity.
+
+---
+
+Sessions on project management and networking.
+
+### --feedback--
+
+The focus of the sessions mentioned in the text is more technical and specific.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+Focus on the sentence that starts with `Fast forward to today…`. This sentence lists the sessions that Maria and Brian are attending at PyCon, reflecting their current interests.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
new file mode 100644
index 0000000000..a0728b6376
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f786a18c275074d55d298.md
@@ -0,0 +1,62 @@
+---
+id: 671f786a18c275074d55d298
+title: Task 110
+challengeType: 19
+dashedName: task-110
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+What does the text mean when it says, `Their dream is no longer just a dream—it's real`?
+
+## --answers--
+
+They are dreaming of attending PyCon in the future.
+
+### --feedback--
+
+The text indicates that they have already realized their dream, not just planned it.
+
+---
+
+Maria and Brian are finally attending PyCon, making their dream come true.
+
+---
+
+They forgot about PyCon over the years.
+
+### --feedback--
+
+The text shows that they kept their goal of attending PyCon, without forgetting it.
+
+---
+
+They are planning to attend PyCon next year.
+
+### --feedback--
+
+The text indicates they are already attending, not planning for a future event.
+
+## --video-solution--
+
+2
+
+# --explanation
+
+Focus on the sentence that starts with `Their dream is no longer just a dream…`. This sentence tells us that Maria and Brian are now living the dream they once envisioned.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
new file mode 100644
index 0000000000..5602c903a3
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/671f788c2665b807636b31a8.md
@@ -0,0 +1,62 @@
+---
+id: 671f788c2665b807636b31a8
+title: Task 111
+challengeType: 19
+dashedName: task-111
+---
+
+<!-- READING -->
+
+# --instructions--
+
+Read the text and answer the question below.
+
+# --questions--
+
+## --text--
+
+This is a prologue to the conversation on PyCon.
+
+`Years ago, Maria and Brian sat in their office, imagining what it would be like to attend one of the world's biggest tech conferences, PyCon. Back then, they were junior developers, excited about every new programming trend and always pushing each other to improve. They promised they would attend PyCon again one day.`
+
+`Fast forward to today: here they are, attending sessions on AI and cybersecurity, talking about design sprints, and reflecting on how far they've come. Their dream is no longer just a dream—it's real, and they're living it.`
+
+`The adventure has only just begun.`
+
+Why is attending PyCon significant for Maria and Brian?
+
+## --answers--
+
+It fulfills a long-held goal they had since they were junior developers.
+
+---
+
+It's their first time working on a new tech project together.
+
+### --feedback--
+
+The text doesn't mention a new project at PyCon, but rather that attending the conference fulfills a past goal.
+
+---
+
+It allowed them to meet their favorite tech influencers.
+
+### --feedback--
+
+The text emphasizes achieving a personal dream, not meeting influencers.
+
+---
+
+It gave them a chance to launch their own product.
+
+### --feedback--
+
+There is no mention of a product launch; the significance lies in achieving their goal of attending PyCon.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+Focus on the sentence that starts with `They promised they would…`. This sentence shows that attending PyCon was their goal, making it significant as it fulfills a long-held promise.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
new file mode 100644
index 0000000000..74eebec915
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6746005e0cf96b701d861793.md
@@ -0,0 +1,108 @@
+---
+id: 6746005e0cf96b701d861793
+title: Task 29
+challengeType: 19
+dashedName: task-29
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --description--
+
+Listen to the audio and answer the question.
+
+# --questions--
+
+## --text--
+
+What is Lisa asking James about?
+
+## --answers--
+
+She's asking if it took too long to find the bug.
+
+### --feedback--
+
+Lisa is not asking about how long it took. She just wants to know if it was stressful.
+
+---
+
+She's trying to confirm if finding the bug was a stressful task.
+
+---
+
+She's asking if James was the one who didn't update the credentials.
+
+### --feedback--
+
+Lisa is not trying to know who's responsible for it.
+
+---
+
+She's asking if there is anything she can do to help.
+
+### --feedback--
+
+Help is no longer necessary, since James has already fixed the problem.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+The word `stressful` describes situations or events that cause stress, tension, or anxiety. It is often used to talk about experiences that are challenging or demanding. For example:
+
+- `The deadline was stressful because we had so much work to do.` - Meaning they felt a lot of stress due to the deadline.
+
+- `Presenting to a large audience can be stressful.` - Meaning you can be feel really anxious when you present in front of an audience.
+
+In this question, Lisa is asking James if fixing the issue with the app and the credentials was a stressful experience for him.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
new file mode 100644
index 0000000000..a4abb17b7f
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674604ef287b978febd50bc9.md
@@ -0,0 +1,80 @@
+---
+id: 674604ef287b978febd50bc9
+title: Task 30
+challengeType: 22
+dashedName: task-30
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Wasn't it stressful BLANK?`
+
+## --blanks--
+
+`though`
+
+### --feedback--
+
+This word is used to add emphasis or to show a contrast or unexpected outcome.
+
+# --explanation--
+
+`Though` is often used at the end of a sentence to add emphasis or to show a contrast with what was previously said or implied. In this context, Lisa is emphasizing her surprise or curiosity about whether James found the situation stressful despite his success. For example:
+
+`The presentation went well, though it was stressful at first.` - Here, `though` highlights the contrast between the overall success and the initial stress.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
new file mode 100644
index 0000000000..447b174c6e
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674605049656269110601a79.md
@@ -0,0 +1,86 @@
+---
+id: 674605049656269110601a79
+title: Task 31
+challengeType: 22
+dashedName: task-31
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? -->
+
+# --description--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`BLANK it stressful though?`
+
+## --blanks--
+
+`Wasn't`
+
+### --feedback--
+
+This is singular form of the verb `to be` in the Simple Past, but in the negative form. Do not forget to capitalize it.
+
+# --explanation--
+
+In negative questions with the verb `to be` in the Simple Past, use the structure **Wasn't/Weren't + subject + complement?**
+
+This structure is often used to confirm something or to express surprise or doubt. For example:
+
+- `Wasn't she at the meeting yesterday?` - You are not only asking about her being at the meeting, you are trying to confirm it because you think she was.
+
+- `Weren't they informed about the changes?` - You are trying to confirm if they were informed or not.
+
+In Lisa's question, `Wasn't it stressful though?`, she is asking James to confirm if the situation was stressful, possibly expecting that it might have been.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 36.94
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.84
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
new file mode 100644
index 0000000000..46c87a9f37
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674609a92ccf079d86cd81db.md
@@ -0,0 +1,110 @@
+---
+id: 674609a92ccf079d86cd81db
+title: Task 32
+challengeType: 22
+dashedName: task-32
+---
+
+<!-- (Audio) Lisa: Wasn't it stressful though? James: A bit, but solving problems like these is what makes our job interesting, right? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`A BLANK, but solving problems like these is what makes our job interesting, right?`
+
+## --blanks--
+
+`bit`
+
+### --feedback--
+
+This phrase is used to indicate a small amount or degree.
+
+# --explanation--
+
+`A bit` is used to indicate a small amount or degree of something. For Example:
+
+`I was a bit tired after the long day.` - Here, `a bit` emphasizes that the speaker was slightly tired, but it wasn't extreme.
+
+This phrase is commonly used in informal contexts to soften statements or describe minor degrees of feelings or situations. In this dialog, James is admitting that the situation was slightly stressful but not overwhelming.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 35.6,
+      "finishTimestamp": 41.66
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.34,
+      "dialogue": {
+        "text": "Wasn't it stressful though?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.56
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.56
+    },
+    {
+      "character": "James",
+      "startTime": 2.78,
+      "finishTime": 7.06,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.56
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
new file mode 100644
index 0000000000..830a85712b
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67460b84234b70a4772d2094.md
@@ -0,0 +1,95 @@
+---
+id: 67460b84234b70a4772d2094
+title: Task 33
+challengeType: 19
+dashedName: task-33
+---
+
+<!-- (Audio) James: A bit, but solving problems like these is what makes our job interesting, right? -->
+
+<!-- SPEAKING -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+How could Lisa confirm in a single word and enthusiastically that she agrees with what James just said?
+
+## --answers--
+
+`Absolutely!`
+
+---
+
+`Objection!`
+
+### --feedback--
+
+`Objection` is normally used in court when an attorney says they disagree with what has been said or proposed by another attorney. It expresses disagreement, not agreement.
+
+## --video-solution--
+
+1
+
+
+# --explanation--
+
+`Absolutely` is used to express complete agreement or certainty. It is often used in informal or conversational contexts to emphasize strong agreement.  For example:
+
+Person 1: `Do you think we should move forward with this plan?`
+
+Person 2: `Absolutely!` -  Here, `Absolutely` shows that the speaker is fully in favor of the plan and has no doubts.
+
+In this dialog, Lisa is strongly agreeing with James's point about their job being interesting because of the challenges they solve.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.18,
+      "finishTimestamp": 41.66
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
new file mode 100644
index 0000000000..8b47e1f3a6
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461094ba7296b13c1bb045.md
@@ -0,0 +1,136 @@
+---
+id: 67461094ba7296b13c1bb045
+title: Task 34
+challengeType: 19
+dashedName: task-34
+---
+
+<!-- (Audio) James: A bit, but solving problems like these is what makes our job interesting, right? Lisa: Absolutely. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa mean?
+
+## --answers--
+
+She completely agrees with James.
+
+---
+
+She partially agrees with James.
+
+### --feedback--
+
+`Absolutely` indicates full agreement, not partial agreement.
+
+---
+
+She is not sure she understands what James is trying to say.
+
+### --feedback--
+
+`Absolutely` shows Lisa is confident and fully agrees with James.
+
+---
+
+She disagrees with James.
+
+### --feedback--
+
+`Absolutely` is a clear expression of agreement, not disagreement.
+
+## --video-solution--
+
+1
+
+# --explanation--
+
+`Absolutely` is used to express complete agreement or certainty. For example:
+
+Person 1: `Do you think this solution will work?`
+
+Person 2: `Absolutely!` - Meaning that you are entirely confident and supportive of the solution.
+
+In this dialog, Lisa, thus, is showing James she fully agrees with what he said.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 37.18,
+      "finishTimestamp": 42.82
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 5.48,
+      "dialogue": {
+        "text": "A bit, but solving problems like these is what makes our job interesting, right?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 5.75
+    },
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 5.75
+    },
+    {
+      "character": "Lisa",
+      "startTime": 6.02,
+      "finishTime": 6.62,
+      "dialogue": {
+        "text": "Absolutely.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 7.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
new file mode 100644
index 0000000000..21f30fadda
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674612ab7e6b0ab83408262a.md
@@ -0,0 +1,86 @@
+---
+id: 674612ab7e6b0ab83408262a
+title: Task 35
+challengeType: 22
+dashedName: task-35
+---
+
+<!-- (Audio) Lisa: Thanks for handling it, James. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Thanks for BLANK it, James.`
+
+## --blanks--
+
+`handling`
+
+### --feedback--
+
+This word means taking care of or managing something. Use it in the `-ing` form.
+
+# --explanation--
+
+`Handle` in this context means to take care of or manage a task, issue, or responsibility. For example:
+
+ `He handled the situation professionally.` - Meaning he took care of the problem as a professional.
+
+When a verb follows a preposition, like `for`, it is used in the `-ing` form. For example:
+
+`She apologized for being late.` - The preposition `for` is followed by `being` in the -ing form.
+
+In the sentence, Lisa is thanking James for managing or solving the problem.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 43.04,
+      "finishTimestamp": 44.58
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.54,
+      "dialogue": {
+        "text": "Thanks for handling it, James.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.04
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
new file mode 100644
index 0000000000..5ecbaf5e72
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674616565854f7c788740cee.md
@@ -0,0 +1,110 @@
+---
+id: 674616565854f7c788740cee
+title: Task 36
+challengeType: 19
+dashedName: task-36
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does Lisa want to know?
+
+## --answers--
+
+She wants to know why James was debugging.
+
+### --feedback--
+
+Lisa's question isn't about the reason for debugging; it's about whether other issues came up during that time.
+
+---
+
+She wants to know when James started debugging.
+
+### --feedback--
+
+Lisa's question focuses on what else happened during debugging, not the timing.
+
+---
+
+She wants to know if any other issues appeared while James was debugging.
+
+---
+
+She wants to know if debugging is finished.
+
+### --feedback--
+
+Lisa's question is about what happened during debugging, not whether it is finished.
+
+## --video-solution--
+
+3
+
+# --explanation--
+
+In this question, Lisa uses the `Simple Past` and the `Past Continuous` to ask about two actions that occurred in the past.
+
+`Did anything else come up` describes a completed action or event that may have occurred at some point during the debugging process. (`Simple Past`)
+
+`While you were debugging`  describes an ongoing activity in the past during which the event in the Simple Past could have happened. (`Past Continuous`) For example:
+
+`Did anyone call while you were working on the report?` - here, the `Simple Past` tense  asks about a specific event, while the `Past Continuous` provides the background activity during which the event could have happened.
+
+This combination is used to show the occurrence of an event in the middle of another, longer one, or simultaneous longer actions happening in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
new file mode 100644
index 0000000000..4eedb646ec
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/674619b6699a06d064c9717f.md
@@ -0,0 +1,94 @@
+---
+id: 674619b6699a06d064c9717f
+title: Task 37
+challengeType: 22
+dashedName: task-37
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Did anything else BLANK up while you were BLANK?`
+
+## --blanks--
+
+`come`
+
+### --feedback--
+
+Followed by `up` in this phrase, it means to arise or appear unexpectedly.
+
+---
+
+`debugging`
+
+### --feedback--
+
+This word refers to identifying and fixing errors or issues in code. Use the `-ing` form.
+
+# --explanation--
+
+`Come up` means to arise, appear, or occur unexpectedly. For example:
+
+`Something important came up during the meeting, and we had to address it immediately.` - Meaning something occurred during the meeting that needed immediate attention.
+
+`Debugging` refers to the process of identifying and resolving errors or issues in code. For example:
+
+`The team spent hours debugging the software before the release.` - Meaning they spent a long time identifying and solving these errors.
+
+Lisa's question asks if any other unexpected issues could be seen during the process of fixing code errors.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
new file mode 100644
index 0000000000..ded0a6c923
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/67461c06865e13d715967f1d.md
@@ -0,0 +1,89 @@
+---
+id: 67461c06865e13d715967f1d
+title: Task 38
+challengeType: 22
+dashedName: task-38
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Did BLANK else come up while you were debugging?`
+
+## --blanks--
+
+`anything`
+
+### --feedback--
+
+This word is used in questions to ask if something occurred or existed.
+
+# --explanation--
+
+`Anything` is used in questions to ask if something happened, existed, or was present. It is neutral and does not assume the existence of anything specific. For example:
+
+`Did anything unusual happen during the test?` - Meaning you are asking about unusual events that could be found during the test.
+
+In affirmative sentences, use `something` to indicate the existence of a thing. For example:
+
+`Something interesting happened during the meeting.` - Meaning a different thing than the usual happened.
+
+In negative sentences, use `anything` to indicate that no thing occurred or existed. For example:
+
+`I didn't see anything unusual in the report.` - meaning there were no surprises in the report.
+
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 44.92,
+      "finishTimestamp": 47.02
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 3.1,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 3.6
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
new file mode 100644
index 0000000000..a2526df227
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675060b39af6ab3f14f394e2.md
@@ -0,0 +1,142 @@
+---
+id: 675060b39af6ab3f14f394e2
+title: Task 39
+challengeType: 19
+dashedName: task-39
+---
+
+<!-- (Audio) Lisa: Did anything else come up while you were debugging? James: Not really. Everything else was running smoothly once the database issue was fixed. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What does James mean by his answer?
+
+## --answers--
+
+He means several major issues appeared after fixing the database.
+
+### --feedback--
+
+James says, `Not really`, meaning there were no significant issues after the database was fixed.
+
+---
+
+He means the database issue is still unresolved.
+
+### --feedback--
+
+James mentions that the database issue was fixed and everything else was running smoothly afterwards.
+
+---
+
+He means debugging was stressful the whole time.
+
+### --feedback--
+
+James mentions that things ran smoothly once the database issue was resolved, implying the stress decreased.
+
+---
+
+He means there were no significant issues after fixing the database.
+
+## --video-solution--
+
+4
+
+# --explanation--
+
+James means that the situation improved right after the database issue was resolved. He uses `Not really` to indicate that no major issues occurred, though there may have been minor or insignificant ones. This phrase is often used to soften a negative response. For example:
+
+Person 1: `Did you enjoy the movie?`
+
+Person 2: `Not really. It was too slow.` - This means you did not like the movie much.
+
+`Smoothly` is an adverb meaning without problems or interruptions. While `smoothly` (adverb) describes how an action is performed, `smooth` (adjective) describes a state or quality. For example:
+
+`The meeting went smoothly after everyone arrived on time.` - This means everything was ok at the meeting.
+
+`The surface of the table is smooth.` - Meaning there were no inconsistencies in the surface.
+
+`Once` means the same as `as soon as` or `after`, indicating that everything ran smoothly after the database was fixed. For example: - `Once the updates were installed, the system worked perfectly.` (this means that the system worked after the updates were installed)
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      },
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 45.12,
+      "finishTimestamp": 51.6
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 2.7,
+      "dialogue": {
+        "text": "Did anything else come up while you were debugging?",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 2.94
+    },
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 2.94
+    },
+    {
+      "character": "James",
+      "startTime": 3.18,
+      "finishTime": 7.48,
+      "dialogue": {
+        "text": "Not really. Everything else was running smoothly once the database issue was fixed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 7.98
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
new file mode 100644
index 0000000000..410a3459d8
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750651aafcea04c6958a4e5.md
@@ -0,0 +1,88 @@
+---
+id: 6750651aafcea04c6958a4e5
+title: Task 40
+challengeType: 22
+dashedName: task-40
+---
+
+<!-- (Audio) James: Everything else was running smoothly once the database issue was fixed. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Everything else BLANK running smoothly once the database issue was fixed.`
+
+## --blanks--
+
+`was`
+
+### --feedback--
+
+This word is the singular form of the verb `to be` in the Simple Past, used with subjects like `everything`, `something`, `anything`, and `nothing`.
+
+# --explanation--
+
+Words like `everything`, `something`, `anything`, and `nothing` are indefinite pronouns that take singular verbs, even though they may refer to multiple items or concepts. For example:
+
+- `Everything was ready for the presentation.` - `Everything` refers to all things and requires a singular verb.
+
+- `Something is wrong with the code.` - `Something` refers to an unspecified thing and takes a singular verb.
+
+- `Is anything missing from the report?` - `Anything` refers to any one thing in a general sense and uses a singular verb.
+
+- `Nothing was found in the logs.`  - `Nothing` refers to the absence of things and requires a singular verb)
+
+In the sentence `Everything else was running smoothly`, you use `was` because `everything` is treated as singular, even though it refers to multiple elements.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "James",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 48.3,
+      "finishTimestamp": 51.6
+    }
+  },
+  "commands": [
+    {
+      "character": "James",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "James",
+      "startTime": 1,
+      "finishTime": 4.3,
+      "dialogue": {
+        "text": "Everything else was running smoothly once the database issue was fixed.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "James",
+      "opacity": 0,
+      "startTime": 4.8
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
new file mode 100644
index 0000000000..1919acb2f2
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6750697ee8b87f5e665c0712.md
@@ -0,0 +1,88 @@
+---
+id: 6750697ee8b87f5e665c0712
+title: Task 41
+challengeType: 22
+dashedName: task-41
+---
+
+<!-- (Audio) Lisa: Perfect. Let's make sure we double check credentials after security updates in the future. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`Perfect. Let's make sure we BLANK BLANK credentials after security updates in the future.`
+
+## --blanks--
+
+`double`
+
+### --feedback--
+
+This word means to do something twice or with extra care.
+
+---
+
+`check`
+
+### --feedback--
+
+This word refers to verifying or confirming something.
+
+# --explanation--
+
+`Double check` means to verify something a second time to ensure it is correct or accurate. It is often used when dealing with important tasks to avoid errors.  For example:
+
+`We need to double check the calculations before submitting the report.` - Meaning you'd like to verify if the calculations are right once more before sending the report to those who will analyze it.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "interview-room3.png",
+    "characters": [
+      {
+        "character": "Lisa",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-1.mp3",
+      "startTime": 1,
+      "startTimestamp": 51.92,
+      "finishTimestamp": 56
+    }
+  },
+  "commands": [
+    {
+      "character": "Lisa",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Lisa",
+      "startTime": 1,
+      "finishTime": 5.08,
+      "dialogue": {
+        "text": "Perfect. Let's make sure we double check credentials after security updates in the future.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Lisa",
+      "opacity": 0,
+      "startTime": 5.58
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
new file mode 100644
index 0000000000..12e2fbef9c
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/675846ef3e2e50e95e99aded.md
@@ -0,0 +1,92 @@
+---
+id: 675846ef3e2e50e95e99aded
+title: Task 104
+challengeType: 22
+dashedName: task-104
+---
+
+<!-- (Audio) Brian: It made me think of how we handled security in our earlier projects. -->
+
+# --instructions--
+
+Listen to the audio and complete the sentence below.
+
+# --fillInTheBlank--
+
+## --sentence--
+
+`It made me think of how we BLANK security in our BLANK projects.`
+
+## --blanks--
+
+`handled`
+
+### --feedback--
+
+This word means to manage or deal with something. It's in its Simple Past form.
+
+---
+
+`earlier`
+
+### --feedback--
+
+This word means happening or existing before a certain point in time.
+
+# --explanation--
+
+`Handle` means to manage or deal with something, especially a task, problem, or responsibility. For example:
+
+`She handled the customer complaints with great professionalism.` - This means she was very professional when dealing with customers and their negative comments.
+
+`Earlier` means happening before a certain point in time. For example:
+
+`He referred to an earlier email to clarify the misunderstanding.` - This means he mentioned an email that was sent before to help everyone understand the case.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 54.1,
+      "finishTimestamp": 57.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.74,
+      "dialogue": {
+        "text": "It made me think of how we handled security in our earlier projects.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 5.24
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
new file mode 100644
index 0000000000..06f85c5338
--- /dev/null
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-how-to-talk-about-past-experiences/6758486d05a8fcf01a20c8b4.md
@@ -0,0 +1,115 @@
+---
+id: 6758486d05a8fcf01a20c8b4
+title: Task 105
+challengeType: 19
+dashedName: task-105
+---
+
+<!-- (Audio) Brian: It was eye-opening, especially the parts about protecting data. It made me think of how we handled security in our earlier projects. -->
+
+# --instructions--
+
+Listen to the audio and answer the question below.
+
+# --questions--
+
+## --text--
+
+What did Brian think about the cybersecurity workshop?
+
+## --answers--
+
+He thought it didn't provide useful information.
+
+### --feedback--
+
+Brian mentions that the workshop made him think about past projects, indicating it had an impact.
+
+---
+
+He thought it made him reflect on how they handled security in earlier projects.
+
+---
+
+He thought it was unrelated to their previous work.
+
+### --feedback--
+
+Brian explicitly connects the workshop to how they handled security in earlier projects.
+
+---
+
+He thought it wasn't worth attending.
+
+### --feedback--
+
+Brian found the workshop impactful as it made him think about their past security practices.
+
+## --video-solution--
+
+2
+
+# --explanation--
+
+`Make` someone `think` means to prompt reflection or consideration about a particular topic or situation. It often refers to something that causes a person to evaluate or analyze an issue more deeply. For example:
+
+`The documentary made me think about how I can reduce my carbon footprint.` - This means that watching the documentary helped you think about how to pollute less.
+
+In this context, the cybersecurity workshop prompted Brian to reflect on how they managed security in their projects in the past.
+
+# --scene--
+
+```json
+{
+  "setup": {
+    "background": "cafe.png",
+    "characters": [
+      {
+        "character": "Brian",
+        "position": {
+          "x": 50,
+          "y": 15,
+          "z": 1.2
+        },
+        "opacity": 0
+      }
+    ],
+    "audio": {
+      "filename": "B1_2-3.mp3",
+      "startTime": 1,
+      "startTimestamp": 50.22,
+      "finishTimestamp": 57.84
+    }
+  },
+  "commands": [
+    {
+      "character": "Brian",
+      "opacity": 1,
+      "startTime": 0
+    },
+    {
+      "character": "Brian",
+      "startTime": 1,
+      "finishTime": 4.54,
+      "dialogue": {
+        "text": "It was eye-opening, especially the parts about protecting data.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "startTime": 4.88,
+      "finishTime": 8.62,
+      "dialogue": {
+        "text": "It made me think of how we handled security in our earlier projects.",
+        "align": "center"
+      }
+    },
+    {
+      "character": "Brian",
+      "opacity": 0,
+      "startTime": 9.12
+    }
+  ]
+}
+```
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
index 15c1ba625a..e00d5c279b 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165185a42acc499c6ada3d.md
@@ -23,7 +23,7 @@ If the screen reader updates are completely finished.
 
 ### --feedback--
 
-Tom’s question is about an ongoing process, not whether the updates are fully completed.
+Tom's question is about an ongoing process, not whether the updates are fully completed.
 
 ---
 
@@ -31,7 +31,7 @@ If the screen reader updates have not started yet.
 
 ### --feedback--
 
-Tom’s question suggests that the updates have already started, not that they haven’t begun.
+Tom's question suggests that the updates have already started, not that they haven't begun.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
index 3569fd6722..18d3578908 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716531210ee374ae822fe83.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-6
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
index 5945848ef3..23fb1d4747 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671655545e5bfc4c3dfe9871.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-7
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I started a few months ago. BLANK been BLANK the BLANK from our last user BLANK. How’s the design side coming along?`
+`Yes, I started a few months ago. BLANK been BLANK the BLANK from our last user BLANK. How's the design side coming along?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
index e2089ae1fd..6d32c229cd 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67165855c3dd824eabc1b474.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-8
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
index 1ce1230835..265905054b 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6716593b4f24da4fac3154bf.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-9
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the BLANK side BLANK?`
+`Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the BLANK side BLANK?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
index fadad1430c..1810c7563c 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b20b952c096b3dee0834.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-10
 ---
 
-<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How’s the design side coming along? -->
+<!-- (audio) Sophie: Yes, I started a few months ago. We've been addressing the feedback from our last user survey. How's the design side coming along? -->
 
 <!-- SPEAKING --> 
 
@@ -17,7 +17,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What’s the best answer to Sophie's question about the design side?
+What's the best answer to Sophie's question about the design side?
 
 ## --answers--
 
@@ -37,7 +37,7 @@ This response is unrelated to the design side and does not answer Sophie's quest
 
 # --explanation--
 
-Sophie's question `How’s the design side coming along?` asks about the progress of the design work. The best answer should provide a relevant update.
+Sophie's question `How's the design side coming along?` asks about the progress of the design work. The best answer should provide a relevant update.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
index c0067aa9a8..0c2d06bfe5 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717b6aa217d3d6ed6f83e53.md
@@ -45,7 +45,7 @@ These are the rules or instructions that provide direction for how something sho
 
 To `tweak` means to make a slight adjustment or modification. For example:
 
-`The developer tweaked the code to improve the app’s performance.` - This means that the developer made small changes to the code to enhance how the app functions.
+`The developer tweaked the code to improve the app's performance.` - This means that the developer made small changes to the code to enhance how the app functions.
 
 `Layouts` are the arrangement or structure of elements on a page or interface. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
index 7044f32296..06f1d20511 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717ba3d37ec4e73a50878da.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-13
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements? -->
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`That’s good to hear. Do you think the users BLANK BLANK the BLANK?`
+`That's good to hear. Do you think the users BLANK BLANK the BLANK?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
index d2bdf1a766..70d243060e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c0dc8b764279dfc9326b.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-15
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements? -->
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements? -->
 
 # --instructions--
 
@@ -23,7 +23,7 @@ If the users are happy with the design updates.
 
 ### --feedback--
 
-Sophie’s focus is on whether users have observed the improvements, not if they are happy with the design.
+Sophie's focus is on whether users have observed the improvements, not if they are happy with the design.
 
 ---
 
@@ -51,7 +51,7 @@ Sophie is interested in whether users have observed the improvements, not about
 
 # --explanation--
 
-Sophie’s question shows her curiosity about whether users are aware of the positive changes made to the product.
+Sophie's question shows her curiosity about whether users are aware of the positive changes made to the product.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
index c0ea97751c..8dd9370f36 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6717c3557815a17d6369a778.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-16
 ---
 
-<!-- (audio) Tom: I think so. We haven’t been receiving as many negative comments. -->
+<!-- (audio) Tom: I think so. We haven't been receiving as many negative comments. -->
 
 # --instructions--
 
@@ -47,7 +47,7 @@ These are opinions or feedback shared by users, in the plural form.
 
 `Negative` refers to something unfavorable or critical. For example:
 
-`The user left a negative review about the app’s performance.` - Here, `negative` describes the unfavorable nature of the review.
+`The user left a negative review about the app's performance.` - Here, `negative` describes the unfavorable nature of the review.
 
 `Comment` is an opinion or piece of feedback provided by someone. Its plural form is `comments`. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
index 79715619a6..82f5580840 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a383a56179f510b83cc1e.md
@@ -5,9 +5,9 @@ challengeType: 19
 dashedName: task-17
 ---
 
-<!-- (audio) Sophie: That’s good to hear. Do you think the users have noticed the improvements?
+<!-- (audio) Sophie: That's good to hear. Do you think the users have noticed the improvements?
 
-Tom: I think so. We haven’t been receiving as many negative comments. -->
+Tom: I think so. We haven't been receiving as many negative comments. -->
 
 # --instructions--
 
@@ -17,7 +17,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-How does Tom respond to Sophie’s question about user feedback?
+How does Tom respond to Sophie's question about user feedback?
 
 ## --answers--
 
@@ -25,11 +25,11 @@ He says the users have noticed more negative comments.
 
 ### --feedback--
 
-Tom actually mentions that they haven’t been receiving as many negative comments.
+Tom actually mentions that they haven't been receiving as many negative comments.
 
 ---
 
-He says they haven’t been receiving as many negative comments.
+He says they haven't been receiving as many negative comments.
 
 ---
 
@@ -41,7 +41,7 @@ Tom does not specifically mention positive comments, only that the negative ones
 
 ---
 
-He says he’s waiting for more feedback.
+He says he's waiting for more feedback.
 
 ### --feedback--
 
@@ -53,7 +53,7 @@ Tom is talking about the current trend of fewer negative comments, not waiting f
 
 # --explanation--
 
-Tom's response, `We haven’t been receiving as many negative comments`, uses the `Present Perfect Continuous` in the negative form. This tense is formed by `haven’t/hasn’t + been + verb(-ing)` and is used to describe actions that have not been happening over a period of time. In this case, it shows that fewer negative comments have been received over time, indicating a possible improvement.
+Tom's response, `We haven't been receiving as many negative comments`, uses the `Present Perfect Continuous` in the negative form. This tense is formed by `haven't/hasn't + been + verb(-ing)` and is used to describe actions that have not been happening over a period of time. In this case, it shows that fewer negative comments have been received over time, indicating a possible improvement.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
index 9c830e0fb1..e9f3b3334e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3c13a3d6b21a1b0008f7.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-18
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -41,7 +41,7 @@ This refers to changes made to improve or adapt something. It's plural form.
 
 `Adjustments` means small changes made to improve or adapt something. For example,
 
-`We made adjustments to the app’s layout for better user experience.` - `Adjustments` refers to the changes made to improve how users interact with the app.
+`We made adjustments to the app's layout for better user experience.` - `Adjustments` refers to the changes made to improve how users interact with the app.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
index de3b5acf88..b89232b499 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3dde9c50241c6c16e331.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-19
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Sophie does not express frustration. She mentions feeling relieved instead.
 
 # --explanation--
 
-Sophie’s use of `That’s a relief` indicates that she feels better or more comfortable about the progress being made, rather than feeling worried, confused, or frustrated.
+Sophie's use of `That's a relief` indicates that she feels better or more comfortable about the progress being made, rather than feeling worried, confused, or frustrated.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
index f58008dac2..37fd99a4a2 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a3ed10fd6e81d06dd4690.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-20
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Sophie is not asking about the effectiveness of the adjustments.
 
 # --explanation--
 
-Sophie’s question shows that she is trying to understand the time required to continue making changes, focusing on the duration rather than the reasons or results.
+Sophie's question shows that she is trying to understand the time required to continue making changes, focusing on the duration rather than the reasons or results.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
index 69f47f8b11..dd24f2e8df 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a40b415343c1f26e0c005.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-21
 ---
 
-<!-- (audio) Sophie: That’s a relief. How long do you think we’ll need to keep making adjustments? -->
+<!-- (audio) Sophie: That's a relief. How long do you think we'll need to keep making adjustments? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
index 81b269862a..c97d340ce0 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a41b8576531207749bdae.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-22
 ---
 
-<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes. -->
+<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Probably a few more weeks. We've been making steady BLANK, and I believe we’re close to BLANK the major changes.`
+`Probably a few more weeks. We've been making steady BLANK, and I believe we're close to BLANK the major changes.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
index 325b688496..307efe14aa 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a438ac97103231787ab5a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-23
 ---
 
-<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes. -->
+<!-- (audio) Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes. -->
 
 # --instructions--
 
@@ -51,7 +51,7 @@ Tom estimates that they will need only a few more weeks, not several months.
 
 # --explanation--
 
-Tom’s statement indicates that the team has been working consistently and expects to complete the changes in a few more weeks.
+Tom's statement indicates that the team has been working consistently and expects to complete the changes in a few more weeks.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
index 7e6517f365..dae8e6a5b1 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a45f9b4ee3325393f0d0b.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-24
 ---
 
-<!-- (audio) Sophie: That’s good news! It feels great to make our app more accessible. -->
+<!-- (audio) Sophie: That's good news! It feels great to make our app more accessible. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`That’s good news! It feels great to make our app more BLANK.`
+`That's good news! It feels great to make our app more BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
index ce5bea3758..efbd0d94eb 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a46fe18ae6a26c76f42f6.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-25
 ---
 
-<!-- (audio) Sophie: That’s good news! It feels great to make our app more accessible. -->
+<!-- (audio) Sophie: That's good news! It feels great to make our app more accessible. -->
 
 # --instructions--
 
@@ -23,7 +23,7 @@ She is happy about making the app look more colorful.
 
 ### --feedback--
 
-No, `accessible` doesn’t refer to colors or design aesthetics. It means making the app easier for all users, including those with different needs, to use.
+No, `accessible` doesn't refer to colors or design aesthetics. It means making the app easier for all users, including those with different needs, to use.
 
 ---
 
@@ -31,7 +31,7 @@ She is pleased that the app is becoming easier for everyone to use, including us
 
 ---
 
-She thinks the app’s loading speed has improved significantly.
+She thinks the app's loading speed has improved significantly.
 
 ### --feedback--
 
@@ -51,7 +51,7 @@ Sophie is focused on making the app easier to use for all, which is what `access
 
 # --explanation--
 
-When Sophie says `It feels great to make our app more accessible`, she’s emphasizing the importance of making the app easier to use for all users, regardless of their abilities. Being `accessible` or `accessibility` aims to ensure that everyone, including people with disabilities, can interact with the app effectively.
+When Sophie says `It feels great to make our app more accessible`, she's emphasizing the importance of making the app easier to use for all users, regardless of their abilities. Being `accessible` or `accessibility` aims to ensure that everyone, including people with disabilities, can interact with the app effectively.
 
 
 # --scene--
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
index 26be04f9f2..efdc7a460f 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4aeac046082b1bf6335b.md
@@ -33,7 +33,7 @@ An app introduces a new payment gateway to make transactions faster.
 
 ### --feedback--
 
-While this improves functionality, it doesn’t relate to making the app accessible to users with different needs.
+While this improves functionality, it doesn't relate to making the app accessible to users with different needs.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
index d8fb122995..fe84c41c8a 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671a4e181afe602d37786dd8.md
@@ -13,7 +13,7 @@ This is a review of the entire dialogue you just studied.
 
 # --instructions--
 
-Place the following phrases in the correct spot: `negative comments`, `been addressing`, `That’s a relief`, `more accessible`, and `keep making adjustments`.
+Place the following phrases in the correct spot: `negative comments`, `been addressing`, `That's a relief`, `more accessible`, and `keep making adjustments`.
 
 # --fillInTheBlank--
 
@@ -21,19 +21,19 @@ Place the following phrases in the correct spot: `negative comments`, `been addr
 
 `Tom: Hey Sophie, have you been working on the screen reader updates recently?`
 
-`Sophie: Yes, I started a few months ago. We've BLANK the feedback from our last user survey. How’s the design side coming along?`
+`Sophie: Yes, I started a few months ago. We've BLANK the feedback from our last user survey. How's the design side coming along?`
 
 `Tom: Pretty well, actually. I've been tweaking the layouts based on the guidelines you shared.`
 
-`Sophie: That’s good to hear. Do you think the users have noticed the improvements?`
+`Sophie: That's good to hear. Do you think the users have noticed the improvements?`
 
-`Tom: I think so. We haven’t been receiving as many BLANK.`
+`Tom: I think so. We haven't been receiving as many BLANK.`
 
-`Sophie: BLANK. How long do you think we’ll need to BLANK?`
+`Sophie: BLANK. How long do you think we'll need to BLANK?`
 
-`Tom: Probably a few more weeks. We've been making steady progress, and I believe we’re close to finalizing the major changes.`
+`Tom: Probably a few more weeks. We've been making steady progress, and I believe we're close to finalizing the major changes.`
 
-`Sophie: That’s good news! It feels great to make our app BLANK.`
+`Sophie: That's good news! It feels great to make our app BLANK.`
 
 ## --blanks--
 
@@ -53,7 +53,7 @@ This phrase refers to unfavorable feedback from users.
 
 ---
 
-`That’s a relief`
+`That's a relief`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
index 6eef5b864b..3bbf0ae579 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b71da8e1b963c69b6d011.md
@@ -19,9 +19,9 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
 What changes have Tom and Sophie made to help screen readers?
 
@@ -47,7 +47,7 @@ The focus is on making the app easier to use with screen readers, not on speed.
 
 ---
 
-They changed the app’s language settings.
+They changed the app's language settings.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
index fb59495032..57aa5bd1c9 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b769169e38f3fe57b141c.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What was Tom’s main role in improving screen reader compatibility?
+What was Tom's main role in improving screen reader compatibility?
 
 ## --answers--
 
@@ -31,11 +31,11 @@ He tested the new features to make sure they worked well.
 
 ---
 
-He designed the app’s new color scheme.
+He designed the app's new color scheme.
 
 ### --feedback--
 
-Tom’s focus was on testing the screen reader features, not designing the color scheme.
+Tom's focus was on testing the screen reader features, not designing the color scheme.
 
 ---
 
@@ -43,7 +43,7 @@ He translated the app into different languages.
 
 ### --feedback--
 
-Translating the app was not part of Tom’s role in this context.
+Translating the app was not part of Tom's role in this context.
 
 ---
 
@@ -51,7 +51,7 @@ He added more images to the app.
 
 ### --feedback--
 
-Tom’s main task was to test screen reader compatibility, not to add images.
+Tom's main task was to test screen reader compatibility, not to add images.
 
 ## --video-solution--
 
@@ -59,7 +59,7 @@ Tom’s main task was to test screen reader compatibility, not to add images.
 
 # --explanation--
 
-To find the correct answer, pay attention to the section that explains Tom’s main role in improving the app.
+To find the correct answer, pay attention to the section that explains Tom's main role in improving the app.
 
 The paragraph states that Tom `has been testing these improvements` to ensure they were effective for screen reader users, which shows his focus on checking the compatibility of these updates.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
index e599f1a1ee..4f68fe5a22 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b77cf9ef25a416449b109.md
@@ -19,9 +19,9 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
 What specific improvement did Sophie make to help users understand spoken content better?
 
@@ -35,11 +35,11 @@ Adding colorful icons is not related to spoken content or screen reader compatib
 
 ---
 
-She worked on making the app’s speech output clearer.
+She worked on making the app's speech output clearer.
 
 ---
 
-She changed the app’s loading speed.
+She changed the app's loading speed.
 
 ### --feedback--
 
@@ -47,7 +47,7 @@ Changing the loading speed is not related to improving spoken content.
 
 ---
 
-She redesigned the app’s interface layout.
+She redesigned the app's interface layout.
 
 ### --feedback--
 
@@ -59,8 +59,8 @@ Sophie's work specifically aimed to improve how users hear and understand the sp
 
 # --explanation--
 
-Focus on the part that describes Sophie’s efforts to enhance screen reader compatibility.
+Focus on the part that describes Sophie's efforts to enhance screen reader compatibility.
 
-The paragraph mentions that her focus is `tweaking the app’s text-to-speech function` to help users better understand spoken content from the app.
+The paragraph mentions that her focus is `tweaking the app's text-to-speech function` to help users better understand spoken content from the app.
 
-Look for an option that aligns with Sophie’s specific task of enhancing the app’s text-to-speech functionality.
+Look for an option that aligns with Sophie's specific task of enhancing the app's text-to-speech functionality.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
index 8b66d6f92b..948092b43a 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7c10cd0d274552e7b686.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What is Sophie concerned about regarding the app’s accessibility?
+What is Sophie concerned about regarding the app's accessibility?
 
 ## --answers--
 
@@ -31,15 +31,15 @@ Whether users like the new color scheme.
 
 ### --feedback--
 
-Sophie’s concern is about making the app accessible overall, not about color preferences.
+Sophie's concern is about making the app accessible overall, not about color preferences.
 
 ---
 
-Whether the app’s speed has improved enough.
+Whether the app's speed has improved enough.
 
 ### --feedback--
 
-Sophie’s focus is on making the app more accessible, not its speed.
+Sophie's focus is on making the app more accessible, not its speed.
 
 ---
 
@@ -47,7 +47,7 @@ Whether they have enough user surveys completed.
 
 ### --feedback--
 
-Sophie’s concern is not about the number of surveys but about the app's overall accessibility.
+Sophie's concern is not about the number of surveys but about the app's overall accessibility.
 
 ---
 
@@ -59,8 +59,8 @@ Whether they have done enough to make the app accessible.
 
 # --explanation--
 
-To find the correct answer, focus on Sophie’s concern mentioned in the paragraph.
+To find the correct answer, focus on Sophie's concern mentioned in the paragraph.
 
 The paragraph states that Sophie wonders, `Have we done enough to make our app accessible?` This indicates her focus on overall accessibility improvements.
 
-Look for an option that reflects Sophie’s concern about making the app accessible for users.
+Look for an option that reflects Sophie's concern about making the app accessible for users.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
index 5cf4154e4b..06f5d01a2d 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671b7dd730712747aa2d9974.md
@@ -19,11 +19,11 @@ Read the text and answer the question below.
 
 `Recently, they added special labels to buttons, menus, and forms, so screen readers can understand these parts better. They also improved the way headings, lists, and tables are organized, making the layouts easier for users to move through the app.`
 
-`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app’s text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
+`Tom has been testing these improvements using popular screen readers, while Sophie has been focusing on tweaking the app's text-to-speech function. They also increased the contrast, which helps users see different sections more clearly.`
 
-`Sophie still wonders, “Have we done enough to make our app accessible?” They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
+`Sophie still wonders, "Have we done enough to make our app accessible?" They plan to conduct some surveys and add features like adjustable colors and keyboard shortcuts to make the app even more user-friendly.`
 
-What might be Tom and Sophie’s next step to improve accessibility?
+What might be Tom and Sophie's next step to improve accessibility?
 
 ## --answers--
 
@@ -39,7 +39,7 @@ Introducing features like adjustable colors and keyboard shortcuts.
 
 ---
 
-Increasing the app’s speed for faster navigation.
+Increasing the app's speed for faster navigation.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
index e3a7496386..9de6d7ee88 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f46b8a64a336294268cf6.md
@@ -49,4 +49,4 @@ This sentence is in the `Present Simple` tense, not the `Present Perfect continu
 
 # --explanation--
 
-The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn’t occurred as expected. 
+The negative form of the `Present Perfect continuous` tense tense is created with `hasn't/haven't + been + present participle`. It describes an ongoing action that started in the past and continues or remains relevant but hasn't occurred as expected. 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
index 744384c525..5559001fed 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4766b90543639b60a79d.md
@@ -49,7 +49,7 @@ This is the `Present Simple` tense.
 
 # --explanation--
 
-The `Present Perfect Continuous` tense negative form is formed with `hasn't/haven't + been + present participle`, indicating an ongoing action that hasn’t occurred as expected over time. For example:
+The `Present Perfect Continuous` tense negative form is formed with `hasn't/haven't + been + present participle`, indicating an ongoing action that hasn't occurred as expected over time. For example:
 
 `He hasn't been exercising regularly.` - This means his exercise routine has been irregular.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
index 26ecc04b17..344de0e648 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f47b9343cd364309aa802.md
@@ -49,7 +49,7 @@ This is in the `Present Simple` tense, not related to ongoing or completed actio
 
 # --explanation--
 
-`Present Perfect Continuous` tense negative form emphasizes an ongoing action that has lacked consistency over time, while the `Present Perfect` tense negative form indicates that an action hasn’t occurred at all up to now.
+`Present Perfect Continuous` tense negative form emphasizes an ongoing action that has lacked consistency over time, while the `Present Perfect` tense negative form indicates that an action hasn't occurred at all up to now.
 
 `Past Continuous` tense negative form deals with an action that was not happening at a specific past moment, focusing solely on the past.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
index ea0ac038d5..ffdb548723 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f4c29b6c10a677571c3e9.md
@@ -45,7 +45,7 @@ This word refers to the ease of use for all users, including those with disabili
 
 `Misaligned` means not lined up or positioned correctly. For example:
 
-`The images were misaligned in the presentation, making it look messy.` - This indicates that the images were not positioned properly, affecting the presentation’s clarity.
+`The images were misaligned in the presentation, making it look messy.` - This indicates that the images were not positioned properly, affecting the presentation's clarity.
 
 `Out of sync` describes when two or more elements are not coordinated in time or movement. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
index 7f3b30304c..48b8e52080 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8ab3f5add66eb16be177.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-43
 ---
 
-<!-- (Audio) Alice: Exactly. Do you know if it’s been affecting all the videos or just a few? -->
+<!-- (Audio) Alice: Exactly. Do you know if it's been affecting all the videos or just a few? -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`BLANK. Do you know if it’s been BLANK all the videos or just a few?`
+`BLANK. Do you know if it's been BLANK all the videos or just a few?`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
index da052b1c23..6b070052ad 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8cdb0d31cb710d7ad031.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-44
 ---
 
-<!-- (Audio) Alice: Exactly. Do you know if it’s been affecting all the videos or just a few? -->
+<!-- (Audio) Alice: Exactly. Do you know if it's been affecting all the videos or just a few? -->
 
 <!-- SPEAKING -->
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
index 0f0f0b39f0..10d176ce9f 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f8e2ca90546729b1911fa.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-45
 ---
 
-<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly. -->
+<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`It seems to be affecting several videos. Our BLANK team has been BLANK the platform, and noticed that the captions aren’t BLANK properly.`
+`It seems to be affecting several videos. Our BLANK team has been BLANK the platform, and noticed that the captions aren't BLANK properly.`
 
 ## --blanks--
 
@@ -45,7 +45,7 @@ This word in `-ing` form refers to the process of making things happen at the sa
 
 `Quality assurance` is the process of ensuring that a product meets set quality standards. For example:
 
-`The quality assurance team checks the software for bugs before release.` - Here, `quality assurance` emphasizes the team’s role in maintaining the product's standard.
+`The quality assurance team checks the software for bugs before release.` - Here, `quality assurance` emphasizes the team's role in maintaining the product's standard.
 
 `Testing` means evaluating or examining a product to verify its performance. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
index 40a6056e18..6e7c1348c7 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f92684454b37660c3f82a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-46
 ---
 
-<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly. -->
+<!-- (Audio) James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-Why is it a problem that `the captions aren’t syncing properly`?
+Why is it a problem that `the captions aren't syncing properly`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
index 8ad927f930..acd962ab8b 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9ca66765d781de7213f3.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-53
 ---
 
-<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they’re narrowing down the possibilities. -->
+<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they're narrowing down the possibilities. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`We're working on it. The BLANK hasn't found a definitive BLANK yet, but they’re BLANK the possibilities.`
+`We're working on it. The BLANK hasn't found a definitive BLANK yet, but they're BLANK the possibilities.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
index 9d1642b436..ceccdcd2ee 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/671f9e83b440da8486fdf76e.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-54
 ---
 
-<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they’re narrowing down the possibilities. -->
+<!-- (Audio) James: We're working on it. The development team hasn't found a definitive solution yet, but they're narrowing down the possibilities. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
index d152f48037..360190fc74 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720cf38beae8c4f1d7af1c0.md
@@ -23,9 +23,9 @@ Place the following phrases in the correct spot: `rendering consistently`, `clos
 
 `James: Yes. For some reason, It hasn't been BLANK for some users. The captions are misaligned and BLANK, which isn't good for accessibility.`
 
-`Alice: Exactly. Do you know if it’s been affecting all the videos or just a few?`
+`Alice: Exactly. Do you know if it's been affecting all the videos or just a few?`
 
-`James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren’t syncing properly.`
+`James: It seems to be affecting several videos. Our quality assurance team has been testing the platform, and noticed that the captions aren't syncing properly.`
 
 `Alice: BLANK. Have they found out why it's happening?`
 
@@ -33,7 +33,7 @@ Place the following phrases in the correct spot: `rendering consistently`, `clos
 
 `Alice: Is there a plan to fix it?`
 
-`James: We're working on it. The development team hasn't found a BLANK yet, but they’re narrowing down the possibilities.`
+`James: We're working on it. The development team hasn't found a BLANK yet, but they're narrowing down the possibilities.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
index c5fc0f7f27..73c70a7178 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720e69c2152da7b9dad577e.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
index e7c917a8cf..cf24dbc12f 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f18957013d8de8ebbe91.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
index b249884427..3f3236c4fb 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f2d525d22693e3fe2a99.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
@@ -39,7 +39,7 @@ The problem is fully solved now.
 
 ### --feedback--
 
-James clearly states that they haven’t found a final solution yet, so this is incorrect.
+James clearly states that they haven't found a final solution yet, so this is incorrect.
 
 ---
 
@@ -67,6 +67,6 @@ James does not provide a specific timeline for when the solution will be ready.
 
 # --explanation--
 
-To identify the correct answer, focus on where James says `We haven’t found a final solution yet`. This indicates that the issue is still unresolved.
+To identify the correct answer, focus on where James says `We haven't found a final solution yet`. This indicates that the issue is still unresolved.
 
 Look for the option that emphasizes this ongoing problem, which matches James's update.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
index a3b01718a3..de3ecb890e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45529e496998cced6b6.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
index 087f369951..497188534b 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6720f45ff33dd69a10d14e9d.md
@@ -23,9 +23,9 @@ After their conversation, James wrote an email to Alice to update her about what
 
 `The development team has been working hard to find the cause of the issues. We think some of the problems, like captions being misaligned or out of sync, are because the synchronization code is old. We are now updating the code and testing it on different devices to make sure the captions work better everywhere.`
 
-`We haven’t found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
+`We haven't found a final solution yet, but we are seeing some improvements. The captions are showing up better on most devices, but we still need to do more testing to make sure it works well on all of them. We also plan to add a system that will catch any new errors quickly.`
 
-`I’ll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
+`I'll keep you updated as we make more progress. If you have any questions or ideas, please let me know.`
 
 `Best,`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
index cea19f6c62..509a4604d4 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
@@ -63,7 +63,7 @@ These are the characteristics or functions of something.
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -81,12 +81,12 @@ These are the characteristics or functions of something.
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -95,7 +95,7 @@ These are the characteristics or functions of something.
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
index 0cee3fb8e2..85df51bc7a 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
@@ -61,7 +61,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -79,12 +79,12 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -93,7 +93,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
index df3ee2d444..0a7baa4949 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672830d9aa2e0c2ff2fad7f8.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-63
 ---
 
-<!-- (audio) Linda: Yes, I’ve been testing them since the latest software update. -->
+<!-- (audio) Linda: Yes, I've been testing them since the latest software update. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`Yes, I’ve been testing them BLANK the latest BLANK.`
+`Yes, I've been testing them BLANK the latest BLANK.`
 
 ## --blanks--
 
@@ -37,7 +37,7 @@ These two words together refer to a version of software that has been improved o
 
 In the `Present Perfect Continuous` tense, `since` is used to indicate when an action began and continues up to the present. For example:
 
-`I’ve been learning JavaScript since 2020.` - It shows that the action of learning JavaScript started in 2020 and is still ongoing.
+`I've been learning JavaScript since 2020.` - It shows that the action of learning JavaScript started in 2020 and is still ongoing.
 
 The term `software update` refers to changes or improvements made to a computer program. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
index 5f0d668502..54b5208ecd 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-65
 ---
 
-<!-- (audio) Linda: Yes, I’ve been testing them since the latest software update. -->
+<!-- (audio) Linda: Yes, I've been testing them since the latest software update. -->
 
 # --instructions--
 
@@ -88,7 +88,7 @@ Linda's statement indicates that the action of testing started at the time of th
       "startTime": 1,
       "finishTime": 3.62,
       "dialogue": {
-        "text": "Yes, I've been testing them since the latest software update",
+        "text": "Yes, I've been testing them since the latest software update.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
index a74766adea..bd675d3239 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-66
 ---
 
-<!-- (audio) Linda: We’ve had some positive feedback, but there are still a few bugs to fix. -->
+<!-- (audio) Linda: We've had some positive feedback, but there are still a few bugs to fix. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`We’ve had some positive BLANK, but there are still a few BLANK to fix.`
+`We've had some positive BLANK, but there are still a few BLANK to fix.`
 
 ## --blanks--
 
@@ -78,7 +78,7 @@ This term refers to errors in software that need to be resolved. It's plural for
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
index f1596b7905..4b90d7d733 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-67
 ---
 
-<!-- (audio) Linda: We’ve had some positive feedback, but there are still a few bugs to fix. -->
+<!-- (audio) Linda: We've had some positive feedback, but there are still a few bugs to fix. -->
 
 # --instructions--
 
@@ -88,7 +88,7 @@ Linda's statement highlights that although they have received good responses fro
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
index 2b2a78fb9d..fbf68a2a1b 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c369d38d3ea6634c1649.md
@@ -5,7 +5,7 @@ challengeType: 22
 dashedName: task-73
 ---
 
-<!-- (audio) Linda: I’ve been trying to cover all scenarios to ensure that the commands work consistently. -->
+<!-- (audio) Linda: I've been trying to cover all scenarios to ensure that the commands work consistently. -->
 
 # --instructions--
 
@@ -15,7 +15,7 @@ Listen to the audio and complete the sentence below.
 
 ## --sentence--
 
-`I’ve been trying to cover all BLANK to ensure that the commands work BLANK.`
+`I've been trying to cover all BLANK to ensure that the commands work BLANK.`
 
 ## --blanks--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
index 2569cfd6c4..06fb50f651 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728c6fad8d9caa92837c75f.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-74
 ---
 
-<!-- (audio) Linda: For the past couple of weeks. I’ve been trying to cover all scenarios to ensure that the commands work consistently. -->
+<!-- (audio) Linda: For the past couple of weeks. I've been trying to cover all scenarios to ensure that the commands work consistently. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
index dffe5ee639..f4f868b4c5 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1c6ca33f8115728e7f79.md
@@ -35,7 +35,7 @@ If the device has been working properly.
 
 ### --feedback--
 
-Bob is asking about potential issues related to voice recognition, not the device’s general performance.
+Bob is asking about potential issues related to voice recognition, not the device's general performance.
 
 ---
 
@@ -43,7 +43,7 @@ If there is a new update for the voice recognition system.
 
 ### --feedback--
 
-Bob’s question is about problems with voice recognition, not about updates.
+Bob's question is about problems with voice recognition, not about updates.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
index b44474d7a4..296031dfbc 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a1e2fbec6a61bf477ea49.md
@@ -49,7 +49,7 @@ It refers to how correct or precise something is. In this case, it means how wel
 
 `Background noise` refers to unwanted sounds that can interfere with hearing something clearly. For example:
 
-- `The microphone couldn’t pick up my voice because of the background noise.` - In this sentence, `background noise` refers to sounds like music or traffic that made it difficult for the microphone to hear your voice clearly.
+- `The microphone couldn't pick up my voice because of the background noise.` - In this sentence, `background noise` refers to sounds like music or traffic that made it difficult for the microphone to hear your voice clearly.
 
 `Accuracy` refers to how precise or correct something is. In the case of `voice recognition`, it means how well the system can understand and process speech without errors. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
index f11795aa42..56256fc40d 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a21a4b40ed3279d513888.md
@@ -15,11 +15,11 @@ Listen to the audio and answer the question below.
 
 ## --text--
 
-What might Linda be suggesting about the system’s current performance?
+What might Linda be suggesting about the system's current performance?
 
 ## --answers--
 
-It’s working perfectly fine with all accents and environments.
+It's working perfectly fine with all accents and environments.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
index 185680dce4..bb942c50b3 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672a296a309d9c46658c071a.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-85
 ---
 
-<!-- (audio) Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been brainstorming solutions. -->
+<!-- (audio) Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been brainstorming solutions. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
index 735a533bbd..9037da2d74 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afc3d3758e25087697611.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-86
 ---
 
-<!-- (audio) Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been brainstorming solutions. -->
+<!-- (audio) Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been brainstorming solutions. -->
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
index 1aa169cd61..022ed5a333 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672afe3809d2a55224868ea5.md
@@ -31,7 +31,7 @@ He thinks the project is fully complete and ready for launch.
 
 ### --feedback--
 
-Bob’s question about testing with real users suggests he sees the project as ongoing, not fully complete.
+Bob's question about testing with real users suggests he sees the project as ongoing, not fully complete.
 
 ---
 
@@ -39,7 +39,7 @@ He believes the team needs to stop working and start a new project.
 
 ### --feedback--
 
-Bob’s comment suggests he thinks the project is progressing well, not that it should be stopped.
+Bob's comment suggests he thinks the project is progressing well, not that it should be stopped.
 
 ---
 
@@ -51,7 +51,7 @@ He thinks the project has made good initial progress but needs further testing.
 
 # --explanation--
 
-Bob’s comment `That's a good start` shows that he is pleased with the progress so far. However, his follow-up question about testing with real users suggests he thinks more steps are needed before the project is complete. This indicates that he feels positive about the current status but sees the need for further validation and testing.
+Bob's comment `That's a good start` shows that he is pleased with the progress so far. However, his follow-up question about testing with real users suggests he thinks more steps are needed before the project is complete. This indicates that he feels positive about the current status but sees the need for further validation and testing.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
index 3a80dbb2aa..b9563c5a31 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b25e2a59e2956bca1a42f.md
@@ -19,7 +19,7 @@ What does Linda mean when she says `it would be helpful`?
 
 ## --answers--
 
-She thinks they don’t need any more feedback.
+She thinks they don't need any more feedback.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
index c9dc79ade1..76d437ea80 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b33b15bd8bf5b2523772a.md
@@ -21,11 +21,11 @@ Place the following phrases in the correct spot: `software update`, `real-world
 
 `Bob: Hi Linda, have you been working on the new BLANK features?`
 
-`Linda: Yes, I’ve been testing them since the latest BLANK. We’ve had some positive feedback, but there are still a few bugs to fix.`
+`Linda: Yes, I've been testing them since the latest BLANK. We've had some positive feedback, but there are still a few bugs to fix.`
 
 `Bob: How long have you been focusing on this evaluation?`
 
-`Linda: For the past couple of weeks. I’ve been trying to cover BLANK to ensure that the commands work consistently.`
+`Linda: For the past couple of weeks. I've been trying to cover BLANK to ensure that the commands work consistently.`
 
 `Bob: Have you had any problems with voice recognition?`
 
@@ -33,7 +33,7 @@ Place the following phrases in the correct spot: `software update`, `real-world
 
 `Bob: What about the integration with other systems? Has it been seamless?`
 
-`Linda: Not entirely. It’s had issues connecting with our older devices, but we’re working on it. The development team has been BLANK.`
+`Linda: Not entirely. It's had issues connecting with our older devices, but we're working on it. The development team has been BLANK.`
 
 `Bob: That's a good start. By the way, have we tested it with real users yet?`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
index 80a8345a7e..4d3d70ef1f 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b42dafa37fe61e80a2b40.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
index e2b6f3806d..ed9f6b6d5f 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4539b9ab5d645e7dcfb8.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -51,7 +51,7 @@ Reducing the size of the devices.
 
 ### --feedback--
 
-The paragraph doesn’t mention device size as a challenge.
+The paragraph doesn't mention device size as a challenge.
 
 ## --video-solution--
 
@@ -63,4 +63,4 @@ To find the correct answer, focus on the part where Linda explains the challenge
 
 The paragraph highlights that the team is facing difficulties with background noise and accents, which makes it challenging for the system to accurately recognize commands in noisy environments.
 
-Look for an option that addresses the issue of the system’s ability to handle accents and background noise.
+Look for an option that addresses the issue of the system's ability to handle accents and background noise.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
index 460e6901fe..1fc9ab4b7d 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b46def9325065dbc7b29f.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -35,7 +35,7 @@ Real-world feedback is meant to test the system in real home settings, not just
 
 ---
 
-To improve the system’s visual design.
+To improve the system's visual design.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
index a76e226cc2..d508281756 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b4812ec997567058875da.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -63,4 +63,4 @@ To find the correct answer, look at the part where Linda talks about what the te
 
 The paragraph mentions that the development team `has been brainstorming solutions` to fix the issues with voice recognition, which shows they are actively working on improving the system.
 
-Look for an option that describes the team’s approach to solving the problems they’ve encountered.
+Look for an option that describes the team's approach to solving the problems they've encountered.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
index 29990a49c3..a4434c1f20 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672b491aa3c094689007baf1.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `One challenge is making sure the system understands different accents. The team has been testing the system with users from different regions, but there are still some problems with background noise.`
 
-`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system’s ability to filter out noise and better recognize commands.`
+`For example, the system sometimes has trouble understanding voices in noisy rooms, like kitchens or living rooms with TVs or radios on. To fix this, they are improving the system's ability to filter out noise and better recognize commands.`
 
 `Before launching the system, the team plans to gather real-world feedback from users to see how well it works in different home settings. This feedback will help them make the system more accurate and ready for everyone to use.`
 
@@ -31,7 +31,7 @@ They will immediately launch the system to all users.
 
 ### --feedback--
 
-The team is still testing and improving the system before it’s ready for a wider launch.
+The team is still testing and improving the system before it's ready for a wider launch.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
index a9bed39e2e..0a3f411bb2 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672cca3d15975a9390545877.md
@@ -51,7 +51,7 @@ Anna's question does not ask if James needs help; it focuses on whether he has r
 
 # --explanation--
 
-Anna’s question is specifically about whether James has reviewed the feedback from a training program related to accessibility.
+Anna's question is specifically about whether James has reviewed the feedback from a training program related to accessibility.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
index 543215b20a..898a7ef018 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672ccc988693199500b4cdfd.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: task-100
 ---
 
-<!-- (Audio) James: Yes, I’ve been working on it since the last training session. -->
+<!-- (Audio) James: Yes, I've been working on it since the last training session. -->
 
 # --instructions--
 
@@ -35,7 +35,7 @@ By saying he finished working soon after the last session.
 
 ### --feedback--
 
-James’s statement indicates ongoing work, not that he finished shortly after starting.
+James's statement indicates ongoing work, not that he finished shortly after starting.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
index 03a703b361..697028dae5 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dc928d8765dc9f923ca71.md
@@ -51,7 +51,7 @@ A `gradual process` refers to something that develops slowly, over time, rather
 
 `The team has made steady progress in completing the project.` - This shows that the team is moving forward regularly and effectively, without major delays.
 
-`Understanding` refers to a person’s knowledge or awareness about a subject. For example:
+`Understanding` refers to a person's knowledge or awareness about a subject. For example:
 
 `Her understanding of coding improved with practice.` - It highlights how her knowledge of coding grew as she spent more time practicing.
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
index da035c1e18..3a6974aa37 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672de8ad97d683d3734ce5cd.md
@@ -23,7 +23,7 @@ He is frustrated that progress has been slow.
 
 ### --feedback--
 
-James doesn’t express frustration; he acknowledges the gradual nature of the process positively.
+James doesn't express frustration; he acknowledges the gradual nature of the process positively.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
index 23aad93fe0..aa98f21456 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672debc75e32a8d6e2593eac.md
@@ -31,7 +31,7 @@ If there are too many tasks for the team to finish.
 
 ### --feedback--
 
-Anna’s question is about performance in some areas, not the number of tasks.
+Anna's question is about performance in some areas, not the number of tasks.
 
 ---
 
@@ -43,7 +43,7 @@ If people need more tools to do their work better.
 
 ### --feedback--
 
-Anna’s question is about finding areas of lower performance, not about needing more tools.
+Anna's question is about finding areas of lower performance, not about needing more tools.
 
 ## --video-solution--
 
@@ -51,7 +51,7 @@ Anna’s question is about finding areas of lower performance, not about needing
 
 # --explanation--
 
-Anna’s question is asking if there are any parts of the work where the team isn’t doing as well as they were expected to.
+Anna's question is asking if there are any parts of the work where the team isn't doing as well as they were expected to.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
index c4d0440860..37c72c9652 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672dec93f008b3d8169568e8.md
@@ -37,7 +37,7 @@ This answer points out areas needing improvement, which is not a positive respon
 
 # --explanation--
 
-A positive answer to Anna’s question would mean that everyone is performing as well as expected, and there is nothing that needs to be improved.
+A positive answer to Anna's question would mean that everyone is performing as well as expected, and there is nothing that needs to be improved.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
index 193270d3b9..b17c08fc07 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e0ec28d829ee2b5e909f3.md
@@ -35,7 +35,7 @@ He believes the activities were well-received by all participants.
 
 ### --feedback--
 
-James points out that the activities were not fully relevant, meaning they weren’t well-received by everyone.
+James points out that the activities were not fully relevant, meaning they weren't well-received by everyone.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
index 8efae5669b..967a25b5a3 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e16bcc0d877e5d3eb7f4e.md
@@ -23,7 +23,7 @@ Listen to the audio and complete the sentence below.
 
 ### --feedback--
 
-This word describes something that catches people’s interest and keeps them involved.
+This word describes something that catches people's interest and keeps them involved.
 
 # --explanation--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
index cb2c465ff4..869168958e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e17e63be5dce6ff5b9189.md
@@ -43,7 +43,7 @@ If the activities already meet all the learning goals.
 
 ### --feedback--
 
-Anna’s question suggests she thinks the activities could be improved to be `more engaging`, so she isn’t assuming they already meet all goals.
+Anna's question suggests she thinks the activities could be improved to be `more engaging`, so she isn't assuming they already meet all goals.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
index 92eaa09863..c2e6eb6334 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1bb0774f2fea953e9388.md
@@ -31,7 +31,7 @@ The team has been brainstorming ideas to make the sessions better.
 
 ---
 
-The team hasn’t yet considered any changes to the sessions.
+The team hasn't yet considered any changes to the sessions.
 
 ### --feedback--
 
@@ -43,7 +43,7 @@ The team feels the sessions are as interactive as they need to be.
 
 ### --feedback--
 
-James says they are working on making the sessions more interactive, so they don’t feel the sessions are finished.
+James says they are working on making the sessions more interactive, so they don't feel the sessions are finished.
 
 ## --video-solution--
 
@@ -51,7 +51,7 @@ James says they are working on making the sessions more interactive, so they don
 
 # --explanation--
 
-James uses the `Present Perfect Continuous` tense (`has been brainstorming`) to show that the team’s work on improving the sessions is ongoing. This tense expresses that they started brainstorming in the past and are still actively doing it now, indicating continuous effort in finding new ideas.
+James uses the `Present Perfect Continuous` tense (`has been brainstorming`) to show that the team's work on improving the sessions is ongoing. This tense expresses that they started brainstorming in the past and are still actively doing it now, indicating continuous effort in finding new ideas.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
index 7ea12c2170..dd3bc37842 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1c3031816ceb9dccc66a.md
@@ -23,7 +23,7 @@ Add activities that focus on memorizing definitions.
 
 ### --feedback--
 
-Memorizing definitions doesn’t involve real-life application or hands-on practice, which James implies they are aiming for.
+Memorizing definitions doesn't involve real-life application or hands-on practice, which James implies they are aiming for.
 
 ---
 
@@ -31,7 +31,7 @@ Use theoretical case studies with no practical application.
 
 ### --feedback--
 
-Theoretical case studies alone don’t fully connect to real-life tasks, which James wants to include.
+Theoretical case studies alone don't fully connect to real-life tasks, which James wants to include.
 
 ---
 
@@ -39,7 +39,7 @@ Have participants discuss unrelated topics to build general communication skills
 
 ### --feedback--
 
-Unrelated discussions don’t meet the goal of incorporating relevant, real-life situations.
+Unrelated discussions don't meet the goal of incorporating relevant, real-life situations.
 
 ---
 
@@ -51,7 +51,7 @@ Create exercises that use realistic situations participants might encounter on t
 
 # --explanation--
 
-Since James mentions `incorporating more real-life scenarios`, they’re likely planning to add exercises that reflect situations participants could actually encounter in their roles. This makes the training more engaging and relevant, unlike focusing on definitions, unrelated discussions, or purely theoretical case studies.
+Since James mentions `incorporating more real-life scenarios`, they're likely planning to add exercises that reflect situations participants could actually encounter in their roles. This makes the training more engaging and relevant, unlike focusing on definitions, unrelated discussions, or purely theoretical case studies.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
index 4bfc37f41a..c4b501f916 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1f1a51e86aed84df7c94.md
@@ -37,7 +37,7 @@ This word in the plural form refers to specific targets or objectives the team i
 
 `Keep in touch` means to stay in regular communication with someone. For example:
 
-`Let’s keep in touch about the project updates.` - This means staying connected and sharing information to make sure everyone is updated on the project's progress.
+`Let's keep in touch about the project updates.` - This means staying connected and sharing information to make sure everyone is updated on the project's progress.
 
 `Goals` are the specific targets or objectives a person or team wants to achieve. It the plural form of `goal`. For example:
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
index e70fc4691f..e9011fe5a5 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672e1fff03af3aeed5d7a84b.md
@@ -31,7 +31,7 @@ She thinks James' ideas are confusing and suggests focusing only on accessibilit
 
 ### --feedback--
 
-Anna doesn’t find James’ ideas confusing; she agrees and wants to monitor progress on their shared goals.
+Anna doesn't find James' ideas confusing; she agrees and wants to monitor progress on their shared goals.
 
 ---
 
@@ -43,7 +43,7 @@ She thinks James' ideas are unnecessary and suggests stopping the project.
 
 ### --feedback--
 
-Anna doesn’t suggest stopping; she supports James’ ideas and wants to stay updated.
+Anna doesn't suggest stopping; she supports James' ideas and wants to stay updated.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
index 2108b8fc77..73665c2d1e 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f4b05585d501f533789b4.md
@@ -21,7 +21,7 @@ Place the following phrases in the correct spot: `gradual process` , `more engag
 
 `Anna: Hi James, have you been reviewing the BLANK for our accessibility program?`
 
-`James: Yes, I’ve been working on it since the last training session. We've received a lot of positive comments, but there are some areas we still need to improve.`
+`James: Yes, I've been working on it since the last training session. We've received a lot of positive comments, but there are some areas we still need to improve.`
 
 `Anna: That's great to hear. How long have we been running these sessions?`
 
@@ -43,7 +43,7 @@ Place the following phrases in the correct spot: `gradual process` , `more engag
 
 ### --feedback--
 
-This phrase refers to the feedback received from participants about the training sessions to see what worked well and what didn’t.
+This phrase refers to the feedback received from participants about the training sessions to see what worked well and what didn't.
 
 ---
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
index 4cf8d46470..18cf9abf59 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f606201263928a06b2a04.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What is the main goal of the accessibility training?
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
index ee74b5a8bd..6c2adca538 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f630337512b2b62595731.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What does the training overview include?
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
index 3062ed0bf5..3950a4b2fa 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f63cadac41a2c9b1897a1.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 How does the training plan make the sessions engaging?
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
index f2680e76b8..253577b975 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f64ba4f91492e1192b829.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 Why are real-life scenarios included in the training?
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
index 2225eacac2..b7158fa6f1 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672f657580a34f2f78e278e2.md
@@ -19,7 +19,7 @@ Read the text and answer the question below.
 
 `The training will start by conducting an overview of essential accessibility concepts, such as color contrast, screen reader compatibility, and keyboard navigation. To make the sessions engaging, the plan includes interactive activities and real-life scenarios — like navigating without a mouse or relying on a screen reader. These exercises are designed to show the importance of removing accessibility barriers.`
 
-`Throughout the training, they will gather feedback to understand what’s effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
+`Throughout the training, they will gather feedback to understand what's effective and find areas to improve. This approach will help the team develop practical skills and make accessibility a natural part of their work.`
 
 What is the purpose of gathering training feedback?
 
@@ -29,11 +29,11 @@ To decide if the training should be canceled.
 
 ### --feedback--
 
-The feedback is collected to understand what’s effective and find areas to improve, not to cancel the training.
+The feedback is collected to understand what's effective and find areas to improve, not to cancel the training.
 
 ---
 
-To identify areas to improve and understand what’s effective.
+To identify areas to improve and understand what's effective.
 
 ---
 
@@ -49,7 +49,7 @@ To see how quickly participants finish the activities.
 
 ### --feedback--
 
-The purpose of feedback is to assess the training’s effectiveness, not activity speed.
+The purpose of feedback is to assess the training's effectiveness, not activity speed.
 
 ## --video-solution--
 
@@ -59,6 +59,6 @@ The purpose of feedback is to assess the training’s effectiveness, not activit
 
 To find the correct answer, focus on why training feedback is gathered.
 
-The paragraph states that feedback helps identify `what’s effective` and points out `areas to improve`.
+The paragraph states that feedback helps identify `what's effective` and points out `areas to improve`.
 
 Look for the option that describes feedback as a way to assess and enhance the training process.
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
index 2a1c2f9402..094d7451d8 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673de712f2dc6db0cfe76b31.md
@@ -29,7 +29,7 @@ This word means completely or fully.
 
 The word `entirely` means completely or fully. The phrase `not entirely` indicates that something is not complete or perfect. For example:
 
-`I don’t entirely agree with his opinion.` - It means you don’t fully agree with the opinion, suggesting some level of disagreement.
+`I don't entirely agree with his opinion.` - It means you don't fully agree with the opinion, suggesting some level of disagreement.
 
 # --scene--
 
diff --git a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
index cb5d3ffedb..a453e1737c 100644
--- a/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
+++ b/curriculum/challenges/chinese/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/673df0c78bdd11c7195010cb.md
@@ -15,7 +15,7 @@ This task doesn't have audio. Read the question below and select the correct ans
 
 ## --text--
 
-A colleague asks if your team has implemented the new feature yet. What is the best way to respond if you haven’t started but plan to?
+A colleague asks if your team has implemented the new feature yet. What is the best way to respond if you haven't started but plan to?
 
 ## --answers--
 
@@ -23,11 +23,11 @@ A colleague asks if your team has implemented the new feature yet. What is the b
 
 ---
 
-`Yes, it’s been running perfectly for years.`
+`Yes, it's been running perfectly for years.`
 
 ### --feedback--
 
-It implies that the feature has been implemented and in use for years, which contradicts the fact that the feature is new and hasn’t been started yet.
+It implies that the feature has been implemented and in use for years, which contradicts the fact that the feature is new and hasn't been started yet.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md b/curriculum/challenges/chinese/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
index 9ed8155edf..c2d2b34cb9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md
@@ -1,7 +1,7 @@
 ---
 id: 66b36358ed4f261d64840c24
 title: Build an Availability Table
-challengeType: 14
+challengeType: 25
 dashedName: build-an-availability-table
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md b/curriculum/challenges/chinese/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
index f6d5ba4f32..3d3d9b956d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-bank-account-manager/6718d2d59337c822ecb697ff.md
@@ -1,7 +1,7 @@
 ---
 id: 6718d2d59337c822ecb697ff
 title: Build a Bank Account Management Program
-challengeType: 14
+challengeType: 25
 dashedName: build-a-bank-account-management-program
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md b/curriculum/challenges/chinese/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
index 37ab60c03e..050e99030b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
@@ -1,7 +1,7 @@
 ---
 id: 66eaddd04a9e533fba689001
 title: Design a Blog Post Card
-challengeType: 14
+challengeType: 25
 dashedName: lab-blog-post-card
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md b/curriculum/challenges/chinese/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
index 0f96aca3a6..a3b4c84764 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md
@@ -1,7 +1,7 @@
 ---
 id: 66ec4c8e9878d8441956516f
 title: Build a Book Catalog Table
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-catalog-table
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/chinese/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
index 677ad8fd42..6abd16109d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
@@ -1,7 +1,7 @@
 ---
 id: 66a207974c806a19d6607073
 title: Build a Book Inventory App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-inventory-app
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md b/curriculum/challenges/chinese/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
index 8d760e3d55..12c07199ca 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-book-organizer/67172b43f84bcd2dec238a3d.md
@@ -1,7 +1,7 @@
 ---
 id: 67172b43f84bcd2dec238a3d
 title: Build a Book Organizer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-book-organizer
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md b/curriculum/challenges/chinese/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
index d076ddedf4..56563fe553 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
@@ -1,7 +1,7 @@
 ---
 id: 66def5467aee701733aaf8cc
 title: Build a Bookmark Manager App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-bookmark-manager-app
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md b/curriculum/challenges/chinese/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
index e849f3546f..0396e29c40 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
@@ -1,7 +1,7 @@
 ---
 id: 6690e10ebe2181212abc9652
 title: Design a Business Card
-challengeType: 14
+challengeType: 25
 dashedName: design-a-business-card
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/chinese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index 84ed342d02..1a193df725 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -1,7 +1,7 @@
 ---
 id: 66da326c02141df538f29ba5
 title: Build a Checkout Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-checkout-page
 demoType: onClick
 ---
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tab-index` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md b/curriculum/challenges/chinese/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
new file mode 100644
index 0000000000..86adcee2dc
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-colored-boxes/66f3f6eb66ea9dc41cdc30df.md
@@ -0,0 +1,210 @@
+---
+id: 66f3f6eb66ea9dc41cdc30df
+title: Design a Set of Colored Boxes
+challengeType: 25
+dashedName: set-of-colored-boxes
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you'll practice using CSS colors by designing boxes.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should set the background color for `body` to `#f4f4f4`.
+2. You should have a `div` with a class of `color-grid` to hold all your color elements.
+3. You should have five `div` elements within the `.color-grid` element.
+4. The five `div` elements should each have a class of `color-box` and `color#`, where `#` is the number of the order of that `div`. For example: `color1` for the first `div`, `color2` for the second, and so on.
+5. The `.color-box` class should have a set `width` and `height` so your `div` elements are visible on the page.
+6. The `.color1` element should have a `background-color` that uses hexadecimal color value.
+7. The `.color2` element should have a `background-color` that uses an RGB color value.
+8. The `.color3` element should have a `background-color` that uses a predefined (word) color value.
+9. The `.color4` element should have a `background-color` that uses a HSL color value.
+10. The `.color5` element should have a `background-color` set.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+`body` should have a background color of `#f4f4f4`.
+
+```js
+const body = document.body;
+const bodyBgColor = getComputedStyle(body).backgroundColor;
+assert.strictEqual(bodyBgColor, 'rgb(244, 244, 244)');
+```
+
+You should have a `div` element with a class of `color-grid`.
+
+```js
+const colorGrid = document.querySelector('div.color-grid');
+assert.exists(colorGrid);
+```
+
+You should have five `div` elements within the `.color-grid` element.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+```
+
+Each of the five `div` elements should each have a class of `color-box` and `color#`—substitute the order of the `div` for the `#` symbol.
+
+```js
+const colorGridChildren = document.querySelectorAll('div.color-grid > div');
+assert.strictEqual(colorGridChildren.length, 5);
+
+colorGridChildren.forEach((child, index) => {
+  const colorClass = `color${index + 1}`;
+  assert.isTrue(child.classList.contains('color-box'));
+  assert.isTrue(child.classList.contains(colorClass));
+});
+```
+
+The `.color-box` element should have a set `width` and `height`.
+
+```js
+const colorBox = document.querySelector('.color-box');
+assert.exists(colorBox);
+
+const colorBoxStyles = getComputedStyle(colorBox);
+const width = colorBoxStyles.width;
+const height = colorBoxStyles.height;
+
+assert.notStrictEqual(width, '0px');
+assert.notStrictEqual(height, '0px');
+```
+
+The `.color1` element should have a hexadecimal background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color1\s*{[^}]*\bbackground-color\s*:\s*#[0-9a-fA-F]{3,6}\s*;[^}]*}/);
+```
+
+The `.color2` element should have an RGB background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color2\s*{[^}]*\bbackground-color\s*:\s*rgb\s*\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)\s*;[^}]*}/);
+```
+
+The `.color3` element should have a predefined (word) background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color3\s*{[^}]*\bbackground-color\s*:\s*[a-zA-Z]+\s*;[^}]*}/);
+```
+
+The `.color4` element should have a HSL background color.
+
+```js
+assert.match(__helpers.removeCssComments(code), /\.color4\s*{[^}]*\bbackground-color\s*:\s*hsl\s*\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)\s*;[^}]*}/);
+```
+
+The `.color5` element should have a background color set.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.color5').getPropVal('background-color', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Boxes</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Boxes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Colored Boxes</h1>
+    <div class="color-grid"> 
+        <div class="color-box color1"></div>
+        <div class="color-box color2"></div>
+        <div class="color-box color3"></div>
+        <div class="color-box color4"></div>
+        <div class="color-box color5"></div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 20px;
+    background-color: #f4f4f4;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 10px;
+    width: 100%;
+    max-width: 800px;
+}
+
+.color-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    border-radius: 8px;
+    text-align: center;
+    width: 100px;
+    height: 100px;
+}
+
+.color1 {
+    background-color: #33FF57;
+}
+
+.color2 {
+    background-color: rgb(128,0,128);
+}
+
+.color3 {
+    background-color: orange;
+}
+
+.color4 {
+    background-color: hsl(59, 61%, 26%);
+}
+
+.color5 {
+    background-color: red;
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md b/curriculum/challenges/chinese/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
index 860caa50b2..c71663629c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-confidential-email-page/66bba6fff611169359d9d36a.md
@@ -1,7 +1,7 @@
 ---
 id: 66bba6fff611169359d9d36a
 title: Build a Confidential Email Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-confidential-email-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md b/curriculum/challenges/chinese/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
index 604b73d040..12a734c054 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
@@ -1,7 +1,7 @@
 ---
 id: 66f26c32ec6f90df01a44f60
 title: Design a Contact Form
-challengeType: 14
+challengeType: 25
 dashedName: design-a-contact-form
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md b/curriculum/challenges/chinese/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
new file mode 100644
index 0000000000..7efe9ec6bb
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-customer-complaint-form/67279fe50237291f80eed8b8.md
@@ -0,0 +1,857 @@
+---
+id: 67279fe50237291f80eed8b8
+title: Build a Customer Complaint Form
+challengeType: 25
+dashedName: build-a-customer-complaint-form
+demoType: onClick
+---
+
+# --description--
+
+For this lab, you have been provided with all the HTML and CSS. You will use JavaScript to validate the complaint form.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. When the form is submitted, you should ensure that:
+    - `#full-name` is not empty.
+    - `#email` is a valid email address format.
+    - `#order-no` is a sequence of ten numbers starting with `2024`.
+    - `#product-code` follows the pattern `XX##-X###-XX#`, where `X` represents either a lowercase letter or an uppercase letter and `#` represents a number.
+    - `#quantity` is a positive integer.
+    - at least one checkbox from `#complaints-group` is checked.
+    - `#complaint-description` contains at least twenty characters if the `Other` checkbox is checked.
+    - a radio button from `#solutions-group` is selected.
+    - `#solution-description` contains at least twenty characters if the `Other` radio button is selected.
+1. You should have a function named `validateForm` that returns an object containing the following keys: `full-name`, `email`, `order-no`, `product-code`, `quantity`, `complaints-group`, `complaint-description`, `solutions-group`, and `solution-description`. The value of each key should be `true` if the corresponding form field is correctly filled and `false` otherwise.
+1. You should have a function named `isValid` that takes the object returned by `validateForm` as argument and returns `true` if every form field is correctly filled and `false` otherwise.
+1. If a change event is triggered on a form field and it has a valid value, you should set its border color to `green`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
+1. If a change event is triggered on a form field and it has an invalid value, you should set its border color to `red`. In case of checkbox and radio button groups, you should set the border color of the parent `fieldset`.
+1. When you try to submit the form you should call `isValid` to validate the form.
+1. When you try to submit the form, if the form has any invalid field, each invalid field should be highlighted by setting the border color of each invalid input, textarea or fieldset (in case of checkbox and radio button groups) to `red`.
+
+# --hints--
+
+You should have a function named `validateForm`.
+
+```js
+assert.isFunction(validateForm);
+```
+
+`validateForm` should return an object.
+
+```js
+assert.isObject(validateForm());
+```
+
+`validateForm()["full-name"]` should be `false` when `#full-name` is empty, and `true` otherwise.
+
+```js
+const field = document.getElementById("full-name");
+field.value = "";
+assert.isFalse(validateForm()["full-name"]);
+field.value = "testing";
+assert.isTrue(validateForm()["full-name"]);
+```
+
+When a `change` event is triggered on `#full-name`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("full-name");
+field.value = "testing"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = ""
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["email"]` should be `true` when `#email` contains a valid email address, and `false` otherwise.
+
+```js
+const field = document.getElementById("email");
+field.value = "example@domain.com"
+assert.isTrue(validateForm()["email"]);
+field.value = "testing"
+assert.isFalse(validateForm()["email"]);
+```
+
+When a `change` event is triggered on `#email`, you should set its border color to `green` if it contains a valid email address, and `red` otherwise.
+
+```js
+const field = document.getElementById("email");
+field.value = "example@domain.com"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = ""
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["order-no"]` should be `true` when `#order-no` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("order-no");
+field.value = "2024001122"
+assert.isTrue(validateForm()["order-no"]);
+field.value = "testing"
+assert.isFalse(validateForm()["order-no"]);
+```
+
+When a `change` event is triggered on `#order-no`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("order-no");
+field.value = "2024001122"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "20240011"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["product-code"]` should be `true` when `#product-code` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("product-code");
+field.value = "Xa22-X123-Xb4";
+assert.isTrue(validateForm()["product-code"]);
+field.value = "testing"
+assert.isFalse(validateForm()["product-code"]);
+```
+
+When a `change` event is triggered on `#product-code`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("product-code");
+field.value = "Xa22-X123-Xb4"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "Xa22-123-Xb4"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+`validateForm()["quantity"]` should be `true` when `#quantity` contains a valid value, and `false` otherwise.
+
+```js
+const field = document.getElementById("quantity");
+field.value = "5";
+assert.isTrue(validateForm()["quantity"]);
+field.value = "0";
+assert.isFalse(validateForm()["quantity"]);
+```
+
+When a `change` event is triggered on `#quantity`, you should set its border color to `green` if it contains a valid value, and `red` otherwise.
+
+```js
+const field = document.getElementById("quantity");
+field.value = "2"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+field.value = "0"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+When at least one checkbox from `#complaints-group` is checked, `validateForm()["complaints-group"]` should be `true`.
+
+```js
+document.getElementById("damaged-product").checked = true
+assert.isTrue(validateForm()["complaints-group"]);
+```
+
+When none of the checkboxes from `#complaints-group` is checked, `validateForm()["complaints-group"]` should be `false`.
+
+```js
+document.getElementById("damaged-product").checked = false;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+assert.isFalse(validateForm()["complaints-group"]);
+```
+
+Once one checkbox from `#complaints-group` is checked, you should set `#complaints-group`'s border color to `green`.
+
+```js
+document.getElementById("damaged-product").checked = true;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+const fieldset = document.getElementById("complaints-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "green");
+```
+
+When all of the checkboxes from `#complaints-group` are changed to the unchecked state, you should set `#complaints-group`'s border color to `red`.
+
+```js
+document.getElementById("damaged-product").checked = false;
+document.getElementById("nonconforming-product").checked = false;
+document.getElementById("delayed-dispatch").checked = false;
+document.getElementById("other-complaint").checked = false;
+const fieldset = document.getElementById("complaints-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "red");
+```
+
+When `#other-complaint` is checked and `#complaint-description` contains at least twenty characters, `validateForm()["complaint-description"]` should be `true`.
+
+```js
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "A sentence with at least twenty characters";
+assert.isTrue(validateForm()["complaint-description"]);
+```
+
+When `#other-complaint` is checked and `#complaint-description` contains less than twenty characters, `validateForm()["complaint-description"]` should be `false`.
+
+```js
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "Less than 20 chars";
+assert.isFalse(validateForm()["complaint-description"]);
+```
+
+Once the value of `#complaint-description` is changed to a valid value, you should set its border color to `green`.
+
+```js
+const field = document.getElementById("complaint-description");
+field.value = "A sentence with at least twenty characters"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+```
+
+Once the value of `#complaint-description` is changed to an invalid value, you should set its border color to `red`.
+
+```js
+const field = document.getElementById("complaint-description");
+field.value = "Not enough chars"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+When a radio button from `#solutions-group` is checked, `validateForm()["solutions-group"]` should be `true`.
+
+```js
+document.getElementById("refund").checked = true
+assert.isTrue(validateForm()["solutions-group"]);
+```
+
+When none of the radio buttons from `#solutions-group` is checked, `validateForm()["solutions-group"]` should be `false`.
+
+```js
+document.getElementById("refund").checked = false;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+assert.isFalse(validateForm()["solutions-group"]);
+```
+
+Once a radio button from `#solutions-group` is checked, you should set `#solutions-group`'s border color to `green`.
+
+```js
+document.getElementById("refund").checked = true;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+const fieldset = document.getElementById("solutions-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "green");
+```
+
+When all of the checkboxes from `#complaints-group` are changed to the unchecked state, you should set `#complaints-group`'s border color to `red`.
+
+```js
+document.getElementById("refund").checked = false;
+document.getElementById("exchange").checked = false;
+document.getElementById("other-solution").checked = false;
+const fieldset = document.getElementById("solutions-group");
+fieldset.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(fieldset.style.borderColor, "red");
+```
+
+When `#other-solution` is checked and `#solution-description` contains at least twenty characters, `validateForm()["solution-description"]` should be `true`.
+
+```js
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "A sentence with at least twenty characters";
+assert.isTrue(validateForm()["solution-description"]);
+```
+
+When `#other-solution` is checked and `#solution-description` contains less than twenty characters, `validateForm()["solution-description"]` should be `false`.
+
+```js
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "Less than 20 chars";
+assert.isFalse(validateForm()["solution-description"]);
+```
+
+Once the value of `#solution-description` is changed to a valid value, you should set its border color to `green`.
+
+```js
+const field = document.getElementById("solution-description");
+field.value = "A sentence with at least twenty characters"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "green");
+```
+
+Once the value of `#solution-description` is changed to an invalid value, you should set its border color to `red`.
+
+```js
+const field = document.getElementById("solution-description");
+field.value = "Not enough chars"
+field.dispatchEvent(new Event("change", { bubbles: true }));
+assert.equal(field.style.borderColor, "red");
+```
+
+You should have a function named `isValid`.
+
+```js
+assert.isFunction(isValid);
+```
+
+Your `isValid` function should take the `validateForm()` as its argument and return `true` when all the form fields have been filled correctly.
+
+```js
+document.getElementById("full-name").value = "testing"
+document.getElementById("email").value = "example@domain.com"
+document.getElementById("order-no").value = "2024001122"
+document.getElementById("product-code").value = "Xa22-X123-Xb4"
+document.getElementById("quantity").value = "5"
+document.getElementById("damaged-product").checked = true
+document.getElementById("other-complaint").checked = false
+document.getElementById("refund").checked = true
+document.getElementById("other-solution").checked = false
+assert.isTrue(isValid(validateForm()));
+
+document.getElementById("other-complaint").checked = true
+document.getElementById("complaint-description").value = "A sentence with at least twenty characters";
+document.getElementById("other-solution").checked = true
+document.getElementById("solution-description").value = "A sentence with at least twenty characters";
+assert.isTrue(isValid(validateForm()));
+```
+
+Your `isValid` function should take the `validateForm()` as its argument and return `false` when not all the form fields have been filled correctly.
+
+```js
+const name = document.getElementById("full-name");
+const email = document.getElementById("email");
+const orderNo = document.getElementById("order-no");
+const prCode = document.getElementById("product-code");
+const quantity = document.getElementById("quantity");
+const damaged = document.getElementById("damaged-product");
+const nonConforming = document.getElementById("nonconforming-product");
+const delayed = document.getElementById("delayed-dispatch");
+const otherC = document.getElementById("other-complaint");
+const complaintDescr = document.getElementById("complaint-description");
+const refund = document.getElementById("refund");
+const exchange = document.getElementById("exchange");
+const otherS = document.getElementById("other-solution");
+const solutionDescr = document.getElementById("solution-description");
+
+// invalid full-name
+name.value = "";
+email.value = "example@domain.com";
+orderNo.value = "2024001122";
+prCode.value = "Xa22-X123-Xb4";
+quantity.value = "5";
+damaged.checked = true;
+refund.checked = true;
+assert.isFalse(isValid(validateForm()));
+
+// invalid email
+name.value = "testing";
+email.value = "";
+assert.isFalse(isValid(validateForm()));
+
+// invalid order-no
+email.value = "example@domain.com";
+orderNo.value = "202400";
+assert.isFalse(isValid(validateForm()));
+
+// invalid product-code
+orderNo.value = "2024001122";
+prCode.value = "1a22-Xa23-Xb4";
+assert.isFalse(isValid(validateForm()));
+
+// invalid quantity
+prCode.value = "Xa22-X123-Xb4";
+quantity.value = 0;
+assert.isFalse(isValid(validateForm()));
+
+// invalid complaints-group
+quantity.value = 5;
+damaged.checked = false;
+nonConforming.checked = false;
+delayed.checked = false;
+otherC.checked = false;
+assert.isFalse(isValid(validateForm()));
+
+// invalid complaint-description
+otherC.checked = true;
+complaintDescr.value = "not enough chars";
+assert.isFalse(isValid(validateForm()));
+
+
+// invalid solutions-group
+complaintDescr.value = "A sentence with at least twenty characters";
+refund.checked = false;
+exchange.checked = false;
+otherS.checked = false;
+assert.isFalse(isValid(validateForm()));
+
+// invalid solutions-description
+otherS.checked = true;
+solutionDescr.value = "not enough chars";
+assert.isFalse(isValid(validateForm()));
+```
+
+You should call `isValid` when you try to submit the form.
+
+```js
+let flag = false;
+const temp = isValid;
+try {
+    isValid = (obj) => {flag = true};
+    document.getElementById("form").dispatchEvent(new Event("submit"));
+    assert.isTrue(flag);
+} finally {
+    isValid = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Customer Complaint Form</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <h1>Complaint Form</h1>
+    <form id="form">
+        <fieldset id="personal-info">
+            <div>
+                <label for="full-name">Full Name:</label>
+                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
+            </div>
+
+            <div>
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" placeholder="example@domain.com">
+            </div>
+        </fieldset>
+        <hr>
+        <fieldset id="product-info">
+            <div>
+                <label for="order-no">Order No:</label>
+                <input type="text" id="order-no" name="order-no" placeholder="2024######">
+            </div>
+            <div>
+                <label for="product-code">Product Code:</label>
+                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
+            </div>
+            <div>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" name="quantity" min="1">
+            </div>
+        </fieldset>
+
+        <fieldset id="complaints-group">
+            <legend>Complaint Reason:</legend>
+            <div>
+                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
+                <label for="damaged-product">Damaged Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
+                <label for="nonconforming-product">Nonconforming Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
+                <label for="delayed-dispatch">Delayed Dispatch</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="other-complaint" name="complaint" value="other">
+                <label for="other-complaint">Other</label>
+            </div>
+        </fieldset>
+
+        <div id="complaint-description-container">
+            <legend>Description of Complaint Reason</legend>
+            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
+                name="complaint-textarea" id="complaint-description"></textarea>
+        </div>
+
+        <fieldset id="solutions-group">
+            <legend>Desired Solution</legend>
+            <input type="radio" name="solutions" id="refund" value="refund">
+            <label for="refund">Refund</label>
+
+            <input type="radio" name="solutions" id="exchange" value="exchange">
+            <label for="exchange">Exchange</label>
+
+            <input type="radio" name="solutions" id="other-solution" value="other">
+            <label for="other-solution">Other</label>
+        </fieldset>
+
+        <div id="solution-description-container">
+            <legend>Description of Desired Solution</legend>
+            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
+                name="solution-textarea" id="solution-description"></textarea>
+        </div>
+        <div id="btn-container">
+            <button type="submit" id="submit-btn">Submit</button>
+            <span id="message-box"></span>
+        </div>
+
+    </form>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    text-align: center;
+}
+
+#form {
+    max-width: 70%;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 10px;
+}
+
+input {
+    border-color: rgb(118, 118, 118);
+}
+
+#personal-info input, #product-info input {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+fieldset {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border-color: rgb(118, 118, 118);
+}
+
+textarea {
+    width: 100%;
+    border-color: rgb(118, 118, 118);
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#submit-btn, #clear-btn {
+    margin: 10px 15px 0;
+}
+```
+
+```js
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Customer Complaint Form</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <h1>Complaint Form</h1>
+    <form id="form">
+        <fieldset id="personal-info">
+            <div>
+                <label for="full-name">Full Name:</label>
+                <input type="text" id="full-name" name="full-name" placeholder="John Doe">
+            </div>
+
+            <div>
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" placeholder="example@domain.com">
+            </div>
+        </fieldset>
+        <hr>
+        <fieldset id="product-info">
+            <div>
+                <label for="order-no">Order No:</label>
+                <input type="text" id="order-no" name="order-no" placeholder="2024######">
+            </div>
+            <div>
+                <label for="product-code">Product Code:</label>
+                <input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
+            </div>
+            <div>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" name="quantity" min="1">
+            </div>
+        </fieldset>
+
+        <fieldset id="complaints-group">
+            <legend>Complaint Reason:</legend>
+            <div>
+                <input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
+                <label for="damaged-product">Damaged Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
+                <label for="nonconforming-product">Nonconforming Product</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
+                <label for="delayed-dispatch">Delayed Dispatch</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="other-complaint" name="complaint" value="other">
+                <label for="other-complaint">Other</label>
+            </div>
+        </fieldset>
+
+        <div id="complaint-description-container">
+            <legend>Description of Complaint Reason</legend>
+            <textarea placeholder="Describe the reason of your complaint in at least 20 characters"
+                name="complaint-textarea" id="complaint-description"></textarea>
+        </div>
+
+        <fieldset id="solutions-group">
+            <legend>Desired Solution</legend>
+            <input type="radio" name="solutions" id="refund" value="refund">
+            <label for="refund">Refund</label>
+
+            <input type="radio" name="solutions" id="exchange" value="exchange">
+            <label for="exchange">Exchange</label>
+
+            <input type="radio" name="solutions" id="other-solution" value="other">
+            <label for="other-solution">Other</label>
+        </fieldset>
+
+        <div id="solution-description-container">
+            <legend>Description of Desired Solution</legend>
+            <textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
+                name="solution-textarea" id="solution-description"></textarea>
+        </div>
+        <div id="btn-container">
+            <button type="submit" id="submit-btn">Submit</button>
+            <span id="message-box"></span>
+            <button type="button" id="clear-btn">Clear</button>
+        </div>
+
+    </form>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+h1 {
+    text-align: center;
+}
+
+#form {
+    max-width: 70%;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 10px;
+}
+
+input {
+    border-color: rgb(118, 118, 118);
+}
+
+#personal-info input, #product-info input {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+
+fieldset {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border-color: rgb(118, 118, 118);
+}
+
+textarea {
+    width: 100%;
+    border-color: rgb(118, 118, 118);
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#submit-btn, #clear-btn {
+    margin: 10px 15px 0;
+}
+```
+
+```js
+const form = document.getElementById("form");
+const fullName = document.getElementById("full-name");
+const emailAddress = document.getElementById("email");
+const orderNo = document.getElementById("order-no");
+const productCode = document.getElementById("product-code");
+const quantity = document.getElementById("quantity");
+const complaints = document.querySelectorAll('input[name="complaint"]');
+const complaintDescription = document.getElementById("complaint-description");
+const complaintTextAreaDiv = document.getElementById("complaint-description-container");
+const solutions = document.querySelectorAll('input[name="solutions"]');
+const solutionDescription = document.getElementById("solution-description");
+const solutionTextAreaDiv = document.getElementById("solution-description-container");
+const submitBtn = document.getElementById("submit-btn");
+const messageBox = document.getElementById("message-box");
+const clearBtn = document.getElementById("clear-btn");
+
+const hideTextareas = () => {
+    complaintTextAreaDiv.style.display = "none";
+    solutionTextAreaDiv.style.display = "none";
+}
+
+hideTextareas();
+
+const formFields = {
+    "full-name": fullName,
+    "email": emailAddress,
+    "order-no": orderNo,
+    "product-code": productCode,
+    "quantity": quantity,
+    "complaints-group": Array.from(complaints),
+    "complaint-description": complaintDescription,
+    "solutions-group": Array.from(solutions),
+    "solution-description": solutionDescription
+}
+
+const clearForm = () => {
+    Object.entries(formFields).forEach(entry => {
+        const [key, val] = entry;
+        if (Array.isArray(val)) {
+            val.forEach(i => i.checked = false);
+        } else {
+            val.value = "";
+        }
+        hideTextareas();
+        messageBox.innerText = "";
+        document.getElementById(key).style.borderColor = "rgb(118, 118, 118)";
+    })
+}
+
+const validateForm = () => {
+    const complaintsArr = Array.from(complaints).map(i => i.checked);
+    const solutionsArr = Array.from(solutions).map(i => i.checked);
+    const validationObject = {
+        "full-name": Boolean(fullName.value.trim()),
+        "email": /^\S+@\S+\.\S+$/.test(emailAddress.value.trim()),
+        "order-no": /^2024\d{6}$/.test(orderNo.value.trim()),
+        "product-code": /[A-Z]{2}\d{2}-[A-Z]\d{3}-[A-Z]{2}\d/i.test(productCode.value.trim()),
+        "quantity": Number(quantity.value.trim()) > 0,
+        "complaints-group": complaintsArr.some(i => i),
+        "complaint-description": null,
+        "solutions-group": solutionsArr.some(i => i),
+        "solution-description": null
+    }
+
+    if (complaintsArr[3]) {
+        complaintTextAreaDiv.style.display = "block";
+        const complaintsDescriptionVal = complaintDescription.value.trim();
+        if (complaintsDescriptionVal.length < 20) {
+            validationObject["complaint-description"] = false;
+        } else {
+            validationObject["complaint-description"] = true;
+        }
+    } else {
+        complaintTextAreaDiv.style.display = "none";
+    }
+    if (solutionsArr[2]) {
+        solutionTextAreaDiv.style.display = "block";
+        const solutionDescriptionVal = solutionDescription.value.trim();
+        if (solutionDescriptionVal.length < 20) {
+            validationObject["solution-description"] = false;
+        } else {
+            validationObject["solution-description"] = true;
+        }
+    } else {
+        solutionTextAreaDiv.style.display = "none";
+    }
+    if (validationObject["complaint-description"] === null) delete validationObject["complaint-description"];
+    if (validationObject["solution-description"] === null) delete validationObject["solution-description"];
+
+    return validationObject;
+}
+
+clearBtn.addEventListener("click", clearForm);
+
+Object.keys(formFields).forEach(key => {
+    document.getElementById(key).addEventListener("change", (e) => {
+        const validationObject = validateForm();
+        if (Object.values(validationObject).every(val => val)) messageBox.innerText = "";
+        if (!validationObject[key]) {
+            document.getElementById(key).style.borderColor = "red";
+        } else {
+            document.getElementById(key).style.borderColor = "green";
+        }
+    });
+});
+
+const isValid = (validationObj) => Object.values(validationObj).every(i => i);
+
+form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const validationObject = validateForm();
+    if (!isValid(validationObject)) {
+        messageBox.innerText = "Please, fill out the required fields correctly before submitting.";
+        Object.keys(validationObject).forEach(key => {
+            if (!validationObject[key]) {
+                document.getElementById(key).style.borderColor = "red";
+            } else {
+                document.getElementById(key).style.borderColor = "green";
+            }
+        });
+    } else {
+        messageBox.innerText = "";
+        alert("Form successfully submitted.");
+        clearForm();
+    }
+});
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md b/curriculum/challenges/chinese/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
index f3d97e30f9..ceb591560e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md
@@ -1,7 +1,7 @@
 ---
 id: 66f686b8ebdb982fa8e14330
 title: Build a Date Conversion Program
-challengeType: 14
+challengeType: 25
 dashedName: lab-date-conversion
 ---
 
@@ -63,7 +63,7 @@ You should have a function `formatDateMMDDYYYY`
 assert.isFunction(formatDateMMDDYYYY);
 ```
 
-The function`formatDateMMDDYYYY` should take a single parameter.
+The function `formatDateMMDDYYYY` should take a single parameter.
 
 ```js
 assert.lengthOf(formatDateMMDDYYYY, 1);
@@ -91,7 +91,7 @@ You should have a function `formatDateLong`
 assert.isFunction(formatDateLong);
 ```
 
-The function`formatDateLong` should take a single a parameter.
+The function `formatDateLong` should take a single a parameter.
 
 ```js
 assert.lengthOf(formatDateLong, 1);
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md b/curriculum/challenges/chinese/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
new file mode 100644
index 0000000000..a3dfa325d2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-drum-machine/6762ec275cef87635acc4fe3.md
@@ -0,0 +1,543 @@
+---
+id: 6762ec275cef87635acc4fe3
+title: Build a Drum Machine
+challengeType: 25
+dashedName: build-drum-machine
+demoType: onClick
+---
+
+# --description--
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+1. You should have a `div` element with an `id` of `drum-machine` that contains all other elements.
+
+2. Inside the `#drum-machine` element you should have another `div` with an `id` of `pad-bank`.
+
+3. Inside the `#drum-machine` element you should have a `p` element with an `id` of `display`.
+
+4. Inside your `#pad-bank` element you should have nine clickable drum pad elements each with a class of `drum-pad`, a unique `id` that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. The drum pads MUST be in this order.
+
+5. Each `.drum-pad` should have an `audio` element which has a class of `clip`, a `src` attribute that points to an audio clip, and an `id` corresponding to the inner text of its parent `.drum-pad` element (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
+
+6. When you click on a `.drum-pad` element, the audio clip contained in its child audio element should be triggered.
+
+7. When you press the trigger key associated with each `.drum-pad`, the audio clip contained in its child audio element should be triggered (e.g. pressing the `Q` key should trigger the drum pad which contains the string `Q`, pressing the `W` key should trigger the drum pad which contains the string `W`, etc.).
+
+8. When a `.drum-pad` is triggered, you should display a string describing the associated audio clip as the inner text of the `#display` element (each string must be unique).
+
+Some audio samples you can use for your drum machine can be found at `https://cdn.freecodecamp.org/curriculum/drum/<fileName>`, where `<fileName>` is as follows:
+
+| drum name   | `fileName`       |
+| ----------- | ---------------- |
+| Heater 1    | `Heater-1.mp3`   |
+| Heater 2    | `Heater-2.mp3`   |
+| Heater 3    | `Heater-3.mp3`   |
+| Heater 4    | `Heater-4_1.mp3` |
+| Clap        | `Heater-6.mp3`   |
+| Open-HH     | `Dsc_Oh.mp3`     |
+| Kick-n'-Hat | `Kick_n_Hat.mp3` |
+| Kick        | `RP4_KICK_1.mp3` |
+| Closed-HH   | `Cev_H2.mp3`     |
+
+# --hints--
+
+You should have a `div` element with an `id` of `drum-machine` that contains all other elements.
+
+```js
+assert.isNotNull(document.querySelector('div#drum-machine'));
+```
+
+Inside the `#drum-machine` element you should have another `div` with an `id` of `pad-bank`.
+
+```js
+assert.isNotNull(document.querySelector('#drum-machine div#pad-bank'));
+```
+
+Inside the `#drum-machine` element you should have a `p` element with an `id` of `display`.
+
+```js
+assert.isNotNull(document.querySelector('#drum-machine p#display'));
+```
+
+Inside your `#pad-bank` element you should have nine clickable drum pad elements each with a class of `drum-pad`.
+
+```js
+assert.lengthOf(document.querySelectorAll('#pad-bank .drum-pad'), 9);
+```
+
+Each `.drum-pad` should have one of the following letters as `innerText`, in order: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`.
+
+```js
+const pads = document.querySelectorAll('.drum-pad');
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+for (let i = 0; i < 9; i++) {
+  assert.equal(pads[i].innerText.trim(), letters[i]);
+}
+```
+
+Each `.drum-pad` should have an `audio` element which has a class of `clip`, a `src` attribute that points to an audio clip, and an `id` corresponding to the inner text of its parent `.drum-pad` element (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
+
+```js
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+const audios = document.querySelectorAll('#drum-machine .drum-pad audio');
+
+for (let i = 0; i < 9; i++) {
+  assert.equal(audios[i].id, letters[i]);
+  assert.isTrue(audios[i].classList.contains('clip'));
+  assert.isTrue(audios[i].hasAttribute('src'));
+}
+```
+
+When you click on a `.drum-pad` element, the audio clip contained in its child audio element should be triggered.
+
+```js
+const pads = document.querySelectorAll('.drum-pad');
+assert.isNotEmpty(pads);
+pads.forEach(el => {
+  const audio = el.querySelector('audio');
+  el.click();
+  assert.isFalse(audio.paused);
+  audio.pause();
+});
+```
+
+When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding `audio` element should play the corresponding sound.
+
+```js
+const letters = [`Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`];
+const audios = document.querySelectorAll('#drum-machine .drum-pad audio');
+
+for (let i = 0; i < 9; i++) {
+  const audio = audios[i];
+  document.dispatchEvent(
+    new KeyboardEvent('keydown', { key: letters[i].toLowerCase() })
+  );
+  assert.isFalse(audio.paused);
+  audio.pause();
+}
+```
+
+When a `.drum-pad` is triggered, you should display a string describing the associated audio clip as the inner text of the `#display` element (each string must be unique).
+
+```js
+const collection = new Set();
+const disp = document.querySelector('#display');
+const pads = document.querySelectorAll('.drum-pad');
+assert.lengthOf(pads, 9);
+pads.forEach(el => {
+  const audio = el.querySelector('audio');
+  el.click();
+  collection.add(disp.innerText.trim());
+  audio.pause();
+});
+assert.lengthOf(collection, 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Drum Machine</title>
+  </head>
+  <body></body>
+</html>
+```
+
+```css
+
+```
+
+```js
+
+```
+
+# --solutions--
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Drum Machine</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="inner-container" id="drum-machine">
+      <div id="pad-bank"></div>
+
+      <div class="controls-container">
+        <div class="control power-control">
+          <p>Power: <span id="power-status">On</span></p>
+          <div class="select">
+            <div class="inner"></div>
+          </div>
+        </div>
+
+        <!-- Display for Drum Pad Name and Volume -->
+        <p id="display"></p>
+
+        <div class="volume-slider">
+          <input type="range" min="0" max="1" step="0.01" value="0.3" />
+        </div>
+
+        <div class="control bank-control">
+          <p>Bank: <span id="current-bank">Heater Kit</span></p>
+          <div class="select">
+            <div class="inner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
+```
+
+```css
+/* General Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #282c34;
+  color: white;
+}
+
+.inner-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #3b3b5f;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+}
+
+/* Drum Pad Styles */
+#pad-bank {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.drum-pad {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+  background: #444;
+  border-radius: 5px;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+
+.drum-pad.active {
+  background: #ffaa33;
+}
+
+.controls-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.control {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.select {
+  width: 50px;
+  height: 20px;
+  background: #555;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.select .inner {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  background: #ffaa33;
+  border-radius: 50%;
+  top: 1px;
+  left: calc(100% - 18px);
+}
+
+#display {
+  margin: 15px 0;
+  text-align: center;
+  font-size: 1em;
+  padding: 20px;
+  background: #444;
+  border-radius: 5px;
+  width: 100%;
+}
+
+.volume-slider input[type='range'] {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: #ffaa33;
+  border-radius: 2px;
+  margin-bottom: 10px;
+}
+
+.volume-slider input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+```
+
+```js
+const projectName = 'drum-machine';
+
+const bankOne = [
+  {
+    keyCode: 81,
+    keyTrigger: 'Q',
+    id: 'Heater-1',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3'
+  },
+  {
+    keyCode: 87,
+    keyTrigger: 'W',
+    id: 'Heater-2',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3'
+  },
+  {
+    keyCode: 69,
+    keyTrigger: 'E',
+    id: 'Heater-3',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3'
+  },
+  {
+    keyCode: 65,
+    keyTrigger: 'A',
+    id: 'Heater-4',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3'
+  },
+  {
+    keyCode: 83,
+    keyTrigger: 'S',
+    id: 'Clap',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3'
+  },
+  {
+    keyCode: 68,
+    keyTrigger: 'D',
+    id: 'Open-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3'
+  },
+  {
+    keyCode: 90,
+    keyTrigger: 'Z',
+    id: "Kick-n'-Hat",
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3'
+  },
+  {
+    keyCode: 88,
+    keyTrigger: 'X',
+    id: 'Kick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3'
+  },
+  {
+    keyCode: 67,
+    keyTrigger: 'C',
+    id: 'Closed-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3'
+  }
+];
+
+const bankTwo = [
+  {
+    keyCode: 81,
+    keyTrigger: 'Q',
+    id: 'Chord-1',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_1.mp3'
+  },
+  {
+    keyCode: 87,
+    keyTrigger: 'W',
+    id: 'Chord-2',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_2.mp3'
+  },
+  {
+    keyCode: 69,
+    keyTrigger: 'E',
+    id: 'Chord-3',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Chord_3.mp3'
+  },
+  {
+    keyCode: 65,
+    keyTrigger: 'A',
+    id: 'Shaker',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Give_us_a_light.mp3'
+  },
+  {
+    keyCode: 83,
+    keyTrigger: 'S',
+    id: 'Open-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Dry_Ohh.mp3'
+  },
+  {
+    keyCode: 68,
+    keyTrigger: 'D',
+    id: 'Closed-HH',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Bld_H1.mp3'
+  },
+  {
+    keyCode: 90,
+    keyTrigger: 'Z',
+    id: 'Punchy-Kick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/punchy_kick_1.mp3'
+  },
+  {
+    keyCode: 88,
+    keyTrigger: 'X',
+    id: 'Side-Stick',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/side_stick_1.mp3'
+  },
+  {
+    keyCode: 67,
+    keyTrigger: 'C',
+    id: 'Snare',
+    url: 'https://cdn.freecodecamp.org/curriculum/drum/Brk_Snr.mp3'
+  }
+];
+
+const state = {
+  power: true,
+  display: ' ',
+  currentPadBank: bankOne,
+  currentPadBankId: 'Heater Kit',
+  sliderVal: 0.3
+};
+
+const display = document.getElementById('display');
+
+const setDisplay = text => {
+  state.display = text;
+  display.innerText = text;
+};
+
+const adjustVolume = e => {
+  if (state.power) {
+    state.sliderVal = e.target.value;
+    setDisplay(`Volume: ${Math.round(e.target.value * 100)}`);
+    setTimeout(() => setDisplay(' '), 1000);
+    document.querySelectorAll('.clip').forEach(sound => {
+      sound.volume = state.sliderVal;
+    });
+  }
+};
+
+const activatePad = pad => {
+  pad.classList.add('active');
+  setTimeout(() => pad.classList.remove('active'), 100);
+};
+
+const playSound = (id, name) => {
+  if (!state.power) return;
+
+  const sound = document.getElementById(id);
+  sound.currentTime = 0;
+  sound.play();
+  activatePad(sound.parentNode);
+  setDisplay(name);
+};
+
+const renderPadBank = () => {
+  const padBank = document.querySelector('#pad-bank');
+  padBank.innerHTML = '';
+
+  state.currentPadBank.forEach(drum => {
+    const pad = document.createElement('div');
+    pad.classList.add('drum-pad');
+    pad.id = drum.id;
+    pad.innerText = drum.keyTrigger;
+
+    const audio = document.createElement('audio');
+    audio.classList.add('clip');
+    audio.id = drum.keyTrigger;
+    audio.src = drum.url;
+    pad.appendChild(audio);
+
+    pad.addEventListener('click', () =>
+      playSound(drum.keyTrigger, drum.id.replace(/-/g, ' '))
+    );
+    document.addEventListener('keydown', e => {
+      if (e.key === drum.keyTrigger.toLowerCase())
+        playSound(drum.keyTrigger, drum.id.replace(/-/g, ' '));
+    });
+
+    padBank.appendChild(pad);
+  });
+};
+
+const powerControl = () => {
+  state.power = !state.power;
+  document.getElementById('power-status').textContent = state.power
+    ? 'On'
+    : 'Off';
+
+  setDisplay('');
+
+  const powerSlider = document.querySelector('.power-control .select .inner');
+  powerSlider.style.left = state.power ? 'calc(100% - 18px)' : '0';
+};
+
+const selectBank = () => {
+  if (!state.power) return;
+  setDisplay(' ');
+  state.currentPadBank =
+    state.currentPadBankId === 'Heater Kit' ? bankTwo : bankOne;
+  state.currentPadBankId =
+    state.currentPadBankId === 'Heater Kit' ? 'Smooth Piano Kit' : 'Heater Kit';
+
+  renderPadBank();
+  document.getElementById('current-bank').textContent =
+    state.currentPadBankId === 'Heater Kit' ? 'Heater Kit' : 'Smooth Piano Kit';
+  const bankControl = document.querySelector('.bank-control .select .inner');
+  bankControl.style.left =
+    state.currentPadBankId === 'Heater Kit' ? 'calc(100% - 18px)' : '0';
+};
+
+document
+  .querySelector('.power-control')
+  .addEventListener('click', powerControl);
+document.querySelector('.bank-control').addEventListener('click', selectBank);
+document
+  .querySelector('.volume-slider input')
+  .addEventListener('input', adjustVolume);
+
+renderPadBank();
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md b/curriculum/challenges/chinese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
index d7b8408514..5091c9539e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-email-masker/66b205e6eacba4c4e54ea434.md
@@ -1,7 +1,7 @@
 ---
 id: 66b205e6eacba4c4e54ea434
 title: Build an Email Masker
-challengeType: 14
+challengeType: 25
 dashedName: build-an-email-masker
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md b/curriculum/challenges/chinese/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
index 0a023727f9..34c329f0f6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
@@ -1,7 +1,7 @@
 ---
 id: 66e45c8140f9fda5c105ae26
 title: Build an Event Flyer Page
-challengeType: 14
+challengeType: 25
 dashedName: build-an-event-flyer-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/chinese/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
index 08943703ab..ffbe38d9d7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
@@ -1,7 +1,7 @@
 ---
 id: 66ebd4ae2812430bb883c787
 title: Build an Event Hub
-challengeType: 14
+challengeType: 25
 dashedName: lab-event-hub
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md b/curriculum/challenges/chinese/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
index 07ccf9b84e..4f24487ac1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-factorial-calculator/66c07238b01053abaf812065.md
@@ -1,7 +1,7 @@
 ---
 id: 66c07238b01053abaf812065
 title: Build a Factorial Calculator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-factorial-calculator
 ---
 
@@ -71,12 +71,6 @@ The factorial of `7` should return `5040`.
 assert.strictEqual(factorialCalculator(7), 5040);
 ```
 
-For `5`, the `resultMsg` should contain `Factorial of 5 is 120`.
-
-```js
-assert.strictEqual(resultMsg, 'Factorial of 5 is 120');
-```
-
 You should call your `factorialCalculator` function with the `num` variable as the argument.
 
 ```js
@@ -98,6 +92,13 @@ assert.strictEqual(factorialCalculator(9), 362880);
 assert.strictEqual(factorialCalculator(11), 39916800);
 ```
 
+Your `resultMsg` should contain a string in a format `Factorial of [num] is [factorial]`.
+
+```js
+assert.strictEqual(resultMsg, `Factorial of ${num} is ${factorialCalculator(num)}`);
+assert.notMatch(__helpers.removeJSComments(code), /Factorial of \d{1,2} is \d+/);
+```
+
 You should output the value of `resultMsg` to the console.
 
 ```js
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md b/curriculum/challenges/chinese/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
index 63e5bc2552..e5ff92ea44 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
@@ -1,7 +1,7 @@
 ---
 id: 66bf6bacf178eac7b96d4f5e
 title: Build a Favorite Icon Toggler
-challengeType: 14
+challengeType: 25
 dashedName: build-a-favorite-icon-toggler
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md b/curriculum/challenges/chinese/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
index 5bf3e1cc15..55e29ad88d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-fcc-forum-leaderboard/673c91f0b934834bc4a3ecc2.md
@@ -1,7 +1,7 @@
 ---
 id: 673c91f0b934834bc4a3ecc2
 title: Build an fCC Forum Leaderboard
-challengeType: 14
+challengeType: 25
 dashedName: build-an-fcc-forum-leaderboard
 demoType: onClick
 ---
@@ -16,39 +16,39 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 
 1. You should have a function named `timeAgo` that takes a timestamp in the ISO 8601 format as the argument.
 1. The `timeAgo` function should compute the time difference between the time passed as an argument and the current time and return:
-    - `xm ago` (`x` represents minutes) if the amount of minutes that have passed is less than `60`.
-    - `xh ago` (`x` represents hours) if the amount of hours that have passed is less than `24`.
-    - `xd ago` (`x` represents days) otherwise.
+   - `xm ago` (`x` represents minutes) if the amount of minutes that have passed is less than `60`.
+   - `xh ago` (`x` represents hours) if the amount of hours that have passed is less than `24`.
+   - `xd ago` (`x` represents days) otherwise.
 1. You should have a function named `viewCount` that takes the number of views of a post as the argument.
 1. If the value of the views passed as the argument is greater than or equal to `1000`, the `viewCount` function should return a string with the views value divided by `1000`, rounded down to the nearest whole number and the letter `k` appended to it. Otherwise, it should return the views value.
 1. You should have a function named `forumCategory` that takes the id of a selected category as the argument.
 1. The `forumCategory` function should verify that the selected category id is a property of the `allCategories` object and should return a string containing an anchor element with:
-    - the text of the `category` key of the selected category.
-    - a class of `category` followed by the `className` property of the selected category.
-    - an `href` with the value of `<forumCategoryUrl>/<className>/<id>`, where `<className>` is the `className` property of the selected category and `id` is the argument passed to `forumCategory`.
+   - the text of the `category` key of the selected category.
+   - a class of `category` followed by the `className` property of the selected category.
+   - an `href` with the value of `<forumCategoryUrl>/<className>/<id>`, where `<className>` is the `className` property of the selected category and `id` is the argument passed to `forumCategory`.
 1. If the `allCategories` object does not have the selected category id as its property, `className` and `category` should be indicated as `general`.
 1. You should have a function named `avatars` that takes two arrays representing posters and users, respectively.
-1. The `avatars` function should return a string made by joining `img` elements, one for each poster found inside the user array. *Hint:* You can find users by comparing the `user_id` property of the poster with the `id` property` of the user.
+1. The `avatars` function should return a string made by joining `img` elements, one for each poster found inside the user array. _Hint:_ You can find users by comparing the `user_id` property of the poster with the `id` property` of the user.
 1. The `avatars` function should set each avatar's size by accessing the `avatar_template` property and replacing `{size}` with `30`.
 1. Each image element should have an alt text with the value of the `name` property of the poster.
 1. Each image element should have a source with the value of the `avatar_template` property of the poster. In case `avatar_template` contains a relative path, you should set the source to `<avatarUrl>/<avatar_template>`.
 1. You should have a function named `showLatestPosts` that takes a single parameter.
 1. The `showLatestPosts` should extract the `users` and `topic_list` properties from the object passed as argument. Also, it should process the following properties of the objects from the `topics` array, which is contained in `topic_list`:
-    - `id`: the id of the post
-    - `title`: the title of the post
-    - `views`: the number of views of the post
-    - `posts_count`: the number of replies to the topic
-    - `slug`: the slug of the post
-    - `posters`: the posters for that topic
-    - `category_id`: an integer indicating the category id for the post
-    - `bumped_at`: a timestamp in the ISO 8601 format
+   - `id`: the id of the post
+   - `title`: the title of the post
+   - `views`: the number of views of the post
+   - `posts_count`: the number of replies to the topic
+   - `slug`: the slug of the post
+   - `posters`: the posters for that topic
+   - `category_id`: an integer indicating the category id for the post
+   - `bumped_at`: a timestamp in the ISO 8601 format
 1. The `showLatestPosts` should set the inner HTML of `#posts-container` to a string made by joining `tr` elements, one for each item in `topics`.
 1. Each `tr` element should have five `td` elements in it:
-    - a `td` containing two anchor elements, one with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and one obtained by calling `forumCategory` with `category_id`.
-    - a `td` containing a `div` element with class `avatar-container` that contains the images returned by the `avatars` function called with `posters` and `users` as arguments.
-    - a `td` containing the number of replies to the post. *Hint:* use `posts_count - 1`.
-    - a `td` containing the number of views of the post.
-    - a `td` containing the time passed since the last activity.
+   - a `td` containing two anchor elements, one with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and one obtained by calling `forumCategory` with `category_id`.
+   - a `td` containing a `div` element with class `avatar-container` that contains the images returned by the `avatars` function called with `posters` and `users` as arguments.
+   - a `td` containing the number of replies to the post. _Hint:_ use `posts_count - 1`.
+   - a `td` containing the number of views of the post.
+   - a `td` containing the time passed since the last activity.
 1. You should have an async function named `fetchData`.
 1. The `fetchData` function should request data from `forumLatest` and call `showLatestPosts` passing it the response parsed as JSON.
 1. If there's an error when fetching data, the `fetchData` function should log the error to the console.
@@ -66,10 +66,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 50)).toISOString()
-}
-const expected = "50m ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 50).toISOString();
+};
+const expected = '50m ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -78,10 +78,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60)).toISOString()
-}
-const expected = "1h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60).toISOString();
+};
+const expected = '1h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -90,10 +90,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * ( 60 * 115))).toISOString()
-}
-const expected = "1h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * (60 * 115)).toISOString();
+};
+const expected = '1h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -102,10 +102,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 15)).toISOString()
-}
-const expected = "15h ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 15).toISOString();
+};
+const expected = '15h ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -114,10 +114,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 24)).toISOString()
-}
-const expected = "1d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 24).toISOString();
+};
+const expected = '1d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -126,10 +126,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 46)).toISOString()
-}
-const expected = "1d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 46).toISOString();
+};
+const expected = '1d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -138,10 +138,10 @@ When the time difference between the time passed as argument and the current tim
 
 ```js
 const generateTime = () => {
-    const currentTime = new Date();
-    return new Date(currentTime - (1000 * 60 * 60 * 24 * 3)).toISOString()
-}
-const expected = "3d ago";
+  const currentTime = new Date();
+  return new Date(currentTime - 1000 * 60 * 60 * 24 * 3).toISOString();
+};
+const expected = '3d ago';
 const actual = timeAgo(generateTime());
 assert.equal(actual, expected);
 ```
@@ -162,13 +162,13 @@ assert.strictEqual(597, viewCount(597));
 `viewCount(1000)` should return `1k`.
 
 ```js
-assert.equal("1k", viewCount(1000));
+assert.equal('1k', viewCount(1000));
 ```
 
 `viewCount(2730)` should return `2k`.
 
 ```js
-assert.equal("2k", viewCount(2730));
+assert.equal('2k', viewCount(2730));
 ```
 
 You should have a function named `forumCategory` that takes a single argument.
@@ -193,11 +193,17 @@ assert.match(actual, /^<\s*a.+?>\s*Project Feedback\s*<\/a>$/);
 
 ```js
 let actual = forumCategory(299);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/career\/299\1/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/career\/299\1/
+);
 
 // prevent hardcoding
 actual = forumCategory(409);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/feedback\/409\1/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/feedback\/409\1/
+);
 ```
 
 `forumCategory(299)` should return a string containing an anchor element with `class="category career"`.
@@ -222,10 +228,16 @@ assert.match(actual, /^<\s*a.+?>\s*General\s*<\/a>$/);
 
 ```js
 let actual = forumCategory(200);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/200/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/200/
+);
 
 actual = forumCategory(220);
-assert.match(actual, /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/220/);
+assert.match(
+  actual,
+  /href=("|')https:\/\/forum\.freecodecamp\.org\/c\/general\/220/
+);
 ```
 
 `forumCategory(200)` should return a string containing an anchor element with `class="category career"`.
@@ -245,58 +257,64 @@ assert.lengthOf(avatars, 2);
 The `avatars` function should return a string made by joining `img` elements, one for each poster found in the user array.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 const matches = actual.match(/<\s*img\s+.+?>/g);
-assert.lengthOf(matches, 3)
+assert.lengthOf(matches, 3);
 ```
 
 Each `img` element in the string returned by the `avatars` function should have an `alt` text with the value of the `name` property of the poster.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 const matches = actual.match(/<\s*img\s+.+?>/g);
 
@@ -308,28 +326,31 @@ assert.match(matches[2], /alt="Ilenia"/);
 The `avatars` function should set each avatar's size by accessing the `avatar_template` property and replacing `{size}` with `30`.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 assert.notMatch(actual, /\{size\}/);
 assert.lengthOf(actual.match(/\/30\//g), 3);
@@ -338,35 +359,47 @@ assert.lengthOf(actual.match(/\/30\//g), 3);
 Each `img` element in the string returned by the `avatars` function should have the `src` with the value of the `avatar_template` property of the poster. In case `avatar_template` contains a relative path, it should be set to `<avatarUrl>/<avatar_template>`.
 
 ```js
-const posters = [{ "user_id": 6 }, { "user_id": 285941 }, { "user_id": 170865 }]
+const posters = [{ user_id: 6 }, { user_id: 285941 }, { user_id: 170865 }];
 const users = [
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
     id: 6,
-    name: "Quincy Larson",
-    username: "QuincyLarson"
+    name: 'Quincy Larson',
+    username: 'QuincyLarson'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
     id: 285941,
-    name: "Jessica Wilkins",
-    username: "jwilkins.oboe"
+    name: 'Jessica Wilkins',
+    username: 'jwilkins.oboe'
   },
   {
-    avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+    avatar_template:
+      '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
     id: 170865,
-    name: "Ilenia",
-    username: "ilenia"
+    name: 'Ilenia',
+    username: 'ilenia'
   },
-  {id: 20}
-]
+  { id: 20 }
+];
 const actual = avatars(posters, users);
 
 const matches = actual.match(/<\s*img\s+.+?>/g);
 
-assert.match(matches[0], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/quincylarson\/30\/212400_2\.png"/);
-assert.match(matches[1], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/jwilkins\.oboe\/30\/179497_2\.png"/);
-assert.match(matches[2], /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/ilenia\/30\/270648_2\.png"/);
+assert.match(
+  matches[0],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/quincylarson\/30\/212400_2\.png"/
+);
+assert.match(
+  matches[1],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/jwilkins\.oboe\/30\/179497_2\.png"/
+);
+assert.match(
+  matches[2],
+  /src="https:\/\/sea1\.discourse-cdn\.com\/freecodecamp\/user_avatar\/forum\.freecodecamp\.org\/ilenia\/30\/270648_2\.png"/
+);
 ```
 
 You should have a function named `showLatestPosts` that takes a single parameter.
@@ -391,9 +424,11 @@ try {
   fetch = source => {
     testArr.push(source);
     return temp(source);
-  }
+  };
   fetchData();
-  assert.deepEqual(testArr, ["https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json"])
+  assert.deepEqual(testArr, [
+    'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json'
+  ]);
 } finally {
   fetch = temp;
 }
@@ -409,7 +444,7 @@ async () => {
     showLatestPosts = data => {
       testArr.push(data);
       return temp(data);
-  }
+    };
     await fetchData();
     assert.isNotEmpty(testArr);
   } catch (err) {
@@ -417,7 +452,7 @@ async () => {
   } finally {
     fetch = temp;
   }
-}
+};
 ```
 
 If there is an error, your `fetchData` function should log the error to the console.
@@ -428,15 +463,19 @@ const temp1 = fetch;
 const temp2 = console.log;
 async () => {
   try {
-    console.log = obj => {testArr.push(obj.toString())};
-    fetch = source => {throw new Error("This is a test error");}
+    console.log = obj => {
+      testArr.push(obj.toString());
+    };
+    fetch = source => {
+      throw new Error('This is a test error');
+    };
     await fetchData();
-    assert.deepEqual(testArr, ["Error: This is a test error"]);
+    assert.deepEqual(testArr, ['Error: This is a test error']);
   } finally {
     fetch = temp1;
     console.log = temp2;
   }
-}
+};
 ```
 
 `showLatestPosts` should set the inner HTML of `#posts-container` to a string made by joining `tr` elements, one for each item in `topics`.
@@ -445,53 +484,56 @@ async () => {
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-assert.lengthOf(pContainer.querySelectorAll("tr"), 2);
+assert.lengthOf(pContainer.querySelectorAll('tr'), 2);
 ```
 
 Each `tr` element from the string returned by `showLatestPosts` should contain `5` `td` elements.
@@ -500,54 +542,57 @@ Each `tr` element from the string returned by `showLatestPosts` should contain `
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-assert.lengthOf(pContainer.querySelectorAll("tr:first-child>td"), 5);
-assert.lengthOf(pContainer.querySelectorAll("tr:last-child>td"), 5);
+assert.lengthOf(pContainer.querySelectorAll('tr:first-child>td'), 5);
+assert.lengthOf(pContainer.querySelectorAll('tr:last-child>td'), 5);
 ```
 
 The first `td` element of each table row from the string returned by `showLatestPosts` should contain two anchor elements, the first with the class of `post-title`, an `href` of `<forumTopicUrl><slug>/<id>`, an anchor text of `<title>`, and the second obtained by calling `forumCategory` with `category_id`.
@@ -556,74 +601,91 @@ The first `td` element of each table row from the string returned by `showLatest
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
-const anchors1 = pContainer.querySelectorAll("tr:first-child>td>a");
+const anchors1 = pContainer.querySelectorAll('tr:first-child>td>a');
 assert.lengthOf(anchors1, 2);
 
-const anchors2 = pContainer.querySelectorAll("tr:last-child>td>a");
+const anchors2 = pContainer.querySelectorAll('tr:last-child>td>a');
 assert.lengthOf(anchors2, 2);
 
-assert.equal(anchors1[0].classList[0], "post-title");
-assert.equal(anchors1[0].href, "https://forum.freecodecamp.org/t/the-freecodecamp-podcast-is-back-now-with-video/684569");
-assert.equal(anchors1[0].innerText.trim(), "The freeCodeCamp Podcast is back – now with video");
-
-assert.equal(anchors1[1].classList[0], "category");
-assert.equal(anchors1[1].classList[1], "general");
-assert.equal(anchors1[1].href, "https://forum.freecodecamp.org/c/general/1");
-
-
-assert.equal(anchors2[0].classList[0], "post-title");
-assert.equal(anchors2[0].href, "https://forum.freecodecamp.org/t/problem-with-making-changes-to-styles-js/686149");
-assert.equal(anchors2[0].innerText.trim(), "Problem with making changes to styles. (JS)");
-
-assert.equal(anchors2[1].classList[0], "category");
-assert.equal(anchors2[1].classList[1], "javascript");
-assert.equal(anchors2[1].href, "https://forum.freecodecamp.org/c/javascript/421");
+assert.equal(anchors1[0].classList[0], 'post-title');
+assert.equal(
+  anchors1[0].href,
+  'https://forum.freecodecamp.org/t/the-freecodecamp-podcast-is-back-now-with-video/684569'
+);
+assert.equal(
+  anchors1[0].innerText.trim(),
+  'The freeCodeCamp Podcast is back – now with video'
+);
+
+assert.equal(anchors1[1].classList[0], 'category');
+assert.equal(anchors1[1].classList[1], 'general');
+assert.equal(anchors1[1].href, 'https://forum.freecodecamp.org/c/general/1');
+
+assert.equal(anchors2[0].classList[0], 'post-title');
+assert.equal(
+  anchors2[0].href,
+  'https://forum.freecodecamp.org/t/problem-with-making-changes-to-styles-js/686149'
+);
+assert.equal(
+  anchors2[0].innerText.trim(),
+  'Problem with making changes to styles. (JS)'
+);
+
+assert.equal(anchors2[1].classList[0], 'category');
+assert.equal(anchors2[1].classList[1], 'javascript');
+assert.equal(
+  anchors2[1].href,
+  'https://forum.freecodecamp.org/c/javascript/421'
+);
 ```
 
 The second `td` element of each table row from the string returned by `showLatestPosts` should contain the images returned by the `avatars` function called with `posters` and `users` as arguments, nested within a `div` element with the class of `avatar-container`.
@@ -632,130 +694,154 @@ The second `td` element of each table row from the string returned by `showLates
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-const div1 = pContainer.querySelector("tr:first-child>td:nth-child(2)>div");
-assert.equal(div1.classList[0], "avatar-container");
+const div1 = pContainer.querySelector('tr:first-child>td:nth-child(2)>div');
+assert.equal(div1.classList[0], 'avatar-container');
 
-const div2 = pContainer.querySelector("tr:last-child>td:nth-child(2)>div");
-assert.equal(div2.classList[0], "avatar-container");
+const div2 = pContainer.querySelector('tr:last-child>td:nth-child(2)>div');
+assert.equal(div2.classList[0], 'avatar-container');
 
-const imgs1 = div1.querySelectorAll("img");
+const imgs1 = div1.querySelectorAll('img');
 assert.lengthOf(imgs1, 3);
-assert.equal(imgs1[0].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/30/212400_2.png");
-assert.equal(imgs1[0].alt, "Quincy Larson");
-assert.equal(imgs1[1].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png");
-assert.equal(imgs1[1].alt, "Ilenia");
-assert.equal(imgs1[2].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/30/179497_2.png");
-assert.equal(imgs1[2].alt, "Jessica Wilkins");
-
-const imgs2 = div2.querySelectorAll("img");
+assert.equal(
+  imgs1[0].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/quincylarson/30/212400_2.png'
+);
+assert.equal(imgs1[0].alt, 'Quincy Larson');
+assert.equal(
+  imgs1[1].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png'
+);
+assert.equal(imgs1[1].alt, 'Ilenia');
+assert.equal(
+  imgs1[2].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/30/179497_2.png'
+);
+assert.equal(imgs1[2].alt, 'Jessica Wilkins');
+
+const imgs2 = div2.querySelectorAll('img');
 assert.lengthOf(imgs2, 1);
-assert.equal(imgs2[0].src, "https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png");
-assert.equal(imgs2[0].alt, "Ilenia");
+assert.equal(
+  imgs2[0].src,
+  'https://sea1.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilenia/30/270648_2.png'
+);
+assert.equal(imgs2[0].alt, 'Ilenia');
 ```
 
-The third `td` element of each table row from the string returned by `showLatestPosts` should contain the number of replies to the post. *Hint:* use `posts_count - 1`.
+The third `td` element of each table row from the string returned by `showLatestPosts` should contain the number of replies to the post. _Hint:_ use `posts_count - 1`.
 
 ```js
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(3)").innerText, "7");
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(3)').innerText,
+  '7'
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(3)").innerText, "0");
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(3)').innerText,
+  '0'
+);
 ```
 
 The fourth `td` element of each table row from the string returned by `showLatestPosts` should contain the number of views of the post.
@@ -764,56 +850,65 @@ The fourth `td` element of each table row from the string returned by `showLates
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+};
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(4)").innerText, "542");
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(4)').innerText,
+  '542'
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(4)").innerText, "9");
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(4)').innerText,
+  '9'
+);
 ```
 
 The fifth `td` element of each table row from the string returned by `showLatestPosts` should contain time passed since the last activity, generated using the `timeAgo` function.
@@ -822,50 +917,53 @@ The fifth `td` element of each table row from the string returned by `showLatest
 const data = {
   users: [
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/quincylarson/{size}/212400_2.png',
       id: 6,
-      name: "Quincy Larson",
-      username: "QuincyLarson"
+      name: 'Quincy Larson',
+      username: 'QuincyLarson'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/jwilkins.oboe/{size}/179497_2.png',
       id: 285941,
-      name: "Jessica Wilkins",
-      username: "jwilkins.oboe"
+      name: 'Jessica Wilkins',
+      username: 'jwilkins.oboe'
     },
     {
-      avatar_template: "/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png",
+      avatar_template:
+        '/user_avatar/forum.freecodecamp.org/ilenia/{size}/270648_2.png',
       id: 170865,
-      name: "Ilenia",
-      username: "ilenia"
+      name: 'Ilenia',
+      username: 'ilenia'
     }
   ],
   topic_list: {
     topics: [
       {
-        bumped_at: "2024-04-15T16:01:26.403Z",
+        bumped_at: '2024-04-15T16:01:26.403Z',
         category_id: 1,
         id: 684569,
-        posters: [{user_id: 6}, {user_id: 170865}, {user_id: 285941}],
+        posters: [{ user_id: 6 }, { user_id: 170865 }, { user_id: 285941 }],
         posts_count: 8,
-        slug: "the-freecodecamp-podcast-is-back-now-with-video",
-        title: "The freeCodeCamp Podcast is back – now with video",
+        slug: 'the-freecodecamp-podcast-is-back-now-with-video',
+        title: 'The freeCodeCamp Podcast is back – now with video',
         views: 542
       },
       {
-        bumped_at: "2024-04-19T13:52:03.523Z",
+        bumped_at: '2024-04-19T13:52:03.523Z',
         category_id: 421,
         id: 686149,
-        posters: [{user_id: 170865}],
+        posters: [{ user_id: 170865 }],
         posts_count: 1,
-        slug: "problem-with-making-changes-to-styles-js",
-        title: "Problem with making changes to styles. (JS)",
+        slug: 'problem-with-making-changes-to-styles-js',
+        title: 'Problem with making changes to styles. (JS)',
         views: 9
       }
     ]
   }
-}
-const calcTime = (time) => {
+};
+const calcTime = time => {
   const currentTime = new Date();
   const lastPost = new Date(time);
   const timeDifference = currentTime - lastPost;
@@ -875,13 +973,19 @@ const calcTime = (time) => {
   const daysAgo = Math.floor(hoursAgo / 24);
   return `${daysAgo}d ago`;
 };
-const pContainer = document.getElementById("posts-container");
-pContainer.innerHTML = "";
+const pContainer = document.getElementById('posts-container');
+pContainer.innerHTML = '';
 showLatestPosts(data);
 
-assert.equal(pContainer.querySelector("tr:first-child>td:nth-child(5)").innerText, calcTime("2024-04-15T16:01:26.403Z"));
+assert.equal(
+  pContainer.querySelector('tr:first-child>td:nth-child(5)').innerText,
+  calcTime('2024-04-15T16:01:26.403Z')
+);
 
-assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText, calcTime("2024-04-19T13:52:03.523Z"));
+assert.equal(
+  pContainer.querySelector('tr:last-child>td:nth-child(5)').innerText,
+  calcTime('2024-04-19T13:52:03.523Z')
+);
 ```
 
 # --seed--
@@ -889,7 +993,7 @@ assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -932,184 +1036,185 @@ assert.equal(pContainer.querySelector("tr:last-child>td:nth-child(5)").innerText
 
 ```css
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  :root {
-    --main-bg-color: #2a2a40;
-    --black: #000;
-    --dark-navy: #0a0a23;
-    --dark-grey: #d0d0d5;
-    --medium-grey: #dfdfe2;
-    --light-grey: #f5f6f7;
-    --peach: #f28373;
-    --salmon-color: #f0aea9;
-    --light-blue: #8bd9f6;
-    --light-orange: #f8b172;
-    --light-green: #93cb5b;
-    --golden-yellow: #f1ba33;
-    --gold: #f9aa23;
-    --green: #6bca6b;
-  }
+:root {
+  --main-bg-color: #2a2a40;
+  --black: #000;
+  --dark-navy: #0a0a23;
+  --dark-grey: #d0d0d5;
+  --medium-grey: #dfdfe2;
+  --light-grey: #f5f6f7;
+  --peach: #f28373;
+  --salmon-color: #f0aea9;
+  --light-blue: #8bd9f6;
+  --light-orange: #f8b172;
+  --light-green: #93cb5b;
+  --golden-yellow: #f1ba33;
+  --gold: #f9aa23;
+  --green: #6bca6b;
+}
 
-  body {
-    background-color: var(--main-bg-color);
-  }
+body {
+  background-color: var(--main-bg-color);
+}
 
-  nav {
-    background-color: var(--dark-navy);
-    padding: 10px 0;
-  }
+nav {
+  background-color: var(--dark-navy);
+  padding: 10px 0;
+}
 
-  .fcc-logo {
-    width: 210px;
-    display: block;
-    margin: auto;
-  }
+.fcc-logo {
+  width: 210px;
+  display: block;
+  margin: auto;
+}
 
-  .title {
-    margin: 25px 0;
-    text-align: center;
-    color: var(--light-grey);
-  }
+.title {
+  margin: 25px 0;
+  text-align: center;
+  color: var(--light-grey);
+}
 
-  .table-wrapper {
-    padding: 0 25px;
-    overflow-x: auto;
-  }
+.table-wrapper {
+  padding: 0 25px;
+  overflow-x: auto;
+}
 
-  table {
-    width: 100%;
-    color: var(--dark-grey);
-    margin: auto;
-    table-layout: fixed;
-    border-collapse: collapse;
-    overflow-x: scroll;
-  }
+table {
+  width: 100%;
+  color: var(--dark-grey);
+  margin: auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  overflow-x: scroll;
+}
 
-  #topics {
-    text-align: start;
-    width: 60%;
-  }
+#topics {
+  text-align: start;
+  width: 60%;
+}
 
-  th {
-    border-bottom: 2px solid var(--dark-grey);
-    padding-bottom: 10px;
-    font-size: 1.3rem;
-  }
+th {
+  border-bottom: 2px solid var(--dark-grey);
+  padding-bottom: 10px;
+  font-size: 1.3rem;
+}
 
-  td:not(:first-child) {
-    text-align: center;
-  }
+td:not(:first-child) {
+  text-align: center;
+}
 
-  td {
-    border-bottom: 1px solid var(--dark-grey);
-    padding: 20px 0;
-  }
+td {
+  border-bottom: 1px solid var(--dark-grey);
+  padding: 20px 0;
+}
 
-  .post-title {
-    font-size: 1.2rem;
-    color: var(--medium-grey);
-    text-decoration: none;
-  }
+.post-title {
+  font-size: 1.2rem;
+  color: var(--medium-grey);
+  text-decoration: none;
+}
 
-  .category {
-    padding: 3px;
-    color: var(--black);
-    text-decoration: none;
-    display: block;
-    width: fit-content;
-    margin: 10px 0 10px;
-  }
+.category {
+  padding: 3px;
+  color: var(--black);
+  text-decoration: none;
+  display: block;
+  width: fit-content;
+  margin: 10px 0 10px;
+}
 
-  .career {
-    background-color: var(--salmon-color);
-  }
+.career {
+  background-color: var(--salmon-color);
+}
 
-  .feedback,
-  .html-css {
-    background-color: var(--light-blue);
-  }
+.feedback,
+.html-css {
+  background-color: var(--light-blue);
+}
 
-  .support {
-    background-color: var(--light-orange);
-  }
+.support {
+  background-color: var(--light-orange);
+}
 
-  .general {
-    background-color: var(--light-green);
-  }
+.general {
+  background-color: var(--light-green);
+}
 
-  .javascript {
-    background-color: var(--golden-yellow);
-  }
+.javascript {
+  background-color: var(--golden-yellow);
+}
 
-  .backend {
-    background-color: var(--gold);
-  }
+.backend {
+  background-color: var(--gold);
+}
 
-  .python {
-    background-color: var(--green);
-  }
+.python {
+  background-color: var(--green);
+}
 
-  .motivation {
-    background-color: var(--peach);
-  }
+.motivation {
+  background-color: var(--peach);
+}
 
-  .avatar-container {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
+.avatar-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-  .avatar-container img {
-    width: 30px;
-    height: 30px;
-  }
+.avatar-container img {
+  width: 30px;
+  height: 30px;
+}
 
-  @media (max-width: 750px) {
-    .table-wrapper {
-      padding: 0 15px;
-    }
+@media (max-width: 750px) {
+  .table-wrapper {
+    padding: 0 15px;
+  }
 
-    table {
-      width: 700px;
-    }
+  table {
+    width: 700px;
+  }
 
-    th {
-      font-size: 1.2rem;
-    }
+  th {
+    font-size: 1.2rem;
+  }
 
-    .post-title {
-      font-size: 1.1rem;
-    }
+  .post-title {
+    font-size: 1.1rem;
   }
+}
 ```
 
 ```js
-const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json";
-const forumTopicUrl = "https://forum.freecodecamp.org/t/";
-const forumCategoryUrl = "https://forum.freecodecamp.org/c/";
-const avatarUrl = "https://sea1.discourse-cdn.com/freecodecamp";
+const forumLatest =
+  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
+const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
+const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
+const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';
 
 const allCategories = {
-  299: { category: "Career Advice", className: "career" },
-  409: { category: "Project Feedback", className: "feedback" },
-  417: { category: "freeCodeCamp Support", className: "support" },
-  421: { category: "JavaScript", className: "javascript" },
-  423: { category: "HTML - CSS", className: "html-css" },
-  424: { category: "Python", className: "python" },
-  432: { category: "You Can Do This!", className: "motivation" },
-  560: { category: "Backend Development", className: "backend" },
+  299: { category: 'Career Advice', className: 'career' },
+  409: { category: 'Project Feedback', className: 'feedback' },
+  417: { category: 'freeCodeCamp Support', className: 'support' },
+  421: { category: 'JavaScript', className: 'javascript' },
+  423: { category: 'HTML - CSS', className: 'html-css' },
+  424: { category: 'Python', className: 'python' },
+  432: { category: 'You Can Do This!', className: 'motivation' },
+  560: { category: 'Backend Development', className: 'backend' }
 };
 ```
 
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1152,182 +1257,183 @@ const allCategories = {
 
 ```css
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  :root {
-    --main-bg-color: #2a2a40;
-    --black: #000;
-    --dark-navy: #0a0a23;
-    --dark-grey: #d0d0d5;
-    --medium-grey: #dfdfe2;
-    --light-grey: #f5f6f7;
-    --peach: #f28373;
-    --salmon-color: #f0aea9;
-    --light-blue: #8bd9f6;
-    --light-orange: #f8b172;
-    --light-green: #93cb5b;
-    --golden-yellow: #f1ba33;
-    --gold: #f9aa23;
-    --green: #6bca6b;
-  }
+:root {
+  --main-bg-color: #2a2a40;
+  --black: #000;
+  --dark-navy: #0a0a23;
+  --dark-grey: #d0d0d5;
+  --medium-grey: #dfdfe2;
+  --light-grey: #f5f6f7;
+  --peach: #f28373;
+  --salmon-color: #f0aea9;
+  --light-blue: #8bd9f6;
+  --light-orange: #f8b172;
+  --light-green: #93cb5b;
+  --golden-yellow: #f1ba33;
+  --gold: #f9aa23;
+  --green: #6bca6b;
+}
 
-  body {
-    background-color: var(--main-bg-color);
-  }
+body {
+  background-color: var(--main-bg-color);
+}
 
-  nav {
-    background-color: var(--dark-navy);
-    padding: 10px 0;
-  }
+nav {
+  background-color: var(--dark-navy);
+  padding: 10px 0;
+}
 
-  .fcc-logo {
-    width: 210px;
-    display: block;
-    margin: auto;
-  }
+.fcc-logo {
+  width: 210px;
+  display: block;
+  margin: auto;
+}
 
-  .title {
-    margin: 25px 0;
-    text-align: center;
-    color: var(--light-grey);
-  }
+.title {
+  margin: 25px 0;
+  text-align: center;
+  color: var(--light-grey);
+}
 
-  .table-wrapper {
-    padding: 0 25px;
-    overflow-x: auto;
-  }
+.table-wrapper {
+  padding: 0 25px;
+  overflow-x: auto;
+}
 
-  table {
-    width: 100%;
-    color: var(--dark-grey);
-    margin: auto;
-    table-layout: fixed;
-    border-collapse: collapse;
-    overflow-x: scroll;
-  }
+table {
+  width: 100%;
+  color: var(--dark-grey);
+  margin: auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  overflow-x: scroll;
+}
 
-  #topics {
-    text-align: start;
-    width: 60%;
-  }
+#topics {
+  text-align: start;
+  width: 60%;
+}
 
-  th {
-    border-bottom: 2px solid var(--dark-grey);
-    padding-bottom: 10px;
-    font-size: 1.3rem;
-  }
+th {
+  border-bottom: 2px solid var(--dark-grey);
+  padding-bottom: 10px;
+  font-size: 1.3rem;
+}
 
-  td:not(:first-child) {
-    text-align: center;
-  }
+td:not(:first-child) {
+  text-align: center;
+}
 
-  td {
-    border-bottom: 1px solid var(--dark-grey);
-    padding: 20px 0;
-  }
+td {
+  border-bottom: 1px solid var(--dark-grey);
+  padding: 20px 0;
+}
 
-  .post-title {
-    font-size: 1.2rem;
-    color: var(--medium-grey);
-    text-decoration: none;
-  }
+.post-title {
+  font-size: 1.2rem;
+  color: var(--medium-grey);
+  text-decoration: none;
+}
 
-  .category {
-    padding: 3px;
-    color: var(--black);
-    text-decoration: none;
-    display: block;
-    width: fit-content;
-    margin: 10px 0 10px;
-  }
+.category {
+  padding: 3px;
+  color: var(--black);
+  text-decoration: none;
+  display: block;
+  width: fit-content;
+  margin: 10px 0 10px;
+}
 
-  .career {
-    background-color: var(--salmon-color);
-  }
+.career {
+  background-color: var(--salmon-color);
+}
 
-  .feedback,
-  .html-css {
-    background-color: var(--light-blue);
-  }
+.feedback,
+.html-css {
+  background-color: var(--light-blue);
+}
 
-  .support {
-    background-color: var(--light-orange);
-  }
+.support {
+  background-color: var(--light-orange);
+}
 
-  .general {
-    background-color: var(--light-green);
-  }
+.general {
+  background-color: var(--light-green);
+}
 
-  .javascript {
-    background-color: var(--golden-yellow);
-  }
+.javascript {
+  background-color: var(--golden-yellow);
+}
 
-  .backend {
-    background-color: var(--gold);
-  }
+.backend {
+  background-color: var(--gold);
+}
 
-  .python {
-    background-color: var(--green);
-  }
+.python {
+  background-color: var(--green);
+}
 
-  .motivation {
-    background-color: var(--peach);
-  }
+.motivation {
+  background-color: var(--peach);
+}
 
-  .avatar-container {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
+.avatar-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-  .avatar-container img {
-    width: 30px;
-    height: 30px;
-  }
+.avatar-container img {
+  width: 30px;
+  height: 30px;
+}
 
-  @media (max-width: 750px) {
-    .table-wrapper {
-      padding: 0 15px;
-    }
+@media (max-width: 750px) {
+  .table-wrapper {
+    padding: 0 15px;
+  }
 
-    table {
-      width: 700px;
-    }
+  table {
+    width: 700px;
+  }
 
-    th {
-      font-size: 1.2rem;
-    }
+  th {
+    font-size: 1.2rem;
+  }
 
-    .post-title {
-      font-size: 1.1rem;
-    }
+  .post-title {
+    font-size: 1.1rem;
   }
+}
 ```
 
 ```js
-const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json";
-const forumTopicUrl = "https://forum.freecodecamp.org/t/";
-const forumCategoryUrl = "https://forum.freecodecamp.org/c/";
-const avatarUrl = "https://sea1.discourse-cdn.com/freecodecamp";
+const forumLatest =
+  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
+const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
+const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
+const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';
 
-const postsContainer = document.getElementById("posts-container");
+const postsContainer = document.getElementById('posts-container');
 
 const allCategories = {
-  299: { category: "Career Advice", className: "career" },
-  409: { category: "Project Feedback", className: "feedback" },
-  417: { category: "freeCodeCamp Support", className: "support" },
-  421: { category: "JavaScript", className: "javascript" },
-  423: { category: "HTML - CSS", className: "html-css" },
-  424: { category: "Python", className: "python" },
-  432: { category: "You Can Do This!", className: "motivation" },
-  560: { category: "Backend Development", className: "backend" },
+  299: { category: 'Career Advice', className: 'career' },
+  409: { category: 'Project Feedback', className: 'feedback' },
+  417: { category: 'freeCodeCamp Support', className: 'support' },
+  421: { category: 'JavaScript', className: 'javascript' },
+  423: { category: 'HTML - CSS', className: 'html-css' },
+  424: { category: 'Python', className: 'python' },
+  432: { category: 'You Can Do This!', className: 'motivation' },
+  560: { category: 'Backend Development', className: 'backend' }
 };
 
-const forumCategory = (id) => {
+const forumCategory = id => {
   let selectedCategory = {};
 
   if (allCategories.hasOwnProperty(id)) {
@@ -1336,8 +1442,8 @@ const forumCategory = (id) => {
     selectedCategory.className = className;
     selectedCategory.category = category;
   } else {
-    selectedCategory.className = "general";
-    selectedCategory.category = "General";
+    selectedCategory.className = 'general';
+    selectedCategory.category = 'General';
     selectedCategory.id = 1;
   }
   const url = `${forumCategoryUrl}${selectedCategory.className}/${id}`;
@@ -1349,7 +1455,7 @@ const forumCategory = (id) => {
   </a>`;
 };
 
-const timeAgo = (time) => {
+const timeAgo = time => {
   const currentTime = new Date();
   const lastPost = new Date(time);
 
@@ -1371,7 +1477,7 @@ const timeAgo = (time) => {
   return `${daysAgo}d ago`;
 };
 
-const viewCount = (views) => {
+const viewCount = views => {
   const thousands = Math.floor(views / 1000);
 
   if (views >= 1000) {
@@ -1383,17 +1489,17 @@ const viewCount = (views) => {
 
 const avatars = (posters, users) => {
   return posters
-    .map((poster) => {
-      const user = users.find((user) => user.id === poster.user_id);
+    .map(poster => {
+      const user = users.find(user => user.id === poster.user_id);
       if (user) {
         const avatar = user.avatar_template.replace(/{size}/, 30);
-        const userAvatarUrl = avatar.startsWith("/user_avatar/")
+        const userAvatarUrl = avatar.startsWith('/user_avatar/')
           ? avatarUrl.concat(avatar)
           : avatar;
         return `<img src="${userAvatarUrl}" alt="${user.name}" />`;
       }
     })
-    .join("");
+    .join('');
 };
 
 const fetchData = async () => {
@@ -1408,23 +1514,24 @@ const fetchData = async () => {
 
 fetchData();
 
-const showLatestPosts = (data) => {
+const showLatestPosts = data => {
   const { topic_list, users } = data;
   const { topics } = topic_list;
 
-  postsContainer.innerHTML = topics.map((item) => {
-    const {
-      id,
-      title,
-      views,
-      posts_count,
-      slug,
-      posters,
-      category_id,
-      bumped_at,
-    } = item;
-
-    return `
+  postsContainer.innerHTML = topics
+    .map(item => {
+      const {
+        id,
+        title,
+        views,
+        posts_count,
+        slug,
+        posters,
+        category_id,
+        bumped_at
+      } = item;
+
+      return `
     <tr>
       <td>
        <a class="post-title" target="_blank" href="${forumTopicUrl}${slug}/${id}">
@@ -1441,6 +1548,7 @@ const showLatestPosts = (data) => {
       <td>${viewCount(views)}</td>
       <td>${timeAgo(bumped_at)}</td>
     </tr>`;
-  }).join("");
+    })
+    .join('');
 };
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md b/curriculum/challenges/chinese/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
index 6013ffbcf4..c5a251d2cd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-football-team-cards/66e7ee20b79186306fc12da5.md
@@ -1,7 +1,7 @@
 ---
 id: 66e7ee20b79186306fc12da5
 title: Build a Set of Football Team Cards
-challengeType: 14
+challengeType: 25
 dashedName: lab-football-team-cards
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md b/curriculum/challenges/chinese/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
index 7dfe21ca25..37bfa219f7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
@@ -1,7 +1,7 @@
 ---
 id: 66c06d618d075c7f7f1b890a
 title: Build a Fortune Teller
-challengeType: 14
+challengeType: 25
 dashedName: build-a-fortune-teller
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md b/curriculum/challenges/chinese/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
index 1f17efe241..30aacb1806 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-gradebook-app/66bb6a9c2dd58b73cd759034.md
@@ -1,7 +1,7 @@
 ---
 id: 66bb6a9c2dd58b73cd759034
 title: Build a Gradebook App
-challengeType: 14
+challengeType: 25
 dashedName: build-a-gradebook-app
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md b/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
index c592e544fc..91ee73d9dd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-house-painting/66d6a7a3e1aa411e94bf2346.md
@@ -1,7 +1,7 @@
 ---
 id: 66d6a7a3e1aa411e94bf2346
 title: Build a House Painting
-challengeType: 14
+challengeType: 25
 dashedName: build-a-house-painting
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md b/curriculum/challenges/chinese/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
index f5bb2cc353..5c713ce665 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-inventory-management-program/66d75dd0aa65a71600dc669b.md
@@ -1,7 +1,7 @@
 ---
 id: 66d75dd0aa65a71600dc669b
 title: Build an Inventory Management Program
-challengeType: 14
+challengeType: 25
 dashedName: build-an-inventory-management-program
 ---
 
@@ -23,6 +23,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. If the quantity after the subtraction is zero, `removeProduct` should remove the product object from the inventory. If the quantity in the inventory is not enough to perform the subtraction, the `removeProduct` function should log the string `Not enough <product-name> available, remaining pieces: <product-quantity>` to the console.
 1. If the product to remove is not present in the inventory, the `removeProduct` function should log `<product-name> not found` to the console.
 
+**Note:** To prevent conflicts, keep only the logging mentioned in the user stories when running tests.
+
 # --hints--
 
 You should declare an empty array named `inventory`.
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md b/curriculum/challenges/chinese/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
index 363b6f8e50..ba0c379653 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-javascript-trivia-bot/66ed41f912d0bb1dc62da5dd.md
@@ -1,7 +1,7 @@
 ---
 id: 66ed41f912d0bb1dc62da5dd
 title: Build a JavaScript Trivia Bot
-challengeType: 14
+challengeType: 25
 dashedName: lab-javascript-trivia-bot
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md b/curriculum/challenges/chinese/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
index fff2926e3c..69f1c54ff8 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-job-application-form/66faac4139dbbd5dd632c860.md
@@ -1,7 +1,7 @@
 ---
 id: 66faac4139dbbd5dd632c860
 title: Build a Job Application Form
-challengeType: 14
+challengeType: 25
 dashedName: lab-job-application-form
 demoType: onClick
 ---
@@ -128,7 +128,8 @@ You should use the `:checked` pseudo-class on radio buttons to change the text c
 const els = document.querySelectorAll('input[type="radio"]');
 assert.isNotEmpty(els);
 els.forEach(input => {
-  const label = document.querySelector(`label[for="${input.id}"]`);
+  const label = document.querySelector(`label[for="${input.id}"]`) || input.parentElement;
+  assert.equal(label.tagName, "LABEL");
   input.checked = false;
   const colorBefore = getComputedStyle(label).color;
   input.checked = true;
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/chinese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
index bc39593b84..17e32ffc64 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
@@ -1,7 +1,7 @@
 ---
 id: 66c06fad3475cd92421b9ac2
 title: Build a Leap Year Calculator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-leap-year-calculator
 ---
 
@@ -19,8 +19,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 4. To check if the year is a leap year, fulfill the following conditions:
 
    - If the year is divisible by `4`, then it is a leap year.
-   - If the year is divisible by `100`, then it is not a leap year.
-   - If the year is divisible by `400`, then it is a leap year.
+   - Unless the year is also divisible by `100`, then it is not a leap year.
+   - Unless the year is also divisible by `400`, then it is a leap year.
 
 5. If the year is a leap year, return `[year] is a leap year.`. Otherwise, return `[year] is not a leap year.`. You will replace `[year]` with the parameter defined in the `isLeapYear` function.
 6. You should call the `isLeapYear` function with `year` as the argument and assign the result to a variable named `result`.
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/chinese/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
index fa46de9f35..203da069b5 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
@@ -1,7 +1,7 @@
 ---
 id: 66db57ad34c7089b9b41bfd6
 title: Build a Lightbox Viewer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-lightbox-viewer
 demoType: onClick
 ---
@@ -27,8 +27,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. Your `.lightbox` element should have a fixed position so that the preview opens on top of the current images.
 1. Your `.lightbox` element should cover the entire viewport by setting the height and width to 100% of the container. You should ensure that the lightbox element starts at the top left corner of the container.
 1. `.lightbox` should have a background color. Initially, its `display` property should be set to `none` to hide it.
-1. When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
-1. When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute. The full-size images are located at the following links:
+1. When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
+1. When you click one of your `.gallery-item` elements, the `#lightbox-image` element's `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image's `src` attribute. The full-size images are located at the following links:
 
     - `https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg`
     - `https://cdn.freecodecamp.org/curriculum/labs/storm.jpg`
@@ -151,7 +151,7 @@ Your `.lightbox` element should be hidden initially.
 assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.display, 'none');
 ```
 
-When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
+When you click one of your `.gallery-item` elements, the `.lightbox` element's `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
 
 ```js
 // Get the lightbox element
@@ -178,7 +178,7 @@ galleryItem.dispatchEvent(new Event('click'));
 assert.strictEqual(getComputedDisplay(lightbox), 'flex');
 ```
 
-When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute.
+When you click one of your `.gallery-item` elements, the `#lightbox-image` element's `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image's `src` attribute.
 
 ```js
 // Select gallery items and lightbox image element
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md b/curriculum/challenges/chinese/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
index ea15678e5c..29e6149faf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-lunch-picker-program/66db529d37ad966480ebb633.md
@@ -1,7 +1,7 @@
 ---
 id: 66db529d37ad966480ebb633
 title: Build a Lunch Picker Program
-challengeType: 14
+challengeType: 25
 dashedName: build-a-lunch-picker-program
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md b/curriculum/challenges/chinese/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
new file mode 100644
index 0000000000..76e6b39645
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-magazine-layout/6735a7370e0ae93a4577c689.md
@@ -0,0 +1,263 @@
+---
+id: 6735a7370e0ae93a4577c689
+title: Design a Magazine Layout
+challengeType: 25
+dashedName: design-a-magazine-layout
+demoType: onClick
+---
+
+# --description--
+
+In this lab, you will design a magazine layout using CSS Grid, including concepts like grid rows and grid columns.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a `main` element with the class `magazine-cover`.
+
+2. Your `.magazine-cover` should contain a `header` element for the title with the class `title`.
+
+3. You should have four `section` elements in your page. The first three sections for magazine articles and a fourth `section` element for a cover image.
+
+4. The four `section` elements should have a `class` attribute of `feature-article`, `small-article1`, `small-article2`, and `cover-image`, respectively.
+
+5. You should set the `display` property of `.magazine-cover` to `grid.`
+
+6. The `.magazine-cover` should have a `grid-template-areas` property that defines the layout of the grid:
+
+   - The title spanning the top row.
+   - A feature article spanning two columns and a cover image in the second row.
+   - Two small articles and the cover image in the third row.
+
+7. The `.magazine-cover` should have a `grid-template-columns` property that divides the space into three equal parts.
+
+8. The `.magazine-cover` should have a `grid-template-rows` property. It should be set to `auto` for the first row, and divide equally the space occupied by the remaining two rows.
+
+9. You should add a gap between grid items and set the width of the `.magazine-cover` to occupy most of the viewport width.
+
+**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
+
+# --hints--
+
+You should have a `main` element.
+
+```js
+assert.exists(document.querySelector('main'));
+```
+
+Your `main` element should have a `class` of `magazine-cover`.
+
+```js
+assert.exists(document.querySelector('main.magazine-cover'));
+```
+
+You should have a `header` element within your `main` element.
+
+```js
+assert.exists(document.querySelector("main > header"));
+```
+
+Your `header` element should have a `class` of `title` and should contain some text.
+
+```js
+const header = document.querySelector("header.title");
+assert.exists(header);
+assert.isAbove(header.innerText.length, 0);
+```
+
+You should have a `section` element for each article and the cover image, with classes `feature-article`, `small-article1`, `small-article2`, and `cover-image` respectively.
+
+```js
+const featureArticle = document.querySelector('section.feature-article');
+const smallArticle1 = document.querySelector('section.small-article1');
+const smallArticle2 = document.querySelector('section.small-article2');
+const coverImage = document.querySelector('section.cover-image');
+
+assert.exists(featureArticle);
+assert.exists(smallArticle1);
+assert.exists(smallArticle2);
+assert.exists(coverImage);
+```
+
+The `display` property of the `.magazine-cover` should be set to `grid`.
+
+```js
+assert.equal(getComputedStyle(document.querySelector('.magazine-cover')).display, 'grid');
+```
+
+Your `.magazine-cover` should have a `grid-template-areas` property with `title` spanning all three columns of the first row.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /^("|')title title title\1/);
+```
+
+The second row of the grid template should contain a `feature article` spanning two columns and a `cover image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /.("|')feature-article feature-article cover-image\1./);
+```
+
+The third row of the grid template should contain `small-article1`, `small-article2`, and `cover-image`.
+
+```js
+const magazineCoverStyle = getComputedStyle(document.querySelector('.magazine-cover'));
+assert.match(magazineCoverStyle.gridTemplateAreas, /("|')small-article1 small-article2 cover-image\1$/);
+```
+
+Your `.magazine-cover` class should have a `grid-template-columns` property set to `1fr 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateColumns, '1fr 1fr 1fr');
+```
+
+Your `.magazine-cover` class should have a `grid-template-rows` property set to `auto 1fr 1fr`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gridTemplateRows, 'auto 1fr 1fr');
+```
+
+You should add a gap of `10px` between grid items.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.magazine-cover')?.gap, '10px');
+```
+
+The `.title` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.title')?.gridArea, 'title');
+```
+
+The `.feature-article` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.feature-article')?.gridArea, 'feature-article');
+```
+
+The `.cover-image` class should have a grid area of the same name.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.cover-image')?.gridArea, 'cover-image');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<meta charset="utf-8">
+<title>Magazine Layout</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
+```
+
+```css
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Adventure Magazine</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main class="magazine-cover">
+      <header class="title">
+          <h1>Adventure Awaits</h1>
+      </header>
+      <section class="feature-article">
+          <h2>Top 10 Exotic Destinations for 2024</h2>
+          <p>Discover the most breathtaking places to visit this year, from hidden beaches to mountain retreats. Our guide takes you through the best spots for your next adventure.</p>
+      </section>
+      <section class="small-article1">
+          <h3>Gear Up: Must-Have Gadgets</h3>
+          <p>Check out the latest tech and gear to make your travels more exciting and comfortable.</p>
+      </section>
+      <section class="small-article2">
+          <h3>Meet the Explorers</h3>
+          <p>Get to know the modern adventurers who are pushing the boundaries of exploration.</p>
+      </section>
+      <section class="cover-image">
+          <img src="https://cdn.freecodecamp.org/curriculum/labs/magazine-cover.png" alt="Adventure Cover Image">
+      </section>
+  </main>
+</body>
+</html>
+```
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+.magazine-cover {
+  display: grid;
+  grid-template-areas: 
+      "title title title"
+      "feature-article feature-article cover-image"
+      "small-article1 small-article2 cover-image";
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr;
+  gap: 10px;
+  width: 80%;
+  background-color: #fff;
+}
+
+.title {
+  grid-area: title;
+  background-color: #1B1B32;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+.feature-article {
+  grid-area: feature-article;
+  background-color: #f9f9f9;
+  padding: 10px;
+}
+
+.small-article1, .small-article2 {
+  background-color: #e9e9e9;
+  padding: 10px;
+}
+
+.cover-image {
+  grid-area: cover-image;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ddd;
+  padding: 10px;
+}
+
+.cover-image img {
+  max-width: 100%;
+  height: auto;
+} 
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md b/curriculum/challenges/chinese/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
index bf975090bd..b877f975f7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md
@@ -1,7 +1,7 @@
 ---
 id: 66f55eac933ff64ce654ca74
 title: Build a Markdown to HTML Converter
-challengeType: 14
+challengeType: 25
 dashedName: build-a-markdown-to-html-converter
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md b/curriculum/challenges/chinese/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md
index 3a892ab0e3..9db0fcc7f9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-mood-board/673b3d6b7ef7318eef926d5a.md
@@ -1,7 +1,7 @@
 ---
 id: 673b3d6b7ef7318eef926d5a
 title: Build a Mood Board
-challengeType: 14
+challengeType: 25
 dashedName: build-a-mood-board
 demoType: onClick
 ---
@@ -36,20 +36,23 @@ You can use the following images in your Mood Board if you would like:
 - `https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg`
 - `https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg`
 
-
 # --hints--
 
 You should export a `MoodBoardItem` component.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoardItem));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoardItem)
+);
 assert.lengthOf(mockedComponent.find('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));
+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'));
 ```
@@ -57,16 +60,23 @@ assert.isTrue(mockedComponent.childAt(0).hasClass('mood-board-item'));
 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');
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoardItem)
+);
+mockedComponent.setProps({ color: 'colorValue' });
+assert.equal(
+  mockedComponent.find('.mood-board-item').prop('style').backgroundColor,
+  'colorValue'
+);
 ```
 
 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 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');
@@ -75,8 +85,10 @@ assert.equal(img.prop('src'), 'imageValue');
 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 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');
@@ -85,21 +97,27 @@ assert.equal(h3.text(), 'descriptionValue');
 You should export a `MoodBoard` component.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.lengthOf(mockedComponent.find('MoodBoard'), 1);
 ```
 
 Your `MoodBoard` component should return a `div` as its top-level element.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.equal(mockedComponent.childAt(0).type(), '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 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');
@@ -108,9 +126,11 @@ assert.equal(h1.text(), '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 mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 const mbItems = mockedComponent.find(window.index.MoodBoardItem);
-assert.isAtLeast(mbItems.length, 3)
+assert.isAtLeast(mbItems.length, 3);
 const propsList = mbItems.map(item => item.props());
 propsList.forEach(({ color, image, description }) => {
   assert.isAtLeast(color.length, 1);
@@ -122,7 +142,9 @@ propsList.forEach(({ color, image, description }) => {
 Your `MoodBoard` component should be rendered to the page's `#root` element.
 
 ```js
-const mockedComponent = Enzyme.mount(React.createElement(window.index.MoodBoard));
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.MoodBoard)
+);
 assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ```
 
@@ -131,85 +153,83 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Mood Board</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { MoodBoard } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <MoodBoard />
-        );
+      import { MoodBoard } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <MoodBoard />
+      );
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 body {
-    background-color: #ffffcc;
+  background-color: #ffffcc;
 }
 
 .mood-board-heading {
-    text-align: center;
-    font-size: 2.5em;
-    color: #333;
-    margin-top: 20px;
+  text-align: center;
+  font-size: 2.5em;
+  color: #333;
+  margin-top: 20px;
 }
 
 .mood-board {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    padding: 20px;
-    max-width: 900px;
-    margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .mood-board-item {
-    border-radius: 10px;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    height: 250px;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  height: 250px;
 }
 
 .mood-board-image {
-    border-radius: 5px;
-    width: 180px;
-    height:150px;
-    object-fit: cover;
+  border-radius: 5px;
+  width: 180px;
+  height: 150px;
+  object-fit: cover;
 }
 
 .mood-board-text {
-    margin-top: 20px;
-    font-size: 1.2em;
+  margin-top: 20px;
+  font-size: 1.2em;
 }
 ```
 
@@ -220,94 +240,92 @@ body {
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Mood Board</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { MoodBoard } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <MoodBoard />
-        );
+      import { MoodBoard } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <MoodBoard />
+      );
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 body {
-    background-color: #ffffcc;
+  background-color: #ffffcc;
 }
 
 .mood-board-heading {
-    text-align: center;
-    font-size: 2.5em;
-    color: #333;
-    margin-top: 20px;
+  text-align: center;
+  font-size: 2.5em;
+  color: #333;
+  margin-top: 20px;
 }
 
 .mood-board {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    padding: 20px;
-    max-width: 900px;
-    margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .mood-board-item {
-    border-radius: 10px;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    height: 250px;
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  height: 250px;
 }
 
 .mood-board-image {
-    border-radius: 5px;
-    width: 180px;
-    height:150px;
-    object-fit: cover;
+  border-radius: 5px;
+  width: 180px;
+  height: 150px;
+  object-fit: cover;
 }
 
 .mood-board-text {
-    margin-top: 20px;
-    font-size: 1.2em;
+  margin-top: 20px;
+  font-size: 1.2em;
 }
 ```
 
 ```jsx
 export function MoodBoardItem(props) {
   return (
-    <div className="mood-board-item" style={{ backgroundColor: props.color }}>
-      <img src={props.image} alt="Mood" className="mood-board-image" />
-      <h3 className="mood-board-text">{props.description}</h3>
+    <div className='mood-board-item' style={{ backgroundColor: props.color }}>
+      <img src={props.image} alt='Mood' className='mood-board-image' />
+      <h3 className='mood-board-text'>{props.description}</h3>
     </div>
   );
 }
@@ -315,37 +333,37 @@ export function MoodBoardItem(props) {
 export function MoodBoard() {
   return (
     <div>
-      <h1 className="mood-board-heading">Destination Mood Board</h1>
-      <div className="mood-board">
+      <h1 className='mood-board-heading'>Destination Mood Board</h1>
+      <div className='mood-board'>
         <MoodBoardItem
-          color="#2da64f"
-          image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg"
-          description="Carribean"
+          color='#2da64f'
+          image='https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg'
+          description='Carribean'
         />
         <MoodBoardItem
-          color="#8e44ad"
-          image="https://cdn.freecodecamp.org/curriculum/labs/shore.jpg"
-          description="Gawadar Beach"
+          color='#8e44ad'
+          image='https://cdn.freecodecamp.org/curriculum/labs/shore.jpg'
+          description='Gawadar Beach'
         />
         <MoodBoardItem
-          color="#3498db"
-          image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg"
-          description="Cape Town"
+          color='#3498db'
+          image='https://cdn.freecodecamp.org/curriculum/labs/grass.jpg'
+          description='Cape Town'
         />
         <MoodBoardItem
-          color="#bf3d7e"
-          image="https://cdn.freecodecamp.org/curriculum/labs/ship.jpg"
-          description="Suez Canal"
+          color='#bf3d7e'
+          image='https://cdn.freecodecamp.org/curriculum/labs/ship.jpg'
+          description='Suez Canal'
         />
         <MoodBoardItem
-          color="#e74c3c"
-          image="https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg"
-          description="Santorini"
+          color='#e74c3c'
+          image='https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg'
+          description='Santorini'
         />
         <MoodBoardItem
-          color="#95a5a6"
-          image="https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg"
-          description="Istanbul"
+          color='#95a5a6'
+          image='https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg'
+          description='Istanbul'
         />
       </div>
     </div>
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
index e8177d70b3..a8fcb34ee3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
@@ -1,7 +1,7 @@
 ---
 id: 66a37f37ef5823a313de8c26
 title: Build a Moon Orbit
-challengeType: 14
+challengeType: 25
 dashedName: build-a-moon-orbit
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md b/curriculum/challenges/chinese/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
index 606cfcecf9..d66b5047cd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-newspaper-article/66ba762af611169359d9d369.md
@@ -1,7 +1,7 @@
 ---
 id: 66ba762af611169359d9d369
 title: Build a Newspaper Article
-challengeType: 14
+challengeType: 25
 dashedName: build-a-newspaper-article
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md b/curriculum/challenges/chinese/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
index 8ddd5cb53b..6d8ae6b194 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
@@ -1,7 +1,7 @@
 ---
 id: 66be24cb4144f955b6bcc550
 title: Build a Page of Playing Cards
-challengeType: 14
+challengeType: 25
 dashedName: build-a-page-of-playing-cards
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md b/curriculum/challenges/chinese/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md
index e24737784f..c5f4ae4d7c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-palindrome-checker/657bdc55a322aae1eac3838f.md
@@ -1,7 +1,7 @@
 ---
 id: 657bdc55a322aae1eac3838f
 title: 创建一个回文检测器
-challengeType: 14
+challengeType: 25
 dashedName: build-a-palindrome-checker
 demoType: onClick
 ---
@@ -25,12 +25,12 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 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. 当 `#text-input` 元素包含文本 `A man, a plan, a canal Panama`，并且 `#check-btn` 元素被点击， `#result` 元素应该包含文本 `"A man, a plan, a canal. Panama is 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. 当 `#text-input` 元素包含文本 `1 eye for of 1 eye.`，并点击 `#check-btn` 元素时，`#result` 元素应该包含文本 `"1 eye for of 1 eye." is not 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"`.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md b/curriculum/challenges/chinese/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
new file mode 100644
index 0000000000..99d14778b0
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-password-generator/66f53dc2c5bd6a11d6c3282f.md
@@ -0,0 +1,116 @@
+---
+id: 66f53dc2c5bd6a11d6c3282f
+title: Build a Password Generator App
+challengeType: 25
+dashedName: lab-password-generator
+---
+
+# --description--
+
+In this lab, you'll practice using functions by building a random password generator.
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should create a function called `generatePassword` that takes a parameter, indicating the length of generated password. You can name the parameter whatever you like.
+2. Your function should return a string which represents a randomly generated password. You should use the following string and different `Math` methods to help you return a new string with random characters in it: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()`.
+3. You should define a variable called `password` and assign it the result of calling the `generatePassword` function with a numeric argument that represents the desired password length.
+4. You should have a `console.log` that logs the message `"Generated password:"` followed by the `password` variable.
+
+# --hints--
+
+You should have a `generatePassword` function with a parameter. You can name the parameter whatever you like.
+
+```js
+assert.isFunction(generatePassword);
+assert.lengthOf(generatePassword, 1);
+```
+
+Your `generatePassword` function should return a string.
+
+```js
+const result = generatePassword(5);
+assert.isString(result);
+```
+
+Your `generatePassword` function should return a new string that is the correct length.
+
+```js
+const length = 8;
+const password = generatePassword(length);
+assert.lengthOf(password, length);
+```
+
+Your function should return a randomly generated password with valid characters.
+
+```js
+const validChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+const password = generatePassword(10);
+for (let char of password) {
+    assert.include(validChars, char);
+}
+```
+
+Your function should return a new random string each time it is called.
+
+```js
+const password1 = generatePassword(10);
+const password2 = generatePassword(10);
+assert.notStrictEqual(password1, password2);
+```
+
+You should have a `password` variable.
+
+```js
+assert.isDefined(password);
+```
+
+Your `password` variable should be a string.
+
+```js
+assert.isString(password);
+```
+
+You should call the `generatePassword` function with a numeric argument and store the returned password in the `password` variable.
+
+```js
+assert.isDefined(password);
+assert.isString(password);
+const testLength = password.length;
+assert.strictEqual(password.length, testLength);
+assert.match(password, /^[A-Za-z0-9!@#$%^&*()]+$/);
+```
+
+You should log the generated password to the console.
+
+```js
+const condition1 = /console\.log\(\s*["']Generated\s+password:\s*["']\s*\+\s*password\s*\);?/gm.test(code);
+const condition2 = /console\.log\(\s*`Generated\s+password:\s*\$\{password\}`\s*\);?/gm.test(code);
+assert.isTrue(condition1 || condition2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+const generatePassword = (length) => {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+    let password = "";
+    for (let i = 0; i < length; i++) {
+        const randomIndex = Math.floor(Math.random() * chars.length);
+        password += chars[randomIndex];
+    }
+    return password;
+};
+
+const password = generatePassword(12);
+console.log(`Generated password: ${password}`);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md b/curriculum/challenges/chinese/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
index 6b563b0a9e..c9e1b257c2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-permutation-generator/66fe4f33a2cc9b33f4d5cd9b.md
@@ -1,7 +1,7 @@
 ---
 id: 66fe4f33a2cc9b33f4d5cd9b
 title: Build a Permutation Generator
-challengeType: 14
+challengeType: 25
 dashedName: build-a-permutation-generator
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md b/curriculum/challenges/chinese/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
index 189a71156c..03f2f4e455 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-personal-portfolio/bd7158d8c242eddfaeb5bd13.md
@@ -1,7 +1,7 @@
 ---
 id: bd7158d8c242eddfaeb5bd13
 title: Build a Personal Portfolio
-challengeType: 14
+challengeType: 25
 dashedName: build-a-personal-portfolio
 demoType: onClick
 ---
@@ -31,8 +31,8 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。
 
 ```js
-const el = document.getElementById('welcome-section')
-assert(!!el);
+const el = document.getElementById('welcome-section');
+assert.isNotNull(el);
 ```
 
 你的 `#welcome-section` 元素应该包含一个 `h1` 元素。
@@ -51,16 +51,15 @@ assert.isAbove(
 assert.isAbove(
   document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
   0,
-  'h1 element in welcome section should contain your name or camper ' +
-    'name '
+  'h1 element in welcome section should contain your name or camper ' + 'name '
 );
 ```
 
 You should have a "Projects" section with an `id` of `project-section`.
 
 ```js
-const el = document.getElementById('project-section')
-assert(!!el);
+const el = document.getElementById('project-section');
+assert.isNotNull(el);
 ```
 
 你的作品集应该包含至少一个 class 为 `project-tile` 的元素。
@@ -82,35 +81,33 @@ assert.isAbove(document.querySelectorAll('#project-section a').length, 0);
 
 ```js
 const el = document.getElementById('navbar');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 你的 `#navbar` 元素应该包含至少一个 `a` 元素，它的 `href` 属性以 `#` 开头。
 
 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+  nav => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );
 
-assert.isAbove(
-  links.length,
-  0,
-  'Navbar should contain an anchor link '
-);
+assert.isAbove(links.length, 0, 'Navbar should contain an anchor link ');
 ```
 
 你的作品集应该有一个 `id` 为 `profile-link` 的 `a` 元素。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.tagName === 'A')
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#profile-link` 元素应该有一个值为 `_blank` 的 `target` 属性。
 
 ```js
 const el = document.getElementById('profile-link');
-assert(!!el && el.target === '_blank')
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的作品集应该至少有一个媒体查询。
@@ -118,14 +115,15 @@ assert(!!el && el.target === '_blank')
 ```js
 const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
 const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 你的 `#navbar` 元素应该始终位于视口的顶部。
 
 ```js
 (async () => {
-  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+  const timeout = milliseconds =>
+    new Promise(resolve => setTimeout(resolve, milliseconds));
 
   const navbar = document.getElementById('navbar');
   assert.approximately(
@@ -133,7 +131,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     0,
     15,
     "Navbar's parent should be body and it should be at the top of " +
-    'the viewport '
+      'the viewport '
   );
 
   window.scroll(0, 500);
@@ -144,8 +142,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     navbar?.getBoundingClientRect().top,
     0,
     15,
-    'Navbar should be at the top of the viewport even after ' +
-    'scrolling '
+    'Navbar should be at the top of the viewport even after ' + 'scrolling '
   );
   window.scroll(0, 0);
 })();
@@ -156,16 +153,13 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Personal Portfolio</title>
-</head>
-<body>
-
-</body>
-
+  </head>
+  <body></body>
 </html>
 ```
 
@@ -176,31 +170,41 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <link rel="stylesheet" href="styles.css" />
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
-    <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet" />
-</head>
-
-<body>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
     <!-- START NAV -->
 
     <nav id="navbar" class="nav">
-        <ul class="nav-list">
-            <li>
-                <a href="#welcome-section">About</a>
-            </li>
-            <li>
-                <a href="#project-section">Work</a>
-            </li>
-            <li>
-                <a href="#contact">Contact</a>
-            </li>
-        </ul>
+      <ul class="nav-list">
+        <li>
+          <a href="#welcome-section">About</a>
+        </li>
+        <li>
+          <a href="#project-section">Work</a>
+        </li>
+        <li>
+          <a href="#contact">Contact</a>
+        </li>
+      </ul>
     </nav>
 
     <!-- END NAV -->
@@ -208,8 +212,8 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START WELCOME SECTION -->
 
     <section id="welcome-section" class="welcome-section">
-        <h1>Hey I am Mimic</h1>
-        <p>a web developer</p>
+      <h1>Hey I am Mimic</h1>
+      <p>a web developer</p>
     </section>
 
     <!-- END WELCOME SECTION -->
@@ -217,68 +221,113 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START PROJECTS SECTION -->
 
     <section id="project-section" class="projects-section">
-        <h2 class="projects-section-header">These are some of my projects</h2>
-
-        <div class="projects-grid">
-            <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Tribute Page
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project project-tile">
-                <img class="project-image"
-                    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Random Quote Machine
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    JavaScript Calculator
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Map Data Across the Globe
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project project-tile">
-                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
-                    alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Wikipedia Viewer
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-            <a href="https://codepen.io/freeCodeCamp/full/KzXQgy" target="_blank" class="project project-tile">
-                <img class="project-image"
-                    src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project" />
-                <p class="project-title">
-                    <span class="code">&lt;</span>
-                    Tic Tac Toe Game
-                    <span class="code">&#47;&gt;</span>
-                </p>
-            </a>
-        </div>
-
-        <a href="https://codepen.io/FreeCodeCamp/" class="btn btn-show-all" target="_blank">Show all<i
-                class="fas fa-chevron-right"></i></a>
+      <h2 class="projects-section-header">These are some of my projects</h2>
+
+      <div class="projects-grid">
+        <a
+          href="https://codepen.io/freeCodeCamp/full/zNqgVx"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Tribute Page
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Random Quote Machine
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/wgGVVX"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            JavaScript Calculator
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/mVEJag"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Map Data Across the Globe
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/wGqEga"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Wikipedia Viewer
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+        <a
+          href="https://codepen.io/freeCodeCamp/full/KzXQgy"
+          target="_blank"
+          class="project project-tile"
+        >
+          <img
+            class="project-image"
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
+            alt="project"
+          />
+          <p class="project-title">
+            <span class="code">&lt;</span>
+            Tic Tac Toe Game
+            <span class="code">&#47;&gt;</span>
+          </p>
+        </a>
+      </div>
+
+      <a
+        href="https://codepen.io/FreeCodeCamp/"
+        class="btn btn-show-all"
+        target="_blank"
+        >Show all<i class="fas fa-chevron-right"></i
+      ></a>
     </section>
 
     <!-- END PROJECTS SECTION -->
@@ -286,20 +335,37 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START CONTACT SECTION -->
 
     <section id="contact" class="contact-section">
-        <div class="contact-section-header">
-            <h2>Let's work together...</h2>
-            <p>How do you take your coffee?</p>
-        </div>
-        <div class="contact-links">
-            <a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-facebook-square"></i> Facebook</a>
-            <a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-github"></i> GitHub</a>
-            <a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i
-                    class="fab fa-twitter"></i> Twitter</a>
-            <a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
-            <a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
-        </div>
+      <div class="contact-section-header">
+        <h2>Let's work together...</h2>
+        <p>How do you take your coffee?</p>
+      </div>
+      <div class="contact-links">
+        <a
+          href="https://facebook.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-facebook-square"></i> Facebook</a
+        >
+        <a
+          id="profile-link"
+          href="https://github.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-github"></i> GitHub</a
+        >
+        <a
+          href="https://twitter.com/freecodecamp"
+          target="_blank"
+          class="btn contact-details"
+          ><i class="fab fa-twitter"></i> Twitter</a
+        >
+        <a href="mailto:example@example.com" class="btn contact-details"
+          ><i class="fas fa-at"></i> Send a mail</a
+        >
+        <a href="tel:555-555-5555" class="btn contact-details"
+          ><i class="fas fa-mobile-alt"></i> Call me</a
+        >
+      </div>
     </section>
 
     <!-- END CONTACT SECTION -->
@@ -307,54 +373,58 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
     <!-- START FOOTER SECTION -->
 
     <footer>
-        <p>
-            **This is just a fake portfolio. All the projects and contact details
-            given are not real.
-        </p>
-        <p>
-            &copy; Created for
-            <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp <i
-                    class="fab fa-free-code-camp"></i></a>
-        </p>
+      <p>
+        **This is just a fake portfolio. All the projects and contact details
+        given are not real.
+      </p>
+      <p>
+        &copy; Created for
+        <a href="https://www.freecodecamp.org/" target="_blank"
+          >freeCodeCamp <i class="fab fa-free-code-camp"></i
+        ></a>
+      </p>
     </footer>
 
     <!-- END FOOTER SECTION -->
+</body>
 </body>
 
+  </body>
+
 </html>
 ```
 
 ```css
 /* Custom properties/variables  */
 :root {
-    --main-white: #f0f0f0;
-    --main-red: #be3144;
-    --main-blue: #45567d;
-    --main-gray: #303841;
+  --main-white: #f0f0f0;
+  --main-red: #be3144;
+  --main-blue: #45567d;
+  --main-gray: #303841;
 }
 
 /* Base reset */
 * {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 /* box-sizing and font sizing */
 *,
 *::before,
 *::after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 html {
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    /* Set font size for easy rem calculations
+  /* Set font size for easy rem calculations
    * default document font size = 16px, 1rem = 16px, 100% = 16px
    * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
   */
-    font-size: 62.5%;
-    scroll-behavior: smooth;
+  font-size: 62.5%;
+  scroll-behavior: smooth;
 }
 
 /* A few media query to set some font sizes at different screen sizes.
@@ -374,287 +444,287 @@ html {
 
 /* 1200px / 16px = 75em */
 @media (max-width: 75em) {
-    html {
-        font-size: 60%;
-    }
+  html {
+    font-size: 60%;
+  }
 }
 
 /* 980px / 16px = 61.25em */
 @media (max-width: 61.25em) {
-    html {
-        font-size: 58%;
-    }
+  html {
+    font-size: 58%;
+  }
 }
 
 /* 460px / 16px = 28.75em */
 @media (max-width: 28.75em) {
-    html {
-        font-size: 55%;
-    }
+  html {
+    font-size: 55%;
+  }
 }
 
 /* Base styles */
 
 body {
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.8rem;
-    /* 18px */
-    font-weight: 400;
-    line-height: 1.4;
-    color: var(--main-white);
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.8rem;
+  /* 18px */
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--main-white);
 }
 
 h1,
 h2 {
-    font-family: 'Raleway', sans-serif;
-    font-weight: 700;
-    text-align: center;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 700;
+  text-align: center;
 }
 
 h1 {
-    font-size: 6rem;
+  font-size: 6rem;
 }
 
 h2 {
-    font-size: 4.2rem;
+  font-size: 4.2rem;
 }
 
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 a {
-    text-decoration: none;
-    color: var(--main-white);
+  text-decoration: none;
+  color: var(--main-white);
 }
 
 img {
-    display: block;
-    width: 100%;
+  display: block;
+  width: 100%;
 }
 
 /* nav */
 
 .nav {
-    display: flex;
-    justify-content: flex-end;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: var(--main-red);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
-    z-index: 10;
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: var(--main-red);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
+  z-index: 10;
 }
 
 .nav-list {
-    display: flex;
-    margin-right: 2rem;
+  display: flex;
+  margin-right: 2rem;
 }
 
 @media (max-width: 28.75em) {
-    .nav {
-        justify-content: center;
-    }
+  .nav {
+    justify-content: center;
+  }
 
-    .nav-list {
-        margin: 0 1rem;
-    }
+  .nav-list {
+    margin: 0 1rem;
+  }
 }
 
 .nav-list a {
-    display: block;
-    font-size: 2.2rem;
-    padding: 2rem;
+  display: block;
+  font-size: 2.2rem;
+  padding: 2rem;
 }
 
 .nav-list a:hover {
-    background: var(--main-blue);
+  background: var(--main-blue);
 }
 
 /* Welcome section */
 
 .welcome-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    background-color: #000;
-    background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
 }
 
-.welcome-section>p {
-    font-size: 3rem;
-    font-weight: 200;
-    font-style: italic;
-    color: var(--main-red);
+.welcome-section > p {
+  font-size: 3rem;
+  font-weight: 200;
+  font-style: italic;
+  color: var(--main-red);
 }
 
 /* Projects section */
 
 .projects-section {
-    text-align: center;
-    padding: 10rem 2rem;
-    background: var(--main-blue);
+  text-align: center;
+  padding: 10rem 2rem;
+  background: var(--main-blue);
 }
 
 .projects-section-header {
-    max-width: 640px;
-    margin: 0 auto 6rem auto;
-    border-bottom: 0.2rem solid var(--main-white);
+  max-width: 640px;
+  margin: 0 auto 6rem auto;
+  border-bottom: 0.2rem solid var(--main-white);
 }
 
 @media (max-width: 28.75em) {
-    .projects-section-header {
-        font-size: 4rem;
-    }
+  .projects-section-header {
+    font-size: 4rem;
+  }
 }
 
 /* "Automagic" image grid using no media queries */
 .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    grid-gap: 4rem;
-    width: 100%;
-    max-width: 1280px;
-    margin: 0 auto;
-    margin-bottom: 6rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 4rem;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  margin-bottom: 6rem;
 }
 
 @media (max-width: 30.625em) {
-    .projects-section {
-        padding: 6rem 1rem;
-    }
+  .projects-section {
+    padding: 6rem 1rem;
+  }
 
-    .projects-grid {
-        grid-template-columns: 1fr;
-    }
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .project {
-    background: var(--main-gray);
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-    border-radius: 2px;
+  background: var(--main-gray);
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
 }
 
 .code {
-    color: var(--main-gray);
-    transition: color 0.3s ease-out;
+  color: var(--main-gray);
+  transition: color 0.3s ease-out;
 }
 
 .project:hover .code {
-    color: #ff7f50;
+  color: #ff7f50;
 }
 
 .project-image {
-    height: calc(100% - 6.8rem);
-    width: 100%;
-    object-fit: cover;
+  height: calc(100% - 6.8rem);
+  width: 100%;
+  object-fit: cover;
 }
 
 .project-title {
-    font-size: 2rem;
-    padding: 2rem 0.5rem;
+  font-size: 2rem;
+  padding: 2rem 0.5rem;
 }
 
 .btn {
-    display: inline-block;
-    padding: 1rem 2rem;
-    border-radius: 2px;
+  display: inline-block;
+  padding: 1rem 2rem;
+  border-radius: 2px;
 }
 
 .btn-show-all {
-    font-size: 2rem;
-    background: var(--main-gray);
-    transition: background 0.3s ease-out;
+  font-size: 2rem;
+  background: var(--main-gray);
+  transition: background 0.3s ease-out;
 }
 
 .btn-show-all:hover {
-    background: var(--main-red);
+  background: var(--main-red);
 }
 
-.btn-show-all:hover>i {
-    transform: translateX(2px);
+.btn-show-all:hover > i {
+  transform: translateX(2px);
 }
 
-.btn-show-all>i {
-    margin-left: 10px;
-    transform: translateX(0);
-    transition: transform 0.3s ease-out;
+.btn-show-all > i {
+  margin-left: 10px;
+  transform: translateX(0);
+  transition: transform 0.3s ease-out;
 }
 
 /* Contact section */
 
 .contact-section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 100%;
-    height: 80vh;
-    padding: 0 2rem;
-    background: var(--main-gray);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 80vh;
+  padding: 0 2rem;
+  background: var(--main-gray);
 }
 
-.contact-section-header>h2 {
-    font-size: 6rem;
+.contact-section-header > h2 {
+  font-size: 6rem;
 }
 
 @media (max-width: 28.75em) {
-    .contact-section-header>h2 {
-        font-size: 4rem;
-    }
+  .contact-section-header > h2 {
+    font-size: 4rem;
+  }
 }
 
-.contact-section-header>p {
-    font-style: italic;
+.contact-section-header > p {
+  font-style: italic;
 }
 
 .contact-links {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: 980px;
-    margin-top: 4rem;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 980px;
+  margin-top: 4rem;
+  flex-wrap: wrap;
 }
 
 .contact-details {
-    font-size: 2.4rem;
-    text-shadow: 2px 2px 1px #1f1f1f;
-    transition: transform 0.3s ease-out;
+  font-size: 2.4rem;
+  text-shadow: 2px 2px 1px #1f1f1f;
+  transition: transform 0.3s ease-out;
 }
 
 .contact-details:hover {
-    transform: translateY(8px);
+  transform: translateY(8px);
 }
 
 /* Footer */
 
 footer {
-    font-weight: 300;
-    display: flex;
-    justify-content: space-evenly;
-    padding: 2rem;
-    background: var(--main-gray);
-    border-top: 4px solid var(--main-red);
+  font-weight: 300;
+  display: flex;
+  justify-content: space-evenly;
+  padding: 2rem;
+  background: var(--main-gray);
+  border-top: 4px solid var(--main-red);
 }
 
-footer>p {
-    margin: 2rem;
+footer > p {
+  margin: 2rem;
 }
 
 footer i {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 @media (max-width: 28.75em) {
-    footer {
-        flex-direction: column;
-        text-align: center;
-    }
+  footer {
+    flex-direction: column;
+    text-align: center;
+  }
 }
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/chinese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
index a2f972696a..06a52541fd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78af367417b2b2512b04
 title: 制作一个产品登录页
-challengeType: 14
+challengeType: 25
 dashedName: build-a-product-landing-page
 demoType: onClick
 ---
@@ -63,7 +63,7 @@ assert.exists(el);
 assert.exists(el.src); 
 ```
 
-你的 `#header-img` 元素的 `src` 属性应该有一个有效的 URL（以 `http` 开头）。
+Your `#header-img`'s `src` value should be a valid URL (starts with `http`).
 
 ```js
 const el = document.getElementById('header-img');
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md b/curriculum/challenges/chinese/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
index a1d4053caa..493cc70725 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-project-idea-board/67051431a73f1ca25d9a6f25.md
@@ -1,7 +1,7 @@
 ---
 id: 67051431a73f1ca25d9a6f25
 title: Build a Project Idea Board
-challengeType: 14
+challengeType: 25
 dashedName: build-a-project-idea-board
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md b/curriculum/challenges/chinese/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
index 82561296bc..9387030879 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-pyramid-generator/66f2836c459cfb16ae76f24f.md
@@ -1,7 +1,7 @@
 ---
 id: 66f2836c459cfb16ae76f24f
 title: Build a Pyramid Generator
-challengeType: 14
+challengeType: 25
 dashedName: lab-pyramid-generator
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md b/curriculum/challenges/chinese/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md
index 2484680ce1..83b1598508 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-quiz-game/66f17db06803d11a1bd19a20.md
@@ -1,7 +1,7 @@
 ---
 id: 66f17db06803d11a1bd19a20
 title: Build a Quiz Game
-challengeType: 14
+challengeType: 25
 dashedName: lab-quiz-game
 ---
 
@@ -43,12 +43,14 @@ questions.forEach(question => {
 The `category` key should have the value of a string representing a question category.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({category}) => assert.isString(category));
 ```
 
 The `question` key should have the value of a string representing a question.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({question}) => {
     assert.isString(question);
     assert.include(question, '?');
@@ -58,6 +60,7 @@ questions.forEach(({question}) => {
 The `choices` key should have the value of an array containing three strings.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({choices}) => {
     assert.isArray(choices);
     assert.lengthOf(choices, 3);
@@ -68,12 +71,14 @@ questions.forEach(({choices}) => {
 The `answer` key should have the value of a string.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({answer}) => assert.isString(answer));
 ```
 
 The value of `answer` should be included in the `choices` array.
 
 ```js
+assert.isNotEmpty(questions);
 questions.forEach(({answer, choices}) => assert.oneOf(answer, choices));
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md b/curriculum/challenges/chinese/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
index 7fb680ec79..28c7649f4e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-random-background-color-changer/66b62d0ad68488dd76228d6c.md
@@ -1,7 +1,7 @@
 ---
 id: 66b62d0ad68488dd76228d6c
 title: Debug a Random Background Color Changer
-challengeType: 14
+challengeType: 25
 dashedName: debug-a-random-background-color-changer
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md b/curriculum/challenges/chinese/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
index a4d66591c6..b744002a60 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-real-time-counter/66bb3e20d3dc5b6d0a21f5dd.md
@@ -1,7 +1,7 @@
 ---
 id: 66bb3e20d3dc5b6d0a21f5dd
 title: Build a Real Time Counter
-challengeType: 14
+challengeType: 25
 dashedName: build-a-real-time-counter
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md b/curriculum/challenges/chinese/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
index 5ffaae94e2..06a91d31fe 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-recipe-page/668f08ea07b99b1f4a91acab.md
@@ -1,7 +1,7 @@
 ---
 id: 668f08ea07b99b1f4a91acab
 title: Build a Recipe Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-recipe-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md b/curriculum/challenges/chinese/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
index d1683dce9f..e04550324d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-regex-sandbox/66e028680eca7d21db7e1aee.md
@@ -1,7 +1,7 @@
 ---
 id: 66e028680eca7d21db7e1aee
 title: Build a RegEx Sandbox
-challengeType: 14
+challengeType: 25
 dashedName: lab-regex-sandbox
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md b/curriculum/challenges/chinese/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
index 39886846a1..d7f946044f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-reusable-footer/673b02b03134b04637bf7055.md
@@ -1,7 +1,7 @@
 ---
 id: 673b02b03134b04637bf7055
 title: Build a Reusable Footer
-challengeType: 14
+challengeType: 25
 dashedName: build-a-reusable-footer
 demoType: onClick
 ---
@@ -32,22 +32,29 @@ assert.lengthOf(mockedComponent.find('Footer'), 1);
 Your `Footer` component should return a `footer` element.
 
 ```js
-assert.equal(Enzyme.shallow(React.createElement(window.index.Footer)).type(), 'footer');
+assert.equal(
+  Enzyme.shallow(React.createElement(window.index.Footer)).type(),
+  'footer'
+);
 ```
 
 Your `footer` should have at least three unordered lists.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('ul').length, 3);
 ```
 
 Each of your unordered lists should have at least two list items.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 const uls = mockedComponent.find('ul');
-uls.forEach(ul => {  
+uls.forEach(ul => {
   assert.isAtLeast(ul.find('li').length, 2);
 });
 
@@ -57,17 +64,21 @@ assert.isAtLeast(uls.length, 1);
 Your `footer` should have at least one paragraph element.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('p').length, 1);
 ```
 
 You should have a copyright (`©`) symbol within one of your paragraphs.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 let hasCopyright = false;
 mockedComponent.find('p').forEach(p => {
-  if(p.text().includes('©')) {
+  if (p.text().includes('©')) {
     hasCopyright = true;
   }
 });
@@ -77,14 +88,18 @@ assert.isTrue(hasCopyright);
 Your `footer` should have at least three links with the `href` value set to `#`.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 assert.isAtLeast(mockedComponent.find('a[href="#"]').length, 3);
 ```
 
 None of your links should be empty.
 
 ```js
-const mockedComponent = Enzyme.shallow(React.createElement(window.index.Footer));
+const mockedComponent = Enzyme.shallow(
+  React.createElement(window.index.Footer)
+);
 mockedComponent.find('a').forEach(a => {
   assert.isAtLeast(a.text().length, 1);
 });
@@ -103,38 +118,34 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Reusable Footer Component</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { Footer } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <Footer />
-        );
+      import { Footer } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
@@ -143,132 +154,139 @@ assert.equal(mockedComponent.html(), document.getElementById('root').innerHTML);
 ```
 
 ```jsx
-export const Footer = () => {
-
-};
+export const Footer = () => {};
 ```
 
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Reusable Footer Component</title>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        src="index.jsx"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
     ></script>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script
-        data-plugins="transform-modules-umd"
-        type="text/babel"
-        data-presets="react"
-        data-type="module"
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
     >
-        import { Footer } from './index.jsx';
-        ReactDOM.createRoot(document.getElementById('root')).render(
-            <Footer />
-        );
+      import { Footer } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 .footer {
-    background-color: #e3e1eb;
-    padding: 20px;
-    text-align: center;
-    border-top: 1px solid #e5e7eb;
-    font-family: Arial, sans-serif;
+  background-color: #e3e1eb;
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid #e5e7eb;
+  font-family: Arial, sans-serif;
 }
 
 .footer-section {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    justify-content: center;
-    margin-bottom: 20px;
-    align-items: center;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  justify-content: center;
+  margin-bottom: 20px;
+  align-items: center;
 }
 
 .footer ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .footer li {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .footer a {
-    text-decoration: none;
-    color: #1f2937;
+  text-decoration: none;
+  color: #1f2937;
 }
 
 .footer a:hover {
-    color: #6366f1;
+  color: #6366f1;
 }
 
 .footer p {
-    color: #6b7280;
-    margin-top: 20px;
+  color: #6b7280;
+  margin-top: 20px;
 }
 
 .footer-icons {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }
 
 .footer-icons a {
-    margin: 0 10px;
-    font-size: 24px;
-    color: #6b7280;
-    text-decoration: none;
+  margin: 0 10px;
+  font-size: 24px;
+  color: #6b7280;
+  text-decoration: none;
 }
 
 .footer-icons a:hover {
-    color: #6366f1;
+  color: #6366f1;
 }
 ```
 
 ```jsx
-export const Footer = () =>
-    <footer className="footer">
-        <div className="footer-section">
-            <ul>
-                <li><a href="#">Fitness Dashboard</a></li>
-                <li><a href="#">Services</a></li>
-            </ul>
-            <ul>
-                <li><a href="#">Watch Videos</a></li>
-                <li><a href="#">Discord</a></li>
-            </ul>
-            <ul>
-                <li><a href="#">Privacy Policy</a></li>
-                <li><a href="#">Terms & Conditions</a></li>
-            </ul>
-        </div>
-        <p>© 2024 Fitness Dashboard. All Rights Reserved.</p>
-        <div className="footer-icons">
-            <a href="#">&#x1F3AE;</a>
-            <a href="#">&#x1F426;</a>
-            <a href="#">&#x1F4BB;</a>
-            <a href="#">&#x1F3C0;</a>
-        </div>
-    </footer>
+export const Footer = () => (
+  <footer className='footer'>
+    <div className='footer-section'>
+      <ul>
+        <li>
+          <a href='#'>Fitness Dashboard</a>
+        </li>
+        <li>
+          <a href='#'>Services</a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a href='#'>Watch Videos</a>
+        </li>
+        <li>
+          <a href='#'>Discord</a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a href='#'>Privacy Policy</a>
+        </li>
+        <li>
+          <a href='#'>Terms & Conditions</a>
+        </li>
+      </ul>
+    </div>
+    <p>© 2024 Fitness Dashboard. All Rights Reserved.</p>
+    <div className='footer-icons'>
+      <a href='#'>&#x1F3AE;</a>
+      <a href='#'>&#x1F426;</a>
+      <a href='#'>&#x1F4BB;</a>
+      <a href='#'>&#x1F3C0;</a>
+    </div>
+  </footer>
+);
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md b/curriculum/challenges/chinese/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
index 1de0cbd79d..5340c4cc99 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-sentence-maker/66c057041df6394ca796bf33.md
@@ -1,7 +1,7 @@
 ---
 id: 66c057041df6394ca796bf33
 title: Build a Sentence Maker
-challengeType: 14
+challengeType: 25
 dashedName: build-a-sentence-maker
 ---
 
@@ -119,11 +119,18 @@ You should declare a `firstStory` variable.
 assert.isNotNull(firstStory);
 ```
 
-Your should use the correct story format for both stories: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
+You should use the correct story format for the first story: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
 
 ```js
-const expected = `Once upon a time, there was a(n) ${adjective} ${noun} who loved to eat ${noun2}. The ${noun} lived in a ${place} and had ${adjective2} nostrils that blew fire when it was ${verb}.`;
-assert.strictEqual(secondStory, expected);
+const _initialValues = {}
+for (const name of ['adjective', 'noun', 'noun2', 'place', 'verb', 'adjective2']) {
+    const match = code.match(new RegExp(String.raw`${name}\s*=\s*('|"|${'`'})(?<${name}>.*)\1;?\s*`));
+    _initialValues[name] = match ? match.groups[name] : null;
+}
+
+const expected = `Once upon a time, there was a(n) ${_initialValues['adjective']} ${_initialValues['noun']} who loved to eat ${_initialValues['noun2']}. The ${_initialValues['noun']} lived in a ${_initialValues['place']} and had ${_initialValues['adjective2']} nostrils that blew fire when it was ${_initialValues['verb']}.`;
+
+assert.strictEqual(firstStory, expected);
 ```
 
 You should log your first story using the message `"First story: [firstStory]"`.
@@ -176,6 +183,13 @@ You should reassign the `noun2` variable for the second story.
 assert.lengthOf(__helpers.removeJSComments(code).match(/noun2\s*=\s*/g), 2);
 ```
 
+You should use the correct story format for the second story: `"Once upon a time, there was a(n) [adjective] [noun] who loved to eat [noun2]. The [noun] lived in a [place] and had [adjective2] nostrils that blew fire when it was [verb]."`. Pay attention to spaces.
+
+```js
+const expected = `Once upon a time, there was a(n) ${adjective} ${noun} who loved to eat ${noun2}. The ${noun} lived in a ${place} and had ${adjective2} nostrils that blew fire when it was ${verb}.`;
+assert.strictEqual(secondStory, expected);
+```
+
 You should log your second story using the format `"Second story: [secondStory]"`.
 
 ```js
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md b/curriculum/challenges/chinese/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
new file mode 100644
index 0000000000..d876f2e316
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
@@ -0,0 +1,599 @@
+---
+id: 6716249b5405164036fd0b0d
+title: Build a Sorting Visualizer
+challengeType: 25
+dashedName: build-a-sorting-visualizer
+demoType: onClick
+---
+
+# --description--
+
+The Bubble Sort algorithm sorts a sequence of integers by comparing couples of adjacent elements starting from the beginning of the sequence. If the first element is greater than the second one, it swaps them. Then, it proceeds with the following couple. When the sequence ends, it starts a new cycle from the beginning of the sequence, and repeats the process until the elements are sorted.
+
+For this lab, you have been provided with all the HTML and CSS. You will use JavaScript to complete the Bubble Sort Visualizer so that it visualizes each step needed by the Bubble Sort algorithm to sort an array of five integers.
+
+Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. You should have a function named `generateElement` that returns a random integer between `1` and `100`, inclusive.
+1. You should have a function named `generateArray` that uses the `generateElement` function to return an array containing five random integers.
+1. You should have a function named `generateContainer` that creates and returns an empty `div` element.
+1. You should have a function named `fillArrContainer` that takes an HTML element as the first argument and an array as the second argument.
+1. The `fillArrContainer` function should fill the element passed as the first argument to the function with five `span` elements with the text of an integer from the array passed as the second argument to the function.
+1. You should have a function named `isOrdered` that takes two integers and returns a boolean indicating if the first integer is less than or equal to the second.
+1. You should have a function named `swapElements` that takes an array of integers and a numeric index.
+1. The `swapElements` function should modify the array in place by swapping the element at the passed index and the following element if `isOrdered` returns `false`.
+1. You should have a function named `highlightCurrentEls` that takes an HTML element and a numeric index.
+1. The `highlightCurrentEls` function should set the `border` of the given element's child at the given index, and the child immediately after the index, to have a `dashed` style, a `red` color, and a width of your choice.
+1. When you click `#generate-btn` you should use the `fillArrContainer` function to fill `#starting-array` with five `span` elements, each with a random number as its text. If present, other elements should be removed from `#array-container`.
+1. You should implement the Bubble Sort algorithm so that after you click `#sort-btn`, `#array-container` contains a `div` element for each of the steps required by the Bubble Sort algorithm to sort the starting array, including the `div` representing the starting array and a `div` representing the sorted array. The functions you have created so far can be useful here.
+1. Each `div` should contain five `span` elements, representing the array in its current state of being sorted.
+1. After you click `#sort-btn`, `#starting-array` should represent the starting step with the initial array and the first two integers highlighted.
+1. For each sorting step, you should use `highlightCurrentEls` to highlight the two numbers that are being compared, and swap them in the next step by using `swapElements`.
+
+# --hints--
+
+You should have a function named `generateElement`.
+
+```js
+assert.isFunction(generateElement);
+```
+
+Your `generateElement` function should return a random integer between `1` and `100` inclusive.
+
+```js
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    assert.strictEqual(generateElement(), 26);
+    assert.strictEqual(generateElement(), 9);
+} finally {
+    randomMocker.restore();
+}
+```
+
+You should have a function named `generateArray`.
+
+```js
+assert.isFunction(generateArray)
+```
+
+Your `generateArray` function should make use of the `generateElement` function.
+
+```js
+let flag = false;
+const temp = generateElement;
+generateElement = () => flag = true;
+try {
+    generateArray();
+    assert.isTrue(flag);
+} finally {
+    generateElement = temp;
+}
+```
+
+Your `generateArray` function should return an array containing five random integers between `1` and `100`.
+
+```js
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {
+    assert.deepEqual(generateArray(), [26, 9, 58, 23, 38])
+} finally {
+    randomMocker.restore();
+}
+```
+
+You should have a function named `generateContainer`.
+
+```js
+assert.isFunction(generateContainer);
+```
+
+Your `generateContainer` function should return an empty `div` element.
+
+```js
+const div = generateContainer();
+assert.equal(div.tagName, "DIV");
+assert.isEmpty(div.children);
+```
+
+You should have a function named `fillArrContainer`.
+
+```js
+assert.isFunction(fillArrContainer);
+```
+
+Your `fillArrContainer()` function should fill the element passed as the first argument to the function with five `span` elements with the text of an integer from the array passed as the second argument to the function.
+
+```js
+const testDiv = document.createElement("div");
+const testArr = [15, 98, 17, 5, 63]
+fillArrContainer(testDiv, testArr);
+const children = testDiv.children;
+assert.lengthOf(children, 5);
+Array.from(children).forEach((el, i) => {
+    assert.equal(el.tagName, "SPAN");
+    assert.equal(el.innerText, testArr[i])
+})
+```
+
+You should have a function named `isOrdered`.
+
+```js
+assert.isFunction(isOrdered);
+```
+
+Your `isOrdered` function should take two integers and should return a boolean indicating if the first integer is less than or equal to the second.
+
+```js
+assert.lengthOf(isOrdered, 2);
+assert.isTrue(isOrdered(2, 60));
+assert.isFalse(isOrdered(10, 3));
+assert.isTrue(isOrdered(5, 5));
+```
+
+You should have a function named `swapElements`.
+
+```js
+assert.isFunction(swapElements);
+```
+
+Your `swapElements` function take an array of integers and a numeric index as arguments. It should modify the array passed in place by swapping the element at the given index and the following element if the first element is greater than the second.
+
+```js
+const testArr = [22, 4, 87, 47, 33];
+swapElements(testArr, 0);
+assert.deepEqual(testArr, [4, 22, 87, 47, 33]);
+swapElements(testArr, 1);
+assert.deepEqual(testArr, [4, 22, 87, 47, 33]);
+swapElements(testArr, 2);
+assert.deepEqual(testArr, [4, 22, 47, 87, 33]);
+swapElements(testArr, 3);
+assert.deepEqual(testArr, [4, 22, 47, 33, 87]);
+```
+
+You should have a function named `highlightCurrentEls`.
+
+```js
+assert.isFunction(highlightCurrentEls);
+```
+
+Your `highlightCurrentEls` function should give the descendants of the specified element, located at the given index and the next index, a border that is `dashed`, `red`, and set to a width of your choice.
+
+```js
+const testDiv = document.createElement("div");
+document.querySelector("body").appendChild(testDiv)
+for (let i = 0; i < 5; i++) {
+    testDiv.appendChild(document.createElement("span"));
+}
+const redBorderRegex = /dashed (rgb\(255,\s*0,\s*0\)|#FF0000|#F00|hsl\(0,\s*100%,\s*50%\))/;
+const revertBorder = () => {
+    for (const el of children) {
+        el.style.border = "revert";
+    }
+}
+const children = testDiv.children;
+
+for (let i = 0; i < 3; i++) {
+    highlightCurrentEls(testDiv, i);
+    for (let j = 0; j < 5; j++) {
+        let b = getComputedStyle(children[j]).border;
+        if (j == i || j == i + 1) {            
+            assert.match(b, redBorderRegex);
+            assert.isAbove(parseFloat(b), 0);
+        } else {
+            assert.notMatch(b, redBorderRegex);
+        }
+    }
+    revertBorder();
+}
+testDiv.remove();
+```
+
+When you click `#generate-btn` you should fill `#starting-array` with five `span` elements, each with a random number between `1` and `100` as its text.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+genBtn.click();
+const children = document.querySelector("#starting-array").querySelectorAll("span");
+assert.lengthOf(children, 5);
+Array.from(children).forEach(el => {
+    assert.equal(el.tagName, "SPAN");
+    const num = Number(el.innerText);
+    assert.isAtMost(num, 100);
+    assert.isAtLeast(num, 1);
+})
+```
+
+When `#starting-array` already contains a generated array, or `#array-container` contains the sorted array, clicking the `#generate-btn` should remove other elements in the `#array-container`, leaving only `#starting-array` with newly generated numbers.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+genBtn.dispatchEvent(new Event("click"));
+
+const prevNumbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
+
+sortBtn.dispatchEvent(new Event("click"));
+genBtn.dispatchEvent(new Event("click"));
+
+const container = document.querySelector("#array-container");
+assert.lengthOf(container.children, 1);
+const numbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
+assert.lengthOf(numbers, 5);
+assert.isTrue(prevNumbers.some((num, index) => num !== numbers[index]))
+```
+
+After you click `#sort-btn`, `#array-container` should contain as many `div` elements as the steps required by the Bubble Sort algorithm to sort the starting array, including the `div` representing the starting array and a `div` representing the sorted array.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+// using randomMocker to be sure that the starting array requires 13 steps to be sorted
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    genBtn.dispatchEvent(new Event("click"));
+    sortBtn.dispatchEvent(new Event("click"));
+    const container = document.querySelector("#array-container");
+    assert.lengthOf(container.children, 13)
+    Array.from(container.children).forEach(el => {assert.equal(el.tagName, "DIV")})
+} finally {
+    randomMocker.restore();
+}
+```
+
+After you click `#sort-btn`, each `div` within `#array-container` should contain five `span`, each with a number as its text, and arranged to represent the steps required by Bubble Sort algorithm to sort the starting array.
+
+```js
+const finalArr = [9, 23, 26, 38, 58];
+const arrays = [
+    [26, 9, 58, 23, 38],
+    [9, 26, 58, 23, 38],
+    [9, 26, 58, 23, 38],
+    [9, 26, 23, 58, 38],
+    [9, 26, 23, 38, 58],
+    [9, 26, 23, 38, 58],
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr,
+    finalArr
+]
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");
+const randomMocker = new __helpers.RandomMocker();
+randomMocker.mock();
+try {    
+    genBtn.dispatchEvent(new Event("click"));
+    sortBtn.dispatchEvent(new Event("click"));
+    const container = document.querySelector("#array-container");
+    assert.isNotEmpty(container.children);
+    Array.from(container.children).forEach((el, i) => {
+        Array.from(el.children).forEach((j, k) => {
+            assert.strictEqual(Number(j.innerText), arrays[i][k])
+        })
+    })
+} finally {
+    randomMocker.restore();
+}
+```
+
+When you click the `#sort-btn`, you should make use of the `highlightCurrentEls` function to highlight the elements being compared in each step.
+
+```js
+const sortBtn = document.querySelector("#sort-btn");
+let flag = false;
+const temp = highlightCurrentEls;
+highlightCurrentEls = () => flag = true;
+try {
+    sortBtn.dispatchEvent(new Event("click"));
+    assert.isTrue(flag);
+} finally {
+    highlightCurrentEls = temp;
+}
+```
+
+After you click `#sort-btn`, `#starting-array` should represent the starting step with the initial array and the first two integers highlighted using `highlightCurrentEls`.
+
+```js
+const genBtn = document.querySelector("#generate-btn");
+const sortBtn = document.querySelector("#sort-btn");   
+genBtn.dispatchEvent(new Event("click"));
+sortBtn.dispatchEvent(new Event("click"));
+const firstContainer = document.querySelector("#starting-array");
+const children = firstContainer.children
+const redBorderRegex = /dashed (rgb\(255,\s*0,\s*0\)|#FF0000|hsl\(0,\s*100%,\s*50%\))/;
+assert.match(getComputedStyle(children[0]).border, redBorderRegex);
+assert.match(getComputedStyle(children[1]).border, redBorderRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <main>
+        <div id="array-container">
+            <div id="starting-array"></div>
+        </div>
+        <div id="btn-container">
+            <button id="generate-btn" type="button">Generate Array</button>
+            <button id="sort-btn" type="button">Sort Array</button>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+main {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+#array-container {
+    max-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 2px;
+
+}
+
+#array-container>div {
+    min-width: 8rem;
+    height: 2rem;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    border-radius: 10px;
+    margin-bottom: 0.2rem;
+    border: 2px solid darkgray;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#starting-array {
+    border: 4px solid darkblue !important;
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+button {
+    padding: 2px;
+    margin: 5px;
+}
+
+span {
+    border-radius: 2px;
+    padding: 0.5px;
+    margin: 0
+}
+
+@media (min-width: 430px) {
+  #array-container>div {
+    min-width: 12rem;    
+  }
+  span {
+    padding: 1px;
+    margin: 1px;
+  }
+}
+```
+
+```js
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <main>
+        <div id="array-container">
+            <div id="starting-array"></div>
+        </div>
+        <div id="btn-container">
+            <button id="generate-btn" type="button">Generate Array</button>
+            <button id="sort-btn" type="button">Sort Array</button>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+* {
+    box-sizing: border-box;
+}
+
+main {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+#array-container {
+    max-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 2px;
+
+}
+
+#array-container>div {
+    min-width: 8rem;
+    height: 2rem;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    border-radius: 10px;
+    margin-bottom: 0.2rem;
+    border: 2px solid darkgray;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+#starting-array {
+    border: 4px solid darkblue !important;
+}
+
+#btn-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+button {
+    padding: 2px;
+    margin: 5px;
+}
+
+#sort-btn {
+   display: none 
+}
+
+span {
+    border-radius: 2px;
+    padding: 0.5px;
+    margin: 0
+}
+
+@media (min-width: 430px) {
+  #array-container>div {
+    min-width: 12rem;    
+  }
+  span {
+    padding: 1px;
+    margin: 1px;
+  }
+}
+```
+
+```js
+const arrayContainer = document.getElementById("array-container");
+const generateArrayBtn = document.getElementById("generate-btn");
+const sortArrayBtn = document.getElementById("sort-btn");
+const arrayLength = 5;
+const minVal = 1;
+const maxVal = 100;
+const isStart = () => arrayContainer.children.length === 1;
+const clearArrayContainer = () => { arrayContainer.innerHTML = '<div id="starting-array"></div>' };
+const showSortBtn = () => {sortArrayBtn.style.display = "inline-block"};
+const hideSortBtn = () => {sortArrayBtn.style.display = "none"};
+const generateElement = () => Math.floor(Math.random() * maxVal + minVal);
+const generateArray = () => Array.from({ length: arrayLength }, generateElement);
+const fillArrContainer = (container, arr) => {
+    container.innerHTML = "";
+    arr.forEach(i => {
+        const el = document.createElement("span");
+        el.innerText = i;
+        el.id = `number-${i}`
+        container.appendChild(el);
+    })
+}
+const isOrdered = (el1, el2) => el1 <= el2;
+
+const swapElements = (arr, n = 0) => {
+    if (n < arr.length - 1 && !isOrdered(arr[n], arr[n + 1])) {
+        const temp = arr[n];
+        arr[n] = arr[n + 1];
+        arr[n + 1] = temp;
+    }
+}
+const getLastChildren = () => arrayContainer.lastElementChild;
+const getLastArr = () => {
+    const els = Array.from(getLastChildren().children);
+    const arr = els.map(el => Number(el.id.replace("number-", "")));
+    return arr;
+}
+const generateContainer = () => {
+    const container = document.createElement("div");
+    arrayContainer.appendChild(container);
+    return container;
+}
+const highlightCurrentEls = (container, n = 0) => {
+    const children = container.children;
+    children[n].style.border = "2px dashed red";
+    children[n + 1].style.border = "2px dashed red";
+}
+
+const highlightSorted = () => {
+    getLastChildren().style.border = "4px solid green";
+}
+
+const bubbleSort = () => {
+    let swapped = true;
+    while (swapped) {
+        const startingArr = getLastArr();
+        startingArr.forEach((_, i) => {
+            if (i + 1 < arrayLength) {
+                highlightCurrentEls(getLastChildren(), i);
+                const arr = getLastArr();
+                swapElements(arr, i);
+                fillArrContainer(generateContainer(), arr);
+            }
+        })
+        const lastArr = getLastArr()
+        if (startingArr.every((el, i) => el === lastArr[i])) swapped = false;
+    }
+}
+
+
+generateArrayBtn.addEventListener("click", () => {
+    if (!isStart()) {
+        clearArrayContainer();
+    }
+    fillArrContainer(document.getElementById("starting-array"), generateArray());
+    showSortBtn();
+});
+
+sortArrayBtn.addEventListener("click", () => {
+    bubbleSort();
+    highlightSorted();
+    hideSortBtn();
+})
+```
+
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md b/curriculum/challenges/chinese/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
index 1f1fc5bc6b..5a36f64619 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-stylized-to-do-list/66c051d13a6a20255a963695.md
@@ -1,7 +1,7 @@
 ---
 id: 66c051d13a6a20255a963695
 title: Build a Stylized To-Do list
-challengeType: 14
+challengeType: 25
 dashedName: build-a-stylized-to-do-list
 demoType: onClick
 ---
@@ -28,7 +28,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 6. You should set the text color of the links to a color of your choice.
 7. When your links are visited, the color should change to another color of your choice.
 8. When your links are hovered over, the color should change to another color of your choice.
-9.  When your links are focused, there should be a colored outline around the link.
+9. When your links are focused, there should be a colored outline around the link.
 10. When your links are clicked, the color should change to another color of your choice.
 
 **Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
@@ -44,30 +44,37 @@ assert.exists(document.querySelector('.todo-list'));
 You should remove the default list style from your `.todo-list`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyleType === 'none' || new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyle === 'none');
+const isListStyleTypeNone =
+  new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyleType ===
+  'none';
+const isListStyleNone =
+  new __helpers.CSSHelp(document).getStyle('.todo-list')?.listStyle === 'none';
+assert.isTrue(isListStyleTypeNone || isListStyleNone);
 ```
 
 You should have four list items inside the unordered list.
 
 ```js
 const li = document.querySelectorAll('.todo-list li');
-assert.strictEqual(li.length, 8);
+assert.lengthOf(li, 8);
 ```
 
 Each list item should contain an `input` element with the type `checkbox`.
 
 ```js
-const checkboxes = document.querySelectorAll('.todo-list li input[type="checkbox"]');
-assert.strictEqual(checkboxes.length, 4);
+const checkboxes = document.querySelectorAll(
+  '.todo-list li input[type="checkbox"]'
+);
+assert.lengthOf(checkboxes, 4);
 ```
 
 All of the `input` elements should have an `id`.
 
 ```js
 const inputs = document.querySelectorAll('input');
-assert(!!inputs.length);
+assert.isAbove(inputs.length, 0);
 for (let input of inputs) {
-    assert.isAbove(input?.id.length, 0);
+  assert.isAbove(input?.id.length, 0);
 }
 ```
 
@@ -75,23 +82,25 @@ After the `label` elements, there should be an unordered list with the class `su
 
 ```js
 const labelSbItems = document.querySelectorAll('label+ul.sub-item');
-assert.equal(labelSbItems.length, 4);
+assert.lengthOf(labelSbItems, 4);
 ```
 
 The `li` inside the `ul` with the class `sub-item` should have an anchor element with the class `sub-item-link`.
 
 ```js
-const allItems = document.querySelectorAll('label + ul.sub-item li a.sub-item-link');
-assert.equal(allItems.length, 4);
+const allItems = document.querySelectorAll(
+  'label + ul.sub-item li a.sub-item-link'
+);
+assert.lengthOf(allItems, 4);
 ```
 
 All of the anchor elements should have a valid `href`.
 
 ```js
 const links = document.querySelectorAll('a');
-assert(!!links.length);
+assert.isAbove(links.length, 0);
 for (let link of links) {
-    assert.isAbove(link.href.length, 0);
+  assert.isAbove(link.href.length, 0);
 }
 ```
 
@@ -99,9 +108,9 @@ All of the `anchor` elements should have a text.
 
 ```js
 const links = document.querySelectorAll('a');
-assert(!!links.length);
+assert.isAbove(links.length, 0);
 for (let link of links) {
-    assert.isAbove(link.innerText.length, 0);
+  assert.isAbove(link.innerText.length, 0);
 }
 ```
 
@@ -109,9 +118,9 @@ All of the `label` elements should have a `for` attribute.
 
 ```js
 const labels = document.querySelectorAll('label');
-assert(!!labels.length);
+assert.isAbove(labels.length, 0);
 for (let label of labels) {
-    assert.isAbove(label.htmlFor.length, 0);
+  assert.isAbove(label.htmlFor.length, 0);
 }
 ```
 
@@ -119,9 +128,9 @@ All of the `label` elements should have some text.
 
 ```js
 const labels = document.querySelectorAll('label');
-assert(!!labels.length);
+assert.isAbove(labels.length, 0);
 for (let label of labels) {
-    assert.isAbove(label.innerText.length, 0);
+  assert.isAbove(label.innerText.length, 0);
 }
 ```
 
@@ -129,43 +138,62 @@ Each `a` element should have a `target` attribute with the value of `_blank`.
 
 ```js
 const anchors = document.querySelectorAll('a');
-assert(!!anchors.length);
+assert.isAbove(anchors.length, 0);
 for (let anchor of anchors) {
-    assert.equal(anchor.target, '_blank');
+  assert.equal(anchor.target, '_blank');
 }
 ```
 
 The links on the page should have no underline by default.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('a.sub-item-link')?.textDecoration === 'none' || new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none' ||  new __helpers.CSSHelp(document).getStyle('.sub-item-link')?.textDecoration === 'none' );
-
+assert.isTrue(
+  new __helpers.CSSHelp(document).getStyle('a.sub-item-link')
+    ?.textDecoration === 'none' ||
+    new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none' ||
+    new __helpers.CSSHelp(document).getStyle('.sub-item-link')
+      ?.textDecoration === 'none'
+);
 ```
 
 The links should change color when hovered over.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:hover')?.color || new __helpers.CSSHelp(document).getStyle('a:hover')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:hover')?.color);
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:hover')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:hover')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:hover')?.color
+);
 ```
 
 The links should change color when they are being clicked.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:active')?.color || new __helpers.CSSHelp(document).getStyle('a:active')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:active')?.color);
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:active')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:active')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:active')?.color
+);
 ```
 
 The links should have an outline when focused.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:focus')?.outline || new __helpers.CSSHelp(document).getStyle('a:focus')?.outline || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:focus')?.outline);
-
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:focus')?.outline ||
+    new __helpers.CSSHelp(document).getStyle('a:focus')?.outline ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:focus')?.outline
+);
 ```
 
 The links should change color once visited.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color || new __helpers.CSSHelp(document).getStyle('a:visited')?.color || new __helpers.CSSHelp(document).getStyle('a.sub-item-link:visited')?.color);
-
+assert.exists(
+  new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a:visited')?.color ||
+    new __helpers.CSSHelp(document).getStyle('a.sub-item-link:visited')?.color
+);
 ```
 
 # --seed--
@@ -197,130 +225,131 @@ assert(new __helpers.CSSHelp(document).getStyle('.sub-item-link:visited')?.color
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Styled To-Do List</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <h1>My To-Do List</h1>
-        <ul class="todo-list">
+      <h1>My To-Do List</h1>
+      <ul class="todo-list">
+        <li>
+          <input type="checkbox" id="task1" />
+          <label for="task1">Explore gaming keyboards</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task1">
-                <label for="task1">Explore gaming keyboards</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">Store link</a>
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link">Store link</a>
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task2" />
+          <label for="task2">Finish the report</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task2">
-                <label for="task2">Finish the report</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">Request Access</a>
-                    </li>
-                </ul>
-
+              <a href="#" target="_blank" class="sub-item-link"
+                >Request Access</a
+              >
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task3" />
+          <label for="task3">View Phone's Warranty</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task3">
-                <label for="task3">View Phone's Warranty</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">View Receipts</a>
-
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link"
+                >View Receipts</a
+              >
             </li>
+          </ul>
+        </li>
 
+        <li>
+          <input type="checkbox" id="task4" />
+          <label for="task4">Check Processor Specs</label>
+          <ul class="sub-item">
             <li>
-                <input type="checkbox" id="task4">
-                <label for="task4">Check Processor Specs</label>
-                <ul class="sub-item">
-                    <li>
-                        <a href="#" target="_blank" class="sub-item-link">View Model Number</a>
-
-                    </li>
-                </ul>
+              <a href="#" target="_blank" class="sub-item-link"
+                >View Model Number</a
+              >
             </li>
-        </ul>
+          </ul>
+        </li>
+      </ul>
     </div>
 </body>
-
 </html>
 ```
 
 ```css
 body {
-    font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
-    margin: 0;
-    padding: 20px;
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  margin: 0;
+  padding: 20px;
 }
 
 .container {
-    max-width: 400px;
-    margin: 0 auto;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
-    text-align: center;
-    color: #333;
+  text-align: center;
+  color: #333;
 }
 
 .todo-list {
-    list-style-type: none;
-    padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 .todo-list li {
-    margin-bottom: 15px;
-    line-height: 1.6;
-    padding: 10px;
-    background-color: #e5f1e5;
-    border-radius: 10px;
-    position: relative;
+  margin-bottom: 15px;
+  line-height: 1.6;
+  padding: 10px;
+  background-color: #e5f1e5;
+  border-radius: 10px;
+  position: relative;
 }
 
 a.sub-item-link {
-    margin-left: 10px;
-    text-decoration: none;
+  margin-left: 10px;
+  text-decoration: none;
 }
 
 .sub-item-link:link {
-    color: blue;
+  color: blue;
 }
 
 .sub-item-link:visited {
-    color: purple;
+  color: purple;
 }
 
 .sub-item-link:hover {
-    color: red;
+  color: red;
 }
 
 .sub-item-link:focus {
-    outline: 2px solid blue;
-    outline-offset: 2px;
+  outline: 2px solid blue;
+  outline-offset: 2px;
 }
 
 .sub-item-link:active {
-    color: green;
+  color: green;
 }
 
 .sub-item {
-    list-style-type: square;
+  list-style-type: square;
 }
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md b/curriculum/challenges/chinese/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
index d54b493c58..d0bb465da7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-survey-form/587d78af367417b2b2512b03.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78af367417b2b2512b03
 title: 制作一个调查表格
-challengeType: 14
+challengeType: 25
 dashedName: build-a-survey-form
 demoType: onClick
 ---
@@ -35,261 +35,297 @@ You should have an `h1` element with an `id` of `title`.
 
 ```js
 const el = document.getElementById('title');
-assert(!!el && el.tagName === 'H1');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'H1');
 ```
 
 Your `#title` should not be empty.
 
 ```js
 const el = document.getElementById('title');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 You should have a `p` element with an `id` of `description`.
 
 ```js
 const el = document.getElementById('description');
-assert(!!el && el.tagName === 'P');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'P');
 ```
 
 Your `#description` should not be empty.
 
 ```js
 const el = document.getElementById('description');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 You should have a `form` element with an `id` of `survey-form`.
 
 ```js
 const el = document.getElementById('survey-form');
-assert(!!el && el.tagName === 'FORM');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'FORM');
 ```
 
 You should have an `input` element with an `id` of `name`.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#name` should have a `type` of `text`.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.type === 'text');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'text');
 ```
 
 Your `#name` should require input.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && el.required);
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 Your `#name` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #name');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` element with an `id` of `email`.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#email` should have a `type` of `email`.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.type === 'email');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'email');
 ```
 
 Your `#email` should require input.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && el.required);
+assert.isNotNull(el);
+assert.isTrue(el.required);
 ```
 
 Your `#email` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #email');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` element with an `id` of `number`.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.tagName === 'INPUT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'INPUT');
 ```
 
 Your `#number` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #number');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#number` should have a `type` of `number`.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.type === 'number');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'number');
 ```
 
 Your `#number` should have a `min` attribute with a numeric value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.min && isFinite(el.min));
+assert.isNotNull(el);
+assert.isNotEmpty(el.min);
+assert.isTrue(isFinite(el.min));
 ```
 
 Your `#number` should have a `max` attribute with a numeric value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && el.max && isFinite(el.max));
+assert.isNotNull(el);
+assert.isNotEmpty(el.max);
+assert.isTrue(isFinite(el.max));
 ```
 
 You should have a `label` element with an `id` of `name-label`.
 
 ```js
 const el = document.getElementById('name-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 You should have a `label` element with an `id` of `email-label`.
 
 ```js
 const el = document.getElementById('email-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 You should have a `label` element with an `id` of `number-label`.
 
 ```js
 const el = document.getElementById('number-label');
-assert(!!el && el.tagName === 'LABEL');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'LABEL');
 ```
 
 Your `#name-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('name-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#email-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('email-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#number-label` should contain text that describes the input.
 
 ```js
 const el = document.getElementById('number-label');
-assert(!!el && el.innerText.length > 0);
+assert.isNotNull(el);
+assert.isAbove(el.innerText.length, 0);
 ```
 
 Your `#name-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #name-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#email-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #email-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#number-label` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #number-label');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 Your `#name` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('name');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 Your `#email` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('email');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 Your `#number` should have a `placeholder` attribute and value.
 
 ```js
 const el = document.getElementById('number');
-assert(!!el && !!el.placeholder && el.placeholder.length > 0);
+assert.isNotNull(el);
+assert.isNotNull(el.placeholder);
+assert.isAbove(el.placeholder.length, 0);
 ```
 
 You should have a `select` field with an `id` of `dropdown`.
 
 ```js
 const el = document.getElementById('dropdown');
-assert(!!el && el.tagName === 'SELECT');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'SELECT');
 ```
 
 Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
 
 ```js
 const els = document.querySelectorAll('#dropdown option:not([disabled])');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 Your `#dropdown` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #dropdown');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have at least two `input` elements with a `type` of `radio` (radio buttons).
 
 ```js
 const els = document.querySelectorAll('input[type="radio"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 You should have at least two radio buttons that are descendants of `#survey-form`.
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="radio"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 All your radio buttons should have a `value` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('input[type="radio"]');
-const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  'input[type="radio"][value=""], input[type="radio"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 All your radio buttons should have a `name` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('input[type="radio"]');
-const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  'input[type="radio"][name=""], input[type="radio"]:not([name])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 Every radio button group should have at least 2 radio buttons.
@@ -302,59 +338,64 @@ if (radioButtons) {
   radioButtons.forEach(el => {
     if (!groups[el.name]) groups[el.name] = [];
     groups[el.name].push(el);
-  })
+  });
 }
 
 const groupKeys = Object.keys(groups);
 
 groupKeys.forEach(key => {
   if (groups[key].length < 2) assert(false);
-})
+});
 
-assert(groupKeys.length > 0);
+assert.isAbove(groupKeys.length, 0);
 ```
 
 You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
 
 ```js
 const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
-assert(els.length >= 2);
+assert.isAtLeast(els.length, 2);
 ```
 
 All your checkboxes inside `#survey-form` should have a `value` attribute and value.
 
 ```js
 const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]');
-const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])');
-assert(els1.length > 0 && els2.length === 0);
+const els2 = document.querySelectorAll(
+  '#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])'
+);
+assert.isAbove(els1.length, 0);
+assert.lengthOf(els2, 0);
 ```
 
 You should have at least one `textarea` element that is a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form textarea');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 You should have an `input` or `button` element with an `id` of `submit`.
 
 ```js
 const el = document.getElementById('submit');
-assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'));
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'INPUT' || el.tagName === 'BUTTON');
 ```
 
 Your `#submit` should have a `type` of `submit`.
 
 ```js
 const el = document.getElementById('submit');
-assert(!!el && el.type === 'submit');
+assert.isNotNull(el);
+assert.strictEqual(el.type, 'submit');
 ```
 
 Your `#submit` should be a descendant of `#survey-form`.
 
 ```js
 const el = document.querySelector('#survey-form #submit');
-assert(!!el);
+assert.isNotNull(el);
 ```
 
 # --seed--
@@ -364,17 +405,13 @@ assert(!!el);
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <title>Survey Form</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
-</html> 
+  <body></body>
+</html>
 ```
 
 # --solutions--
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md b/curriculum/challenges/chinese/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
index 1a442c7c37..98c364b609 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-technical-documentation-page/587d78b0367417b2b2512b05.md
@@ -1,7 +1,7 @@
 ---
 id: 587d78b0367417b2b2512b05
 title: 制作一个技术文档页面
-challengeType: 14
+challengeType: 25
 demoType: onClick
 dashedName: build-a-technical-documentation-page
 ---
@@ -35,141 +35,147 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你应该有一个 `id` 为 `main-doc` 的 `main` 元素。
 
 ```js
-const el = document.getElementById('main-doc')
-assert(!!el)
+const el = document.getElementById('main-doc');
+assert.isNotNull(el);
 ```
 
 你至少应该有 5 个 class 为 `main-section` 的 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc section');
+assert.isAtLeast(els.length, 5);
 ```
 
 你所有的 `.main-section` 元素都应该是 `section` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (el.tagName !== 'SECTION') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'SECTION') {
+    assert.fail();
+  }
+});
+assert.isAbove(els.length, 0);
 ```
 
 你至少应该有 5 个 `.main-section` 元素，它们是 `#main-doc` 的子元素。
 
 ```js
-const els = document.querySelectorAll('#main-doc .main-section')
-assert(els.length >= 5)
+const els = document.querySelectorAll('#main-doc .main-section');
+assert.isAtLeast(els.length, 5);
 ```
 
 每个 `.main-section` 的第一个子元素都应该是一个 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
-})
-assert(els.length > 0)
+  if (el.firstElementChild?.tagName !== 'HEADER') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你的 `header` 元素不应为空。
 
 ```js
-const els = document.querySelectorAll('header')
+const els = document.querySelectorAll('header');
 els.forEach(el => {
-  if (el.innerText?.length <= 0) assert(false)
-})
-assert(els.length > 0)
+  if (el.innerText?.length <= 0) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.main-section` 元素都应该有 `id`。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  if (!el.id || el.id === '') assert(false)
-})
-assert(els.length > 0)
+  if (!el.id || el.id === '') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 每个 `.main-section` 都应该有一个与其第一个子元素的文本匹配的 `id`，把子元素的文本中的空格都替换为下划线（`_`）用于 id。
 
 ```js
-const els = document.querySelectorAll('.main-section')
+const els = document.querySelectorAll('.main-section');
 els.forEach(el => {
-  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
-  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
-})
-assert(els.length > 0)
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_');
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 在你的 `.main-section` 元素中总计应有至少 10 个 `p` 元素
 
 ```js
-const els = document.querySelectorAll('.main-section p')
-assert(els.length >= 10)
+const els = document.querySelectorAll('.main-section p');
+assert.isAtLeast(els.length, 10);
 ```
 
 所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section code')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section code');
+assert.isAtLeast(els.length, 5);
 ```
 
 所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
 
 ```js
-const els = document.querySelectorAll('.main-section li')
-assert(els.length >= 5)
+const els = document.querySelectorAll('.main-section li');
+assert.isAtLeast(els.length, 5);
 ```
 
 你应该有一个 `id` 为 `navbar` 的 `nav` 元素。
 
 ```js
-const el = document.getElementById('navbar')
-assert(!!el && el.tagName === 'NAV')
+const el = document.getElementById('navbar');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'NAV');
 ```
 
 你的 `#navbar` 应该只有一个 `header` 元素。
 
 ```js
-const els = document.querySelectorAll('#navbar header')
-assert(els.length === 1)
+const els = document.querySelectorAll('#navbar header');
+assert.lengthOf(els, 1);
 ```
 
 你应该至少有一个 class 为 `nav-link` 的 `a` 元素。
 
 ```js
-const els = document.querySelectorAll('a.nav-link')
-assert(els.length >= 1)
+const els = document.querySelectorAll('a.nav-link');
+assert.isAtLeast(els.length, 1);
 ```
 
 你所有的 `.nav-link` 元素都应该是锚点（`a`）元素。
 
 ```js
-const els = document.querySelectorAll('.nav-link')
+const els = document.querySelectorAll('.nav-link');
 els.forEach(el => {
-  if (el.tagName !== 'A') assert(false)
-})
-assert(els.length > 0)
+  if (el.tagName !== 'A') assert.fail();
+});
+assert.isNotEmpty(els);
 ```
 
 你所有的 `.nav-link` 元素都应该在 `#navbar` 中。
 
 ```js
-const els1 = document.querySelectorAll('.nav-link')
-const els2 = document.querySelectorAll('#navbar .nav-link')
-assert(els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.nav-link');
+const els2 = document.querySelectorAll('#navbar .nav-link');
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 你应该有相同数量的 `.nav-link` 和 `.main-section` 元素。
 
 ```js
-const els1 = document.querySelectorAll('.main-section')
-const els2 = document.querySelectorAll('.nav-link')
-assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+const els1 = document.querySelectorAll('.main-section');
+const els2 = document.querySelectorAll('.nav-link');
+assert.isNotEmpty(els1);
+assert.isNotEmpty(els2);
+assert.strictEqual(els1.length, els2.length);
 ```
 
 `#navbar` 中的 `header` 元素必须在 `#navbar` 中的任何链接（`a`）之前。
@@ -177,54 +183,66 @@ assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
 ```js
 const navLinks = document.querySelectorAll('#navbar a.nav-link');
 const header = document.querySelector('#navbar header');
-navLinks.forEach((navLink) => {
+navLinks.forEach(navLink => {
   if (
-    (
-      header.compareDocumentPosition(navLink) &
-      Node.DOCUMENT_POSITION_PRECEDING
-    ) 
-  ) assert(false)
+    header.compareDocumentPosition(navLink) & Node.DOCUMENT_POSITION_PRECEDING
+  )
+    assert.fail();
 });
-assert(!!header)
+assert.isNotNull(header);
 ```
 
 每个 `.nav-link` 应该有与其相关 `section` 的 `header` 文本相对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的 `#navbar` 应该有一个 `.nav-link` 包含文本 “Hello world”）。
 
 ```js
-const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
-  el.firstElementChild?.innerText?.trim().toUpperCase()
-)
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(
+  el => el.firstElementChild?.innerText?.trim().toUpperCase()
+);
 const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
   el.innerText?.trim().toUpperCase()
-)
-const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
-assert(headerText.length > 0 && linkText.length > 0 && remainder.length === 0)
+);
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1);
+
+assert.isNotEmpty(headerText);
+assert.isNotEmpty(linkText);
+assert.isEmpty(remainder);
 ```
 
 每个 `.nav-link` 都应该有一个 `href` 属性，该属性链接到其对应的 `.main-section`（例如，如果你单击包含文本 “Hello world” 的 `.nav-link` 元素，页面导航到具有该 id 的 `section` 元素）。
 
 ```js
-const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
-const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
-const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
-assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.getAttribute('href')
+);
+const mainSectionIDs = Array.from(
+  document.querySelectorAll('.main-section')
+).map(el => el.id);
+const missingHrefValues = mainSectionIDs.filter(
+  str => hrefValues.indexOf('#' + str) === -1
+);
+assert.isNotEmpty(hrefValues);
+assert.isNotEmpty(mainSectionIDs);
+assert.isEmpty(missingHrefValues, 0);
 ```
 
 你的 `#navbar` 元素应该始终位于视口的顶部。
 
 ```js
-const el = document.getElementById('navbar')
-const left1 = el?.offsetLeft
-const left2 = el?.offsetLeft
-assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+const el = document.getElementById('navbar');
+const left1 = el?.offsetLeft;
+assert.isNotNull(el);
+assert.isAtLeast(left1, -15);
+assert.isAtMost(left1, 15);
 ```
 
 你的技术文档项目应该使用至少一个媒体查询。
 
 ```js
-const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
-const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
-assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el =>
+  el.getAttribute('media')
+);
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media');
+assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```
 
 # --seed--
@@ -234,17 +252,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Technical Documentation Page</title>
-</head>
-
-<body>
+  </head>
 
-</body>
+  <body>
 
-</html> 
+  </body>
+</html>
 ```
 
 ```css
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/chinese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index e22fcf0af8..5bda58acf4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -1,7 +1,7 @@
 ---
 id: 669e2f60e83c011754f711f9
 title: Build a Travel Agency Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-travel-agency-page
 demoType: onClick
 ---
@@ -42,7 +42,10 @@ assert.match(code, /<html\s+lang\s*=\s*('|")en\1\s*>[\s\S]*<\/\s*html\s*>/i);
 You should have a `head` element within the `html` element.
 
 ```js
-assert.match(code, /<html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i);
+assert.match(
+  code,
+  /<html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\/\s*html\s*>/i
+);
 ```
 
 You should have a `meta` element within your `head` element.
@@ -60,7 +63,10 @@ assert.match(code, /<\s*meta[\s\S]+?charset\s*=\s*('|")UTF-8\1/i);
 You should have `title` element within your `head` element.
 
 ```js
-assert.match(code, /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i);
+assert.match(
+  code,
+  /<\s*head\s*>[\s\S]*<\s*title\s*>[\s\S]*<\/\s*title\s*>[\s\S]*<\/\s*head\s*>/i
+);
 ```
 
 Your `title` element should have your travel agency name.
@@ -72,25 +78,30 @@ assert.isAbove(document.querySelector('title')?.innerText.trim().length, 0);
 You should have a `body` element within your `html` element.
 
 ```js
-assert(code.match(/<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i));
+assert.match(
+  code,
+  /<\s*html[\s\S]*>[\s\S]*<\s*head\s*>[\s\S]*<\/\s*head\s*>[\s\S]*<\s*body\s*>[\s\S]*<\/\s*body\s*>[\s\S]*<\/\s*html\s*>/i
+);
 ```
 
 You should have an `h1` element to present your travel destinations.
 
 ```js
-assert.isAbove(document.querySelector('h1')?.innerText.length, 0)
+assert.isAbove(document.querySelector('h1')?.innerText.length, 0);
 ```
 
 You should only have one `h1` element.
 
 ```js
-assert.lengthOf(document.querySelectorAll('h1'), 1)
+assert.lengthOf(document.querySelectorAll('h1'), 1);
 ```
 
 You should have a `p` element below the `h1` element.
 
 ```js
-assert.strictEqual(document.querySelector('h1')?.nextElementSibling, document.querySelector('p'))
+assert.strictEqual(
+  document.querySelector('h1')?.nextElementSibling.tagName, 'P'
+);
 ```
 
 Your first `p` element should introduce the travel opportunities.
@@ -108,34 +119,40 @@ assert.equal(document.querySelectorAll('h2')[0]?.innerText, 'Packages');
 You should have a `p` element below your first `h2` element.
 
 ```js
-assert.strictEqual(document.querySelector('h2')?.nextElementSibling, document.querySelectorAll('p')?.[1])
+assert.strictEqual(
+    document.querySelector('h2')?.nextElementSibling.tagName, 'P'
+);
 ```
 
 Your second `p` element should introduce briefly the various packages.
 
 ```js
-assert.isNotEmpty(document.querySelectorAll('p')?.[1]?.textContent?.trim())
+assert.isNotEmpty(document.querySelectorAll('p')?.[1]?.textContent?.trim());
 ```
 
 You should have an unordered list element below your second `p` element.
 
 ```js
-assert.strictEqual(document.querySelectorAll('p')?.[1]?.nextElementSibling?.tagName, 'UL');
+assert.strictEqual(
+  document.querySelectorAll('p')?.[1]?.nextElementSibling?.tagName,
+  'UL'
+);
 ```
 
 You should have two items in your unordered list.
 
 ```js
-assert.equal(document.querySelectorAll('li').length,  2);
+assert.lengthOf(document.querySelectorAll('p + ul li'), 2);
 ```
 
 Both your list items should contain an anchor element.
 
 ```js
-const listItems = $('li');
-assert(!!listItems.length);
+const listItems = document.querySelectorAll('li');
+assert.isNotEmpty(listItems);
 for (let e of listItems) {
-  assert(e.children[0].tagName === 'A' && e.children.length === 1);
+  assert.strictEqual(e.children[0].tagName, 'A');
+  assert.lengthOf(e.children, 1);
 }
 ```
 
@@ -154,88 +171,99 @@ assert.equal(document.querySelectorAll('a')[1]?.innerText, 'Private Tours');
 You should have an `h2` element after your unordered list.
 
 ```js
-assert($('h2')[1]?.previousElementSibling.tagName === 'UL');
+assert.strictEqual(
+  document.querySelectorAll('h2')[1]?.previousElementSibling.tagName,
+  'UL'
+);
 ```
 
 Your second `h2` element should have the text `Top Itineraries`.
 
 ```js
-assert.equal($('h2')[1]?.innerText, 'Top Itineraries');
+assert.equal(document.querySelectorAll('h2')[1]?.innerText, 'Top Itineraries');
 ```
 
 You should have at least three `figure` elements.
 
 ```js
-assert.isAtLeast(document.querySelectorAll('figure').length, 3)
+assert.isAtLeast(document.querySelectorAll('figure').length, 3);
 ```
 
 Each `figure` element should contain an anchor element as its first child.
 
 ```js
-const figures = $('figure');
-assert(!!figures.length);
+const figures = document.querySelectorAll('figure');
+assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[0].tagName,'A');
+  assert.equal(figure.children[0].tagName, 'A');
 }
 ```
 
 Each `figure` element should contain a `figcaption` element as its second child.
 
 ```js
-const figures = $('figure');
-assert(!!figures.length);
+const figures = document.querySelectorAll('figure');
+assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
+  assert.equal(figure.children[1]?.tagName, 'FIGCAPTION');
 }
 ```
 
+Each `figcaption` should contain some text.
+
+```js
+const figcaptionEls = document.querySelectorAll('figcaption');
+assert.isNotEmpty(figcaptionEls);
+figcaptionEls.forEach((figcaption => assert.isNotEmpty(figcaption.innerText)));
+```
+
 Each of the `a` elements that are children of your `figure` elements should contain an image.
 
 ```js
-const anchors = $('figure > a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('figure > a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-  assert.equal(anchor.children[0].tagName, 'IMG');
+  assert.equal(anchor.children[0]?.tagName, 'IMG');
 }
 ```
 
 Each `img` element should have a valid `src` attribute.
 
 ```js
-const images = $('img');
-assert(!!images.length);
+const images = document.querySelectorAll('img');
+assert.isNotEmpty(images);
 for (let image of images) {
-    assert.isAbove(image.src.length, 0);
+  assert.isAbove(image.src.length, 0);
 }
 ```
 
 Each `img` element should have an `alt` attribute with an appropriate value.
 
 ```js
-const images = $('img');
-assert(!!images.length);
+const images = document.querySelectorAll('img');
+assert.isNotEmpty(images);
 for (let image of images) {
-    assert.isAbove(image.alt.length, 0);
+  assert.isAbove(image.alt.length, 0);
 }
 ```
 
 Each `a` element should have an `href` attribute with the value of `https://www.freecodecamp.org/learn`.
 
 ```js
-const anchors = $('a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-    assert.equal(anchor.href, 'https://www.freecodecamp.org/learn');
+  assert.equal(anchor.href, 'https://www.freecodecamp.org/learn');
 }
 ```
 
 Each `a` element should have a `target` attribute with the value of `_blank`.
 
 ```js
-const anchors = $('a');
-assert(!!anchors.length);
+const anchors = document.querySelectorAll('a');
+assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-    assert.equal(anchor.target, '_blank');
+  assert.equal(anchor.target, '_blank');
 }
 ```
 
@@ -252,38 +280,64 @@ for (let anchor of anchors) {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>Travel Agency Page</title>
-    </head>
-    <body>
-        <h1>Discover Italy</h1>
-        <p>Art, folklore, food, nature, and more. Choose among our wide selection of guided tours and excursions, and live an unforgettable experience exploring Italy.</p>
-        <h2>Packages</h2>
-        <p>We offer an extensive range of holiday solutions to accommodate the needs of all our clients. From daily excursions in the most beautiful cities, to thorough tours of hidden villages and medieval towns to discover Italy's lesser-known sides.</p>
-        <ul>
-            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li>
-            <li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
-        </ul>
-        <h2>Top Itineraries</h2>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="colosseum view" >                
-            </a>
-            <figcaption>Rome and Center Italy</figcaption>
-        </figure>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="dolomites mountain view" >                
-            </a>
-            <figcaption>Nature and National Parks</figcaption>            
-        </figure>
-        <figure>
-            <a href="https://www.freecodecamp.org/learn" target="_blank">
-                <img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="sea view" >                
-            </a>
-            <figcaption>South Italy and Islands</figcaption>
-        </figure>                
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Travel Agency Page</title>
+  </head>
+  <body>
+    <h1>Discover Italy</h1>
+    <p>
+      Art, folklore, food, nature, and more. Choose among our wide selection of
+      guided tours and excursions, and live an unforgettable experience
+      exploring Italy.
+    </p>
+    <h2>Packages</h2>
+    <p>
+      We offer an extensive range of holiday solutions to accommodate the needs
+      of all our clients. From daily excursions in the most beautiful cities, to
+      thorough tours of hidden villages and medieval towns to discover Italy's
+      lesser-known sides.
+    </p>
+    <ul>
+      <li>
+        <a href="https://www.freecodecamp.org/learn" target="_blank"
+          >Group Travels</a
+        >
+      </li>
+      <li>
+        <a href="https://www.freecodecamp.org/learn" target="_blank"
+          >Private Tours</a
+        >
+      </li>
+    </ul>
+    <h2>Top Itineraries</h2>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg"
+          alt="colosseum view"
+        />
+      </a>
+      <figcaption>Rome and Center Italy</figcaption>
+    </figure>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg"
+          alt="dolomites mountain view"
+        />
+      </a>
+      <figcaption>Nature and National Parks</figcaption>
+    </figure>
+    <figure>
+      <a href="https://www.freecodecamp.org/learn" target="_blank">
+        <img
+          src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg"
+          alt="sea view"
+        />
+      </a>
+      <figcaption>South Italy and Islands</figcaption>
+    </figure>
+  </body>
 </html>
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md b/curriculum/challenges/chinese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
index f9ec4afc43..be97bf4981 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-tribute-page/bd7158d8c442eddfaeb5bd18.md
@@ -1,7 +1,7 @@
 ---
 id: bd7158d8c442eddfaeb5bd18
 title: 制作一个致敬页
-challengeType: 14
+challengeType: 25
 demoType: onClick
 dashedName: build-a-tribute-page
 ---
@@ -29,111 +29,125 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 你的页面应该包含一个 `main` 元素，且它有一个值为`main` 的`id`属性。
 
 ```js
-const el = document.getElementById('main')
-assert(!!el && el.tagName === 'MAIN')
+const el = document.getElementById('main');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'MAIN');
 ```
 
 你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 应该是 `#main` 的子元素。
 
 ```js
-const el1 = document.querySelector('#main #img-div')
-const el2 = document.querySelector('#main #image')
-const el3 = document.querySelector('#main #img-caption')
-const el4 = document.querySelector('#main #tribute-info')
-const el5 = document.querySelector('#main #tribute-link')
-assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+const el1 = document.querySelector('#main #img-div');
+const el2 = document.querySelector('#main #image');
+const el3 = document.querySelector('#main #img-caption');
+const el4 = document.querySelector('#main #tribute-info');
+const el5 = document.querySelector('#main #tribute-link');
+assert.isNotNull(el1);
+assert.isNotNull(el2);
+assert.isNotNull(el3);
+assert.isNotNull(el4);
+assert.isNotNull(el5);
 ```
 
 你应该有一个 `id` 为 `title` 的元素。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el)
+const el = document.getElementById('title');
+assert.isNotNull(el);
 ```
 
 你的 `#title` 元素不应为空。
 
 ```js
-const el = document.getElementById('title')
-assert(!!el && el.innerText.length > 0)
-
+const el = document.getElementById('title');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText, 0);
 ```
 
 你应该有一个 `id` 为 `img-div` 的 `figure` 或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-div')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+const el = document.getElementById('img-div');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGURE');
 ```
 
 你应该有一个 `id` 为 `image` 的 `img` 元素。
 
 ```js
-const el = document.getElementById('image')
-assert(!!el && el.tagName === 'IMG')
+const el = document.getElementById('image');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'IMG');
 ```
 
 你的 `#image` 元素应该是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #image')
-assert(!!el)
+const el = document.querySelector('#img-div #image');
+assert.isNotNull(el);
 ```
 
 你应该有一个 `id` 为 `img-caption` 的 `figcaption` 元素或 `div` 元素。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isTrue(el.tagName === 'DIV' || el.tagName === 'FIGCAPTION');
 ```
 
 你的 `#img-caption` 元素应该是 `#img-div` 元素的子元素。
 
 ```js
-const el = document.querySelector('#img-div #img-caption')
-assert(!!el)
+const el = document.querySelector('#img-div #img-caption');
+assert.isNotNull(el);
 ```
 
 你的 `#img-caption` 不应为空。
 
 ```js
-const el = document.getElementById('img-caption')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('img-caption');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你应该有一个 `id` 为 `tribute-info` 的元素。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
 ```
 
 你的 `#tribute-info` 不应为空。
 
 ```js
-const el = document.getElementById('tribute-info')
-assert(!!el && el.innerText.length > 0)
+const el = document.getElementById('tribute-info');
+assert.isNotNull(el);
+assert.isNotEmpty(el.innerText);
 ```
 
 你应该有一个 `id` 为 `tribute-link` 的 `a` 元素。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.tagName === 'A')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.tagName, 'A');
 ```
 
 你的 `#tribute-link` 应该有一个 `href` 属性和值。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && !!el.href && el.href.length > 0)
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.isNotNull(el.href);
+assert.isNotEmpty(el.href);
 ```
 
 你的 `#tribute-link` 元素应该有一个值为 `_blank` 的 `target` 属性。
 
 ```js
-const el = document.getElementById('tribute-link')
-assert(!!el && el.target === '_blank')
+const el = document.getElementById('tribute-link');
+assert.isNotNull(el);
+assert.strictEqual(el.target, '_blank');
 ```
 
 你的 `img` 元素应该具有 `display` 值为 `block`。
@@ -141,8 +155,8 @@ assert(!!el && el.target === '_blank')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('display')
-assert(style === 'block')
+const style = imgStyle?.getPropertyValue('display');
+assert.strictEqual(style, 'block');
 ```
 
 你的 `#image` 应该具有 `max-width` 值为 `100%`。
@@ -150,8 +164,8 @@ assert(style === 'block')
 ```js
 const img = document.getElementById('image');
 const imgStyle = window.getComputedStyle(img);
-const style = imgStyle?.getPropertyValue('max-width')
-assert(style === '100%')
+const style = imgStyle?.getPropertyValue('max-width');
+assert.strictEqual(style, '100%');
 ```
 
 你的 `#image` 应该具有 `height` 值为 `auto`。
@@ -163,9 +177,9 @@ const imgStyle = window.getComputedStyle(img);
 const oldDisplayValue = imgStyle.getPropertyValue('display');
 const oldDisplayPriority = imgStyle.getPropertyPriority('display');
 img?.style.setProperty('display', 'none', 'important');
-const heightValue = imgStyle?.getPropertyValue('height')
+const heightValue = imgStyle?.getPropertyValue('height');
 img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
-assert(heightValue === 'auto')
+assert.strictEqual(heightValue, 'auto');
 ```
 
 你的 `#image` 元素应该在其父元素内居中。
@@ -180,7 +194,8 @@ const img = document.getElementById('image'),
   parentRight = imgParent?.getBoundingClientRect().right,
   leftMargin = imgLeft - parentLeft,
   rightMargin = parentRight - imgRight;
-assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+assert.isBelow(leftMargin - rightMargin, 6);
+assert.isBelow(rightMargin - leftMargin, 6);
 ```
 
 # --seed--
@@ -190,16 +205,12 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Tribute Page</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
+  <body></body>
 </html>
 ```
 
@@ -253,7 +264,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
             <strong>1938</strong> - Marries wife of 69 years Margret Gibson.
             Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman,
             he returns to school study under Stakman, who teaches him about
-            breeding pest-resistent plants.
+            breeding pest-resistant plants.
           </li>
           <li>
             <strong>1941</strong> - Tries to enroll in the military after the
@@ -269,7 +280,7 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
             <strong>1944</strong> - Rejects a 100% salary increase from Dupont,
             leaves behind his pregnant wife, and flies to Mexico to head a new
             plant pathology program. Over the next 16 years, his team breeds
-            6,000 different strains of disease resistent wheat - including
+            6,000 different strains of disease resistant wheat - including
             different varieties for each major climate on Earth.
           </li>
           <li>
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md b/curriculum/challenges/chinese/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
index abb0a9eadf..067b7b8c17 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md
@@ -1,7 +1,7 @@
 ---
 id: 669e81368e52b3a5c35a2dc5
 title: Build a Video Compilation Page
-challengeType: 14
+challengeType: 25
 dashedName: build-a-video-compilation-page
 demoType: onClick
 ---
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md b/curriculum/challenges/chinese/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
index afe533d6f5..e86fb0152f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-voting-system/673b567e3ba535dda140d278.md
@@ -1,7 +1,7 @@
 ---
 id: 673b567e3ba535dda140d278
 title: Build a Voting System
-challengeType: 14
+challengeType: 25
 dashedName: build-a-voting-system
 ---
 
@@ -35,8 +35,7 @@ In this lab, you will build a voting system that uses `Map` to create a poll and
 
    - If the voter has already voted, the function should display the message `Voter <voterId> has already voted for "<option>".`
 
-   - If the voter has not voted, `voterId` should be added to the `Set` of `voters` for this option. The function should return the message  `Voter <voterId> voted for "<option>".`
-
+   - If the voter has not voted, `voterId` should be added to the `Set` of `voters` for this option. The function should return the message `Voter <voterId> voted for "<option>".`
 
 6. You should have at least three options in your `poll`.
 
@@ -51,7 +50,7 @@ OptionB: N votes
 .
 .
 
-/* 
+/*
 sample output
 
 Poll Results:
@@ -115,9 +114,8 @@ const pollCopy = new Map(poll);
 try {
   poll.clear();
 
-  addOption("Turkey");
-  assert.instanceOf(poll.get("Turkey"), Set);
-
+  addOption('Turkey');
+  assert.instanceOf(poll.get('Turkey'), Set);
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -132,7 +130,7 @@ try {
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  assert.equal(addOption("Egypt"), 'Option "Egypt" added to the poll.');
+  assert.equal(addOption('Egypt'), 'Option "Egypt" added to the poll.');
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -144,7 +142,7 @@ try {
 Adding an empty option should return `"Option cannot be empty."`
 
 ```js
-assert.equal(addOption(""), 'Option cannot be empty.');
+assert.equal(addOption(''), 'Option cannot be empty.');
 ```
 
 When `Turkey` is already added, `addOption("Turkey")` should return `Option "Turkey" already exists.`
@@ -153,10 +151,9 @@ When `Turkey` is already added, `addOption("Turkey")` should return `Option "Tur
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  addOption("Turkey");
-  assert.equal(addOption("Turkey"), 'Option "Turkey" already exists.');
-
+  addOption('Turkey');
+  addOption('Turkey');
+  assert.equal(addOption('Turkey'), 'Option "Turkey" already exists.');
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -171,8 +168,11 @@ When `Malysia` exists in the voting options, `vote("Malysia", "traveler1")` shou
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Malysia");
-  assert.equal(vote("Malysia", "traveler1"), 'Voter traveler1 voted for "Malysia".');
+  addOption('Malysia');
+  assert.equal(
+    vote('Malysia', 'traveler1'),
+    'Voter traveler1 voted for "Malysia".'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -187,11 +187,10 @@ try {
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Alaska");
-  vote("Alaska", "seal");
-  assert.isTrue(poll.get("Alaska").has("seal"));
-
-  } finally {
+  addOption('Alaska');
+  vote('Alaska', 'seal');
+  assert.isTrue(poll.get('Alaska').has('seal'));
+} finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
     poll.set(key, val);
@@ -205,9 +204,12 @@ When `traveler1` tries to vote for `Algeria` again, `vote("Algeria", "traveler1"
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Algeria");
-  vote("Algeria", "traveler1");
-  assert.equal(vote("Algeria", "traveler1"), 'Voter traveler1 has already voted for "Algeria".');
+  addOption('Algeria');
+  vote('Algeria', 'traveler1');
+  assert.equal(
+    vote('Algeria', 'traveler1'),
+    'Voter traveler1 has already voted for "Algeria".'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -222,12 +224,12 @@ Duplicate votes should not increase the size of the `Set`.
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  vote("Turkey", "traveler1");
-  const voterSet = poll.get("Turkey");
+  addOption('Turkey');
+  vote('Turkey', 'traveler1');
+  const voterSet = poll.get('Turkey');
   const initialSize = voterSet.size;
 
-  vote("Turkey", "traveler1");
+  vote('Turkey', 'traveler1');
   assert.equal(voterSet.size, initialSize);
 } finally {
   poll.clear();
@@ -243,7 +245,10 @@ When `Nigeria` is not in the voting options, `vote("Nigeria", "traveler2")` shou
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-assert.equal(vote("Nigeria", "traveler2"), 'Option "Nigeria" does not exist.');
+  assert.equal(
+    vote('Nigeria', 'traveler2'),
+    'Option "Nigeria" does not exist.'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -258,10 +263,10 @@ A unique option should be able to receive multiple votes.
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Bali");
-  assert.equal(vote("Bali", "traveler1"), 'Voter traveler1 voted for "Bali".');
-  assert.equal(vote("Bali", "traveler2"), 'Voter traveler2 voted for "Bali".');
-  assert.equal(poll.get("Bali").size, 2);
+  addOption('Bali');
+  assert.equal(vote('Bali', 'traveler1'), 'Voter traveler1 voted for "Bali".');
+  assert.equal(vote('Bali', 'traveler2'), 'Voter traveler2 voted for "Bali".');
+  assert.equal(poll.get('Bali').size, 2);
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -273,18 +278,20 @@ try {
 `displayResults()` should return the results in the correct format.
 
 ```js
-
 const pollCopy = new Map(poll);
 try {
   poll.clear();
-  addOption("Turkey");
-  addOption("Morocco");
+  addOption('Turkey');
+  addOption('Morocco');
 
-  vote("Turkey", "traveler1");
-  vote("Turkey", "traveler2");
-  vote("Morocco", "traveler3");
+  vote('Turkey', 'traveler1');
+  vote('Turkey', 'traveler2');
+  vote('Morocco', 'traveler3');
 
-  assert.equal(displayResults(), "Poll Results:\nTurkey: 2 votes\nMorocco: 1 votes");
+  assert.equal(
+    displayResults(),
+    'Poll Results:\nTurkey: 2 votes\nMorocco: 1 votes'
+  );
 } finally {
   poll.clear();
   pollCopy.forEach((val, key) => {
@@ -307,8 +314,8 @@ try {
 const poll = new Map();
 
 function addOption(option) {
-  if (!option || option.trim() === "") {
-    return "Option cannot be empty.";
+  if (!option || option.trim() === '') {
+    return 'Option cannot be empty.';
   }
   if (!poll.has(option)) {
     poll.set(option, new Set());
@@ -318,7 +325,6 @@ function addOption(option) {
   }
 }
 
-
 function vote(option, voterId) {
   if (!poll.has(option)) {
     return `Option "${option}" does not exist.`;
@@ -327,26 +333,24 @@ function vote(option, voterId) {
   if (voters.has(voterId)) {
     return `Voter ${voterId} has already voted for "${option}".`;
   } else {
-    voters.add(voterId); 
+    voters.add(voterId);
     return `Voter ${voterId} voted for "${option}".`;
   }
 }
 
 function displayResults() {
-    let results = "Poll Results:\n";
-    for (let [option, voters] of poll.entries()) {
-        results += `${option}: ${voters.size} votes\n`;
-    }
-    return results.trim();
+  let results = 'Poll Results:\n';
+  for (let [option, voters] of poll.entries()) {
+    results += `${option}: ${voters.size} votes\n`;
+  }
+  return results.trim();
 }
 
+addOption('Turkey');
+addOption('Morocco');
+addOption('Spain');
 
-addOption("Turkey");
-addOption("Morocco");
-addOption("Spain");
-
-vote("Turkey", "traveler1");
-vote("Turkey", "traveler2");
-vote("Morocco", "traveler3");
-
+vote('Turkey', 'traveler1');
+vote('Turkey', 'traveler2');
+vote('Morocco', 'traveler3');
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md b/curriculum/challenges/chinese/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
index d07e1c609d..ad5b97d0cd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
@@ -1,7 +1,7 @@
 ---
 id: 66f12a88741aeb16b9246c59
 title: Build a Weather App
-challengeType: 14
+challengeType: 25
 dashedName: lab-weather-app
 demoType: onClick
 ---
@@ -27,7 +27,7 @@ You will use a weather API. The output data has the following format:
     "temp_min": 1.72, // min temperature of the day in C
     "temp_max": 3.49, // max temperature of the day in C
     "pressure": 1010, // atmospheric pressure in hPa
-    "humidity": 81, // humidity in %
+    "humidity": 81 // humidity in %
   },
   "visibility": 10000, // distance in meters
   "wind": {
@@ -35,7 +35,7 @@ You will use a weather API. The output data has the following format:
     "deg": 285, // orientation of the wind in degrees
     "gust": 3.13 // gust speed in m/s
   },
-  "name": "London",
+  "name": "London"
 }
 ```
 
@@ -43,7 +43,8 @@ You will use a weather API. The output data has the following format:
 
 1. You should have a `button` element with an `id` of `get-forecast`.
 
-1. You should have a `select` element with seven `option` elements nested within it. The first option should have an empty string as its text and `value` attribute. The rest should have the follow for their text and values (with the value being lowercase):
+1. You should have a `select` element with seven `option` elements nested within it. The first option should have an empty string as its text and `value` attribute. The rest should have the following for their text and values (with the value being lowercase):
+
    - New York
    - Los Angeles
    - Chicago
@@ -105,105 +106,112 @@ Inside the `select` element the first child should be an `option` element with a
 
 ```js
 assert.exists(document.querySelector('select > option[value=""]'));
-assert.strictEqual(document.querySelector('select > option:first-child').value, "");
+assert.strictEqual(
+  document.querySelector('select > option:first-child').value,
+  ''
+);
 ```
 
 Inside the `select` element there should be 6 `option` elements, one for each of the following cities: Paris, London, Tokyo, Los Angeles, Chicago, New York.
 
 ```js
-["Paris", "London", "Tokyo", "Los Angeles", "Chicago", "New York"].forEach(city => {
-    const el = document.querySelector(`select > option[value="${city.toLowerCase()}"]`);
+['Paris', 'London', 'Tokyo', 'Los Angeles', 'Chicago', 'New York'].forEach(
+  city => {
+    const el = document.querySelector(
+      `select > option[value="${city.toLowerCase()}"]`
+    );
     assert.exists(el);
-    assert.strictEqual(el.innerText.trim(), city)
-});
+    assert.strictEqual(el.innerText.trim(), city);
+  }
+);
 ```
 
 You should have an `img` element with the id `weather-icon` for displaying the weather icon.
 
 ```js
 async () => {
-    document.querySelector('select').value = "chicago";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("img#weather-icon"));
-}
+  document.querySelector('select').value = 'chicago';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('img#weather-icon'));
+};
 ```
 
 You should have an element with the id `main-temperature` for displaying the main temperature.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#main-temperature"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#main-temperature'));
+};
 ```
 
 You should have an element with the id `feels-like` for displaying what the temperature feels like.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#feels-like"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#feels-like'));
+};
 ```
 
 You should have an element with the id `humidity` for displaying the amount of humidity in air.
 
 ```js
 async () => {
-    document.querySelector('select').value = "london";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#humidity"));
-}
+  document.querySelector('select').value = 'london';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#humidity'));
+};
 ```
 
 You should have an element with the id `wind` element for displaying the wind speed.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#wind"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#wind'));
+};
 ```
 
 You should have an element with the id `wind-gust` element for displaying the wind gust.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#wind-gust"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#wind-gust'));
+};
 ```
 
 You should have an element with the id `weather-main` element for displaying the main weather type.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#weather-main"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#weather-main'));
+};
 ```
 
 You should have an element with the id `location` element for displaying the current location.
 
 ```js
 async () => {
-    document.querySelector('select').value = "new york";
-    document.querySelector('#get-forecast').click();
-    await new Promise(resolve => setTimeout(resolve, 800));
-    assert.exists(document.querySelector("#location"));
-}
+  document.querySelector('select').value = 'new york';
+  document.querySelector('#get-forecast').click();
+  await new Promise(resolve => setTimeout(resolve, 800));
+  assert.exists(document.querySelector('#location'));
+};
 ```
 
 You should have a `showWeather` function.
@@ -222,261 +230,288 @@ The `getWeather` function should accept a city as it's only argument and return
 
 ```js
 async () => {
-    try {
-        const city = "chicago";
-        const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
-        const outputFunction = await getWeather(city);
-        const json = await fetch(url).then(data => data.json());
-        assert.deepEqual(outputFunction, json)
-    } catch (err) {
-        throw new Error(err);
-    }
-}
+  try {
+    const city = 'chicago';
+    const url = `https://weather-proxy.freecodecamp.rocks/api/city/${city}`;
+    const outputFunction = await getWeather(city);
+    const json = await fetch(url).then(data => data.json());
+    assert.deepEqual(outputFunction, json);
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 The `showWeather` function should call the `getWeather` function to get the weather data.
 
 ```js
 async () => {
-    try {
-        let flag = false;
-        const temp = getWeather;
-        getWeather = async (location) => {
-            flag = true;
-            return await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${location}`).then(data => data.json())
-        }
-        await showWeather("london");
-        getWeather = temp;
-        assert.isTrue(flag)
-    } catch (err) {
-        throw new Error(err);
-    }
-}
+  try {
+    let flag = false;
+    const temp = getWeather;
+    getWeather = async location => {
+      flag = true;
+      return await fetch(
+        `https://weather-proxy.freecodecamp.rocks/api/city/${location}`
+      ).then(data => data.json());
+    };
+    await showWeather('london');
+    getWeather = temp;
+    assert.isTrue(flag);
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When New York is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "new york";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'new york';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Chicago is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "chicago";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'chicago';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When London is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "london";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'london';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Tokyo is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "tokyo";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'tokyo';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 When Los Angeles is selected the `showWeather` function should display the data from the API in the respective HTML elements. If the value from the API is `undefined`, you should show `N/A`.
 
 ```js
 async () => {
-    try {
-        // function that construct an object with the id-value pairs that we expect in the page from an object
-        const helper = (wobj) => ({
-            "weather-icon": wobj.weather[0].icon,
-            "main-temperature": wobj.main.temp || 'N/A',
-            "feels-like": wobj.main.feels_like || 'N/A',
-            humidity: wobj.main.humidity || 'N/A',
-            wind: wobj.wind.speed || 'N/A',
-            "wind-gust": wobj.wind.gust || 'N/A',
-            "weather-main": wobj.weather[0].main || 'N/A',
-            location: wobj.name || 'N/A'
-        })
-        const city = "los angeles";
-        document.querySelector('select').value = city;
-        document.querySelector('#get-forecast').click();
-
-
-        // fetch the expected values from the API to confront
-        const body = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`).then(
-            data => data.json()
-        )
-
-        await new Promise(resolve => setTimeout(resolve, 800));
-
-        // construct the object from the data from the API
-        const extractedData = helper(body);
-
-        // check that all things are in place
-        for (const id in extractedData) {
-            if (id === "weather-icon") {
-                assert.equal(document.querySelector('#weather-icon').src, extractedData[id]);
-            } else {
-                assert.include(document.querySelector(`#${id}`).innerText.toLowerCase(), `${extractedData[id]}`.toLowerCase());
-            }
-        }
-    } catch (err) {
-        throw new Error(err);
+  try {
+    // function that construct an object with the id-value pairs that we expect in the page from an object
+    const helper = wobj => ({
+      'weather-icon': wobj.weather[0].icon,
+      'main-temperature': wobj.main.temp || 'N/A',
+      'feels-like': wobj.main.feels_like || 'N/A',
+      humidity: wobj.main.humidity || 'N/A',
+      wind: wobj.wind.speed || 'N/A',
+      'wind-gust': wobj.wind.gust || 'N/A',
+      'weather-main': wobj.weather[0].main || 'N/A',
+      location: wobj.name || 'N/A'
+    });
+    const city = 'los angeles';
+    document.querySelector('select').value = city;
+    document.querySelector('#get-forecast').click();
+
+    // fetch the expected values from the API to confront
+    const body = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    ).then(data => data.json());
+
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    // construct the object from the data from the API
+    const extractedData = helper(body);
+
+    // check that all things are in place
+    for (const id in extractedData) {
+      if (id === 'weather-icon') {
+        assert.equal(
+          document.querySelector('#weather-icon').src,
+          extractedData[id]
+        );
+      } else {
+        assert.include(
+          document.querySelector(`#${id}`).innerText.toLowerCase(),
+          `${extractedData[id]}`.toLowerCase()
+        );
+      }
     }
-}
+  } catch (err) {
+    throw new Error(err);
+  }
+};
 ```
 
 If there is an error, your `getWeather` function should log the error to the console.
@@ -490,11 +525,17 @@ const temp4 = alert;
 async () => {
   try {
     alert = () => {};
-    console.log = obj => {testArr.push(obj.toString())};
-    console.error = obj => {testArr.push(obj.toString())};
-    fetch = source => {throw new Error("This is a test error");}
-    await getWeather("chicago");
-    assert.include(testArr[0], "This is a test error");
+    console.log = obj => {
+      testArr.push(obj.toString());
+    };
+    console.error = obj => {
+      testArr.push(obj.toString());
+    };
+    fetch = source => {
+      throw new Error('This is a test error');
+    };
+    await getWeather('chicago');
+    assert.include(testArr[0], 'This is a test error');
     assert.lengthOf(testArr, 1);
   } finally {
     fetch = temp1;
@@ -502,7 +543,7 @@ async () => {
     console.error = temp3;
     alert = temp4;
   }
-}
+};
 ```
 
 When Paris is selected the app should show an alert with `Something went wrong, please try again later`.
@@ -512,17 +553,19 @@ const testArr = [];
 const temp4 = alert;
 async () => {
   try {
-    alert = (msg) => {testArr.push(msg)};
-    const city = "paris";
+    alert = msg => {
+      testArr.push(msg);
+    };
+    const city = 'paris';
     document.querySelector('select').value = city;
     document.querySelector('#get-forecast').click();
     await new Promise(resolve => setTimeout(resolve, 800));
-    assert.include(testArr[0], "Something went wrong, please try again later");
+    assert.include(testArr[0], 'Something went wrong, please try again later');
     assert.lengthOf(testArr, 1);
   } finally {
     alert = temp4;
   }
-}
+};
 ```
 
 # --seed--
@@ -530,20 +573,15 @@ async () => {
 ## --seed-contents--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Weather App</title>
-</head>
-
-<body>
-
-</body>
+  </head>
 
+  <body></body>
 </html>
-
 ```
 
 ```css
@@ -557,68 +595,66 @@ async () => {
 # --solutions--
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Weather App</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
 
-<body>
+  <body>
     <div class="weather-info-wrap">
-        <div id="weather-info">
-            <div id="location"></div>
-            <div class="primary-info">
-                <div class="primary-info-left" id="main-temperature"></div>
-                <div class="primary-info-right">
-                    <img id="weather-icon" >
-                    <div id="weather-main"></div>
-                </div>
+      <div id="weather-info">
+        <div id="location"></div>
+        <div class="primary-info">
+          <div class="primary-info-left" id="main-temperature"></div>
+          <div class="primary-info-right">
+            <img id="weather-icon" />
+            <div id="weather-main"></div>
+          </div>
+        </div>
+        <hr />
+        <div class="secondary-info">
+          <div class="secondary-info-top">
+            <div id="humidity"></div>
+            <div id="feels-like"></div>
+          </div>
+          <div class="secondary-info-bottom">
+            <div class="secondary-info-bottom-left">
+              <div id="wind"></div>
+              <div id="wind-gust"></div>
             </div>
-            <hr >
-            <div class="secondary-info">
-                <div class="secondary-info-top">
-                    <div id="humidity"></div>
-                    <div id="feels-like"></div>
-                </div>
-                <div class="secondary-info-bottom">
-                    <div class="secondary-info-bottom-left">
-                        <div id="wind"></div>
-                        <div id="wind-gust"></div>
-                    </div>
-                    <div class="secondary-info-bottom-right" id="compass">
-                        <span id="compass-arrow">
-                            <span class="arrow-head"></span>
-                        </span>
-                        <span class="compass-direction north"></span>
-                        <span class="compass-direction east"></span>
-                        <span class="compass-direction south"></span>
-                        <span class="compass-direction west"></span>
-                    </div>
-                </div>
+            <div class="secondary-info-bottom-right" id="compass">
+              <span id="compass-arrow">
+                <span class="arrow-head"></span>
+              </span>
+              <span class="compass-direction north"></span>
+              <span class="compass-direction east"></span>
+              <span class="compass-direction south"></span>
+              <span class="compass-direction west"></span>
             </div>
+          </div>
         </div>
+      </div>
     </div>
 
     <div class="btn-wrap">
-        <span>Weather for:</span>
-        <select id="location-selector">
-            <option value=""></option>
-            <option value="new york">New York</option>
-            <option value="los angeles">Los Angeles</option>
-            <option value="chicago">Chicago</option>
-            <option value="paris">Paris</option>
-            <option value="tokyo">Tokyo</option>
-            <option value="london">London</option>
-        </select>
-        <button id="get-forecast">Get Forecast</button>
+      <span>Weather for:</span>
+      <select id="location-selector">
+        <option value=""></option>
+        <option value="new york">New York</option>
+        <option value="los angeles">Los Angeles</option>
+        <option value="chicago">Chicago</option>
+        <option value="paris">Paris</option>
+        <option value="tokyo">Tokyo</option>
+        <option value="london">London</option>
+      </select>
+      <button id="get-forecast">Get Forecast</button>
     </div>
 
     <script type="text/javascript" src="script.js"></script>
-</body>
-
+  </body>
 </html>
 ```
 
@@ -648,7 +684,7 @@ body {
   padding: 20px;
   border-radius: 10px;
   background-color: #6cd488;
-  box-shadow: 6px 6px 6px rgba(0,0,0,0.5);
+  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
 }
 
 .btn-wrap > span {
@@ -658,7 +694,7 @@ body {
 }
 
 .btn-wrap > span::first-letter {
-  font-size: 1.3em
+  font-size: 1.3em;
 }
 
 #location-selector {
@@ -682,7 +718,7 @@ body {
   background-color: #eee;
   border-radius: 10px;
   border: 2px solid black;
-  box-shadow: 6px 6px 6px rgba(0,0,0,0.5);
+  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
 }
 
 #weather-info {
@@ -781,13 +817,15 @@ body {
   background-color: black;
 }
 
-.north, .south {
+.north,
+.south {
   width: 3px;
   height: 8px;
   left: 50%;
 }
 
-.east, .west {
+.east,
+.west {
   width: 8px;
   height: 3px;
   top: 50%;
@@ -825,20 +863,16 @@ const mainEl = document.getElementById('weather-main');
 const locationEl = document.getElementById('location');
 const arrowEl = document.getElementById('compass-arrow');
 
-getForecastBtn.addEventListener('click', () =>
-  selectEl.value && showWeather(selectEl.value)
+getForecastBtn.addEventListener(
+  'click',
+  () => selectEl.value && showWeather(selectEl.value)
 );
 
 async function showWeather(city) {
   const json = await getWeather(city);
   const {
     weather,
-    main:
-    { 
-      temp,
-      feels_like,
-      humidity
-    },
+    main: { temp, feels_like, humidity },
     wind: { speed, gust, deg = 0 },
     name
   } = json;
@@ -861,7 +895,9 @@ async function showWeather(city) {
 
 async function getWeather(city) {
   try {
-    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
+    const response = await fetch(
+      `https://weather-proxy.freecodecamp.rocks/api/city/${city}`
+    );
 
     if (!response.ok) {
       alert('Something went wrong, please try again later');
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md b/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md
index 69365f03d5..dade1e5cbe 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672aa8d65995be62ef1c7515.md
@@ -2,7 +2,7 @@
 id: 672aa8d65995be62ef1c7515
 title: What Are CSS Animations, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: dryjwjTQllk
 dashedName: what-are-css-animations
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md b/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md
index ed4b6d0586..7aed75cda6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-animations-and-accessibility/672cf764cf55a70433590def.md
@@ -2,7 +2,7 @@
 id: 672cf764cf55a70433590def
 title: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bKM3ZhO5Sns
 dashedName: what-are-accessibility-concerns-around-using-animations
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
index 267796bc59..562e010a29 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672aa82768e00d600305afc0.md
@@ -2,7 +2,7 @@
 id: 672aa82768e00d600305afc0
 title: What Are Some Tools to Check for Good Color Contrast on Sites?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2qj6LcJ4wSk
 dashedName: what-are-some-tools-to-check-for-good-color-contrast-on-sites
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
index 830ac0e056..b72ed7b123 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-accessibility-and-css/672c35a79fa53e00de9f2a49.md
@@ -2,7 +2,7 @@
 id: 672c35a79fa53e00de9f2a49
 title: "What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible?"
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ycYVairxSdQ
 dashedName: what-are-best-practices-for-hiding-content-so-it-doesnt-become-inaccessible
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which CSS property hides content visually but keeps it in the document flow and accessible to screen readers?
+What is the main accessibility issue when using the `display: none` and `visibility: hidden` style declarations, or the `hidden` attribute to hide content?
 
 ## --answers--
 
-`display: none;`
+These methods make it so that only assistive technologies like screen readers can access the hidden content.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ---
 
-`visibility: hidden;`
+Content is only hidden until users move their mouse over the content.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ---
 
-`opacity: 0;`
+These methods remove the content from the accessibility tree, making it impossible for assistive technologies like screen readers to access the hidden content.
 
 ---
 
-`position: absolute; left: -9999px;`
+These methods do not work with some browsers.
 
 ### --feedback--
 
-Think about which property affects layout but not screen reader access.
+Think about the accessibility concern each of these methods has in common.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Think about which property affects layout but not screen reader access.
 
 ## --text--
 
-What is the primary purpose of the "visually hidden" or "sr-only" CSS technique?
+What is the primary purpose of the "visually hidden" or "screen reader only" CSS technique?
 
 ## --answers--
 
@@ -86,35 +86,35 @@ Consider the needs of users who rely on screen readers.
 
 ## --text--
 
-When using the aria-hidden attribute, what effect does it have on content?
+When should you hide content on a web page?
 
 ## --answers--
 
-It makes the content invisible.
+When the content you're hiding is less important than other content on the page.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ---
 
-It removes the content from the DOM.
+When the content you're hiding is incorrect.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ---
 
-It tells assistive technologies to ignore the content.
+Only when it genuinely enhances the user experience.
 
 ---
 
-It makes the content unclickable.
+Whenever you feel like it.
 
 ### --feedback--
 
-Think about how this attribute affects the accessibility tree.
+Think about how hiding content affects accessibility and the user experience as a whole.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
index 173f6f75f9..0753e48d5b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672aa8873d4e25618870764f.md
@@ -2,7 +2,7 @@
 id: 672aa8873d4e25618870764f
 title: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ISOf41vPNJY
 dashedName: what-is-responsive-web-design
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
index 0ec7c2c62c..f33675391c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf05c3ad533eabe1e8197.md
@@ -2,7 +2,7 @@
 id: 672cf05c3ad533eabe1e8197
 title: How Do Media Queries Work, and What Are Some Common Media Types and Features?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1h0QErJG8DE
 dashedName: how-do-media-queries-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
index 8b78e23cc7..8c41d92a3b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf06c8f46f9eb04db9832.md
@@ -2,7 +2,7 @@
 id: 672cf06c8f46f9eb04db9832
 title: What Is the Mobile First Approach in Responsive Web Design?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BuCdyShUzKQ
 dashedName: what-is-the-mobile-first-approach-in-responsive-web-design
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
index 2537cf3d3a..bd51cfa98d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-best-practices-for-responsive-web-design/672cf07a2b9796eb49719e03.md
@@ -2,7 +2,7 @@
 id: 672cf07a2b9796eb49719e03
 title: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: R0hiJEAXGIk
 dashedName: what-are-media-breakpoints
 ---
 
@@ -50,35 +50,35 @@ Think about how websites adapt to various device sizes.
 
 ## --text--
 
-In a mobile-first approach, which type of media query is typically used for breakpoints?
+Which of the following is a commonly used breakpoint for smaller devices like smart phones?
 
 ## --answers--
 
-`max-width`
+1640px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ---
 
-`min-width`
+640px
 
 ---
 
-`max-height`
+1200px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ---
 
-`min-height`
+2000px
 
 ### --feedback--
 
-Consider how styles are added as screen sizes increase from mobile to desktop.
+Review the beginning of the video to see where this was discussed.
 
 ## --video-solution--
 
@@ -114,7 +114,7 @@ Think about which screen resolution is less commonly targeted in responsive desi
 
 ---
 
-`2560px` (4K displays).
+`6000px` (really large device).
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md b/curriculum/challenges/chinese/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
index 8195e78587..135ed5b519 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-browsing-the-web-effectively/672ac9705b07a64439b73b59.md
@@ -62,7 +62,7 @@ Remember the example given for searching for freeCodeCamp content while excludin
 
 ---
 
-`
+`` ` ``
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md
index 1f8865f3c2..b201185a11 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-common-design-tools/672bb619f0d4538d0528760d.md
@@ -94,7 +94,7 @@ Complex video editing features.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ---
 
@@ -106,7 +106,7 @@ Being a raster-based image editor.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ---
 
@@ -114,7 +114,7 @@ Specialized 3D modeling capabilities.
 
 ### --feedback--
 
-Consider Adobe XD’s primary use in UI/UX design and its relationship with other Adobe tools.
+Consider Adobe XD's primary use in UI/UX design and its relationship with other Adobe tools.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
index 0b6eb0b1b0..b17cee5c3f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733aa9b006d29f4d11307a5.md
@@ -2,7 +2,7 @@
 id: 6733aa9b006d29f4d11307a5
 title: What Are Some Examples of Common JavaScript Errors?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: e5P8nJkOSMQ
 dashedName: what-are-some-examples-of-common-javascript-errors
 ---
 
@@ -22,15 +22,15 @@ Trying to call a variable like a function.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ---
 
-Trying to use a value that’s out of range.
+Trying to use a value that's out of range.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ---
 
@@ -38,11 +38,11 @@ Writing something incorrectly in your code, like missing a parenthesis or semico
 
 ---
 
-Accessing a variable before it’s declared.
+Accessing a variable before it's declared.
 
 ### --feedback--
 
-It’s like grammar for your code.
+It's like grammar for your code.
 
 ## --video-solution--
 
@@ -58,7 +58,7 @@ What will happen if you try to call a variable that holds a number as if it were
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ---
 
@@ -66,7 +66,7 @@ The error happens because the variable is being treated like a function when it
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ---
 
@@ -78,7 +78,7 @@ The error happens because the variable is being treated like a function when it
 
 ### --feedback--
 
-The error happens because the variable is being treated like a function when it’s not.
+The error happens because the variable is being treated like a function when it's not.
 
 ## --video-solution--
 
@@ -86,7 +86,7 @@ The error happens because the variable is being treated like a function when it
 
 ## --text--
 
-Which error occurs when you try to access an array index that doesn’t exist?
+Which error occurs when you try to access an array index that doesn't exist?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
index bafabd33d8..2118071aa6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bec70d86e13522e98a4f.md
@@ -2,7 +2,7 @@
 id: 6733bec70d86e13522e98a4f
 title: How Does the Throw Statement Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: vNlPchT8nr8
 dashedName: how-does-the-throw-statement-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
index 2623a2c2a9..191090dd59 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733becf4b0c353553b9bfa4.md
@@ -2,7 +2,7 @@
 id: 6733becf4b0c353553b9bfa4
 title: How Does the Debugger Statement Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gn0q7gXiMRo
 dashedName: how-does-the-debugger-statement-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
index f5c68460bd..cc678b1164 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733bee844600f35c05b8264.md
@@ -2,7 +2,7 @@
 id: 6733bee844600f35c05b8264
 title: How Does try...catch...finally Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _3whfUfxGYI
 dashedName: how-does-try-catch-finally-work
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which of the following is a common use case for `try…catch…finally` in JavaScript?
+What best describes the `try` block?
 
 ## --answers--
 
-Creating new HTML elements.
+It’s for running code again automatically after an error occurs.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Styling a webpage using CSS.
+It’s for handling errors.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Declaring variables.
+It’s for setup before an error is thrown.
 
 ### --feedback--
 
-Think about error handling when interacting with external data sources.
+Think about the order of blocks in `try…catch…finally` statements, and the types of tasks each block handles.
 
 ---
 
-Handling API requests.
+It’s a safe wrapper for code that might throw an error.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
index 49e7be346e..a6d2d7a98d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-debugging-techniques/6733befb703ca6361da3755b.md
@@ -2,7 +2,7 @@
 id: 6733befb703ca6361da3755b
 title: What Are Some Examples of Using Advanced JavaScript Debugging Techniques?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: hHWAQYXRvxs
 dashedName: what-are-some-examples-of-using-advanced-javascript-debugging-techniques
 ---
 
@@ -86,35 +86,35 @@ Think about tracking variables across different parts of the code.
 
 ## --text--
 
-What statement works like a breakpoint in JavaScript, pausing execution for inspection?
+What method can you use to see an interactive list of properties for the JavaScript object you pass in?
 
 ## --answers--
 
-`throw`
+`console.log()`
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ---
 
-`return`
+`console.table()`
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ---
 
-`debugger`
+`console.dir()`
 
 ---
 
-`console.log`
+Finding the object in the Network tab and double clicking on it.
 
 ### --feedback--
 
-This statement allows you to stop code execution to examine variables.
+You can use this method directly in your code, and it doesn’t just log data or a table to the console.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index a6032fda57..ac62d4f199 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -2,7 +2,7 @@
 id: 670803abcb3e980233da4768
 title: What are Div Elements and When Should You Use Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: fq65B7JnEjM
 dashedName: what-are-div-elements
 ---
 
@@ -14,35 +14,35 @@ Watch the video and answer the questions below.
 
 ## --text--
 
-What type of element is a `div` element?
+What semantic meaning does a `div` element have?
 
 ## --answers--
 
-An inline-level element.
+The `div` element represents a container for introductory content or a set of navigational links.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-An inline-block element.
+The `div` element defines a footer for a document or section.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-A block-inline element.
+The `div` specifies the main page content and should be unique.
 
 ### --feedback--
 
-Think about how a `div` element occupies space.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
-A block-level element.
+The `div` element has no semantic meaning.
 
 ## --video-solution--
 
@@ -94,35 +94,35 @@ Review the beginning of the video for the correct syntax.
 
 ## --text--
 
-What should you group using a `div` element?
+Which of the following HTML elements is commonly used to group content into distinct sections?
 
 ## --answers--
 
-Block-level content and larger sections.
+`section`
 
 ---
 
-Inline texts and smaller sections.
+`aside`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-The whole HTML content.
+`nav`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-Images and media files only.
+`h1`
 
 ### --feedback--
 
-Think about related and larger content.
+Review the video starting at the 45 second mark for the answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
index d3e6ff98df..2d33343871 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -2,7 +2,7 @@
 id: 6708382cf088b216580a9ff1
 title: What Are IDs and Classes, and When Should You Use Them?
 challengeType: 11
-videoId: yTuzVH6THdg
+videoId: gM7Tngm3QXo
 dashedName: what-are-ids-and-classes
 ---
 
@@ -22,7 +22,7 @@ Use a `class` when you want a unique identifier that should only apply to one el
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -34,7 +34,7 @@ Use an `id` when you want to style multiple elements consistently across differe
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -42,7 +42,7 @@ Use an `id` when you want to apply styles that can be easily overridden by other
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Remember that an `id` is unique and can only be used once per HTML document.
 
 ## --text--
 
-What happens if you try to use duplicate an `id` in your HTML?
+What happens if you use the same `id` more than once in your HTML?
 
 ## --answers--
 
@@ -62,7 +62,7 @@ The program will crash.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -70,7 +70,7 @@ Nothing will happen.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -78,7 +78,7 @@ There will be a popup alert message in the browser window.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ## --video-solution--
 
@@ -116,10 +116,6 @@ Only classes can hold multiple separate values.
 
 `id="main heading"`
 
-### --feedback--
-
-Only classes can hold multiple separate values.
-
 ## --video-solution--
 
 4
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
index a75ddd24b2..95b16c7bd7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083868d5fdcb17bf8c14bd.md
@@ -2,7 +2,7 @@
 id: 67083868d5fdcb17bf8c14bd
 title: What Are HTML Entities, and What Are Some Common Examples?
 challengeType: 11
-videoId: VJmx-XzTqg8
+videoId: mVdIq0H_B4E
 dashedName: what-are-html-entities
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
index c80bdb5d87..7ce09ce185 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838977810401844af6fe0.md
@@ -2,7 +2,7 @@
 id: 670838977810401844af6fe0
 title: What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?
 challengeType: 11
-videoId: qeGlYqpFRZA
+videoId: Xdyig5C-oSU
 dashedName: what-is-the-role-of-the-link-element-in-html
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
index 2f13df7865..02192951fb 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838b10ee87a18e5faff62.md
@@ -2,7 +2,7 @@
 id: 670838b10ee87a18e5faff62
 title: What Is the Role of the Script Element in HTML, and How Can It Be Used to Link to External JavaScript Files?
 challengeType: 11
-videoId: ZxpITCgbc5Y
+videoId: nNCwy4QUh8Q
 dashedName: what-is-the-role-of-the-script-element-in-html
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
index c039ba2262..e114141bd0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670838e914096b194b0c51aa.md
@@ -2,7 +2,7 @@
 id: 670838e914096b194b0c51aa
 title: What Is an HTML Boilerplate, and Why Is It Important?
 challengeType: 11
-videoId: UKxDoI54eLE
+videoId: IlJEEVOc9o0
 dashedName: what-is-an-html-boilerplate
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
index e49edd740a..102a2cbe50 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/670839051794aa19fcef6dc8.md
@@ -2,7 +2,7 @@
 id: 670839051794aa19fcef6dc8
 title: What Is UTF-8 Character Encoding, and Why Is It Needed?
 challengeType: 11
-videoId: SuTPQkOpa10
+videoId: T0VimOMROr8
 dashedName: what-is-utf-8-character-encoding
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
index 88345cd681..fe94f2bb13 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -2,7 +2,7 @@
 id: 67083952f800051a8a21fcfd
 title: What Is the Role of the Meta Description, and How Does It Affect SEO?
 challengeType: 11
-videoId: aLy7C2fGDQw
+videoId: G-g2KBE05to
 dashedName: what-is-the-role-of-the-meta-description
 ---
 
@@ -94,7 +94,7 @@ Inside the `figure` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -102,7 +102,7 @@ Inside the `footer` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -114,7 +114,7 @@ In a popup alert message.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index c1d55001a7..73a3bc175d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -2,7 +2,7 @@
 id: 6708396caa00e11b597b3365
 title: What Is the Role of Open Graph Tags, and How Do They Affect SEO?
 challengeType: 11
-videoId: wQhsL9NjiuA
+videoId: 94IAhyEfO8I
 dashedName: what-is-the-role-of-open-graph-tags
 ---
 
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
index 4935c3f182..aa50bc64b9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a51e9e4fd8b8552eeb758.md
@@ -2,7 +2,7 @@
 id: 672a51e9e4fd8b8552eeb758
 title: What Is Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i2d9G5g8WxM
 dashedName: what-is-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
index 8bd8e80692..daa434c8ab 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5310d7e46b8a34d48dfd.md
@@ -2,7 +2,7 @@
 id: 672a5310d7e46b8a34d48dfd
 title: What Are Screen Readers, and Who Uses Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aowIBtwkwyE
 dashedName: what-are-screen-readers
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
index db18fbb9a4..81c861daed 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5326a7606a8a766cbedb.md
@@ -2,7 +2,7 @@
 id: 672a5326a7606a8a766cbedb
 title: What Are Large Text or Braille Keyboards, and Who Uses Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: kg-R09kIDiY
 dashedName: what-are-large-text-or-braille-keyboards
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
index 3b5e58c4a5..b9973911ef 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a533e6041c28ad680eb8f.md
@@ -2,7 +2,7 @@
 id: 672a533e6041c28ad680eb8f
 title: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: vN7C2gexLu0
 dashedName: what-are-alternative-pointing-devices
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
index 745d4d8839..915bac68a2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5361ef88158b25fbfba7.md
@@ -2,7 +2,7 @@
 id: 672a5361ef88158b25fbfba7
 title: What Are Screen Magnifiers Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Voiysxr-Df4
 dashedName: what-are-screen-magnifiers
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
index ea40b20532..fb7b4cc0fc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a536f8386288b9ed0a154.md
@@ -2,7 +2,7 @@
 id: 672a536f8386288b9ed0a154
 title: What Is Voice Recognition Software Used For?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _qT4ce85TLg
 dashedName: what-is-voice-recognition-software
 ---
 
@@ -94,7 +94,7 @@ Dragon.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ---
 
@@ -106,7 +106,7 @@ Voice Control.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ---
 
@@ -114,7 +114,7 @@ Voice Access.
 
 ### --feedback--
 
-Most voice recognition software, especially ones that come bundled with operating systems, often include words like “control“ or “access“. Focus on the options that don’t follow this convention.
+Most voice recognition software, especially ones that come bundled with operating systems, often include words like "control" or "access". Focus on the options that don't follow this convention.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
index 43b4c9643c..398853f05b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a537f05f3798bd4f57d2d.md
@@ -2,7 +2,7 @@
 id: 672a537f05f3798bd4f57d2d
 title: What Are Some Common Accessibility Auditing Tools to Use?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BZ37IV7eNeo
 dashedName: what-are-some-common-accessibility-auditing-tools
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
index 5f8450f7ab..9a3dc51b4b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
@@ -2,7 +2,7 @@
 id: 672a538c029f9e8c1687460e
 title: How Does Proper Heading Level Structure Affect Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: FqBrK9IAvhI
 dashedName: how-does-proper-heading-level-structure-affect-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
index f360bcc4c8..7645015c63 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md
@@ -2,7 +2,7 @@
 id: 672a539b887ec68c593cdc4b
 title: What Are Best Practices for Tables and Accessibility?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aaip_wiDgEw
 dashedName: what-are-best-practices-for-tables-and-accessibility
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
index 988d190b70..889b66fbc2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md
@@ -2,7 +2,7 @@
 id: 672a53ae8f1ad28c8a1ed0f0
 title: Why Is It Important for Inputs to Have an Associated Label?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _FWK8pqUUXo
 dashedName: why-is-it-important-for-inputs-to-have-an-associated-label
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
index af986253d7..259c75b9a7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md
@@ -2,7 +2,7 @@
 id: 672a53cf67140d8cd85d4b0f
 title: What Is the Purpose of WAI-ARIA, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LNv_JZogKy0
 dashedName: what-is-the-purpose-of-wai-aria
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
index 45f2f251ba..63ce2beb24 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md
@@ -2,7 +2,7 @@
 id: 672a549231b8728f7171ed9d
 title: What Are ARIA Roles?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9rEXBdjn5ZQ
 dashedName: what-are-aria-roles
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
index a465acef27..8d209caedb 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md
@@ -2,7 +2,7 @@
 id: 672a54a6675c168faa84252d
 title: What Are the Roles of the aria-label and aria-labelledby Attributes?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: WLb6vAfd_eE
 dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
index 74efdaa36a..26eeeac4db 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md
@@ -2,7 +2,7 @@
 id: 672a54bc58319c8fe6f78ad4
 title: What Is the aria-hidden Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: QedOQkZOBYc
 dashedName: what-is-the-aria-hidden-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
index 8a57914143..5f53ca98e3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md
@@ -2,7 +2,7 @@
 id: 672a54ce90c19e9038f481d7
 title: What Is the aria-expanded Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EhZHqC1ZE_Q
 dashedName: what-is-the-aria-expanded-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
index 63fecb64ec..efbf028f5b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md
@@ -2,7 +2,7 @@
 id: 672a54dff9dc439089f1a219
 title: What Is the aria-live Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LGkl102m2-s
 dashedName: what-is-the-aria-live-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
index 58a4119ada..89dc093f3e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md
@@ -2,7 +2,7 @@
 id: 672a54f29d783890d1f94740
 title: What Are Some Common ARIA States Used on Custom Control Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: tzoL0L63V5g
 dashedName: what-are-some-common-aria-states-used-on-custom-control-elements
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
index 227f474939..4fc6b1b677 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md
@@ -2,7 +2,7 @@
 id: 672a5507d857a891139abc7f
 title: What Is the aria-controls Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: CIjzHpQHKFo
 dashedName: what-is-the-aria-controls-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
index cfe559fe6e..8789f5eae6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md
@@ -2,7 +2,7 @@
 id: 672a551975938a916c74802c
 title: What Is the aria-describedby Attribute, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IuYRdE-f28M
 dashedName: what-is-the-aria-describedby-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
index bcc9fc059b..502b85460a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md
@@ -2,7 +2,7 @@
 id: 672a55b5c0c14493328fe36e
 title: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _yKzvDikHOI
 dashedName: when-is-the-alt-attribute-needed
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
index c63035cee6..0afc2ea879 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md
@@ -2,7 +2,7 @@
 id: 672a55dd1d86bc939606e204
 title: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JI_yg4ZivfM
 dashedName: what-are-the-accessibility-benefits-for-good-link-text
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
index 6485aff4a6..0768efbb52 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md
@@ -2,7 +2,7 @@
 id: 672a55eb7791559421ff0cd3
 title: What Are Good Ways to Make Audio and Video Content Accessible?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KIuKBpihUPg
 dashedName: what-are-good-ways-to-make-audio-and-video-content-accessible
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
index b4e5b4b0c0..69fcc2743c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md
@@ -2,7 +2,7 @@
 id: 672a55fbc2d95a9453151caf
 title: What Are Some Ways to Make Web Applications Keyboard Accessible?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: UE7rKhSKfHs
 dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
index e86ed9318d..9d0fab401d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -50,15 +50,15 @@ All of the above
 
 ## --text--
 
-What element must an `h3` element come after?
+Which heading element must precede an `h3` element?
 
 ## --answers--
 
-`h1`
+`h5`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -66,11 +66,11 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ---
 
-`h3`
+`h6`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -78,7 +78,7 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
index 173c1708ee..e9ee54a2a9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/6729959bf9c8e835f46b3f78.md
@@ -50,35 +50,35 @@ Think about an element that primarily affects text style to highlight when part
 
 ## --text--
 
-Which HTML element is used to emphasize important text?
+When should you use CSS instead of the `i` or `em` elements?
 
 ## --answers--
 
-`em`
+When the text has a special purpose or meaning in the paragraph.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ---
 
-`strong`
+When you want to display text in italics for presentational purposes only.
 
 ---
 
-`i`
+When the text is an idiomatic expression.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ---
 
-`mark`
+When the text needs to be emphasized for importance.
 
 ### --feedback--
 
-Think about a semantic HTML element that highlights important content.
+Consider the scenario where the styling is purely visual without any semantic meaning.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
index c70034f3ea..f8501e6312 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995c9e6f69436dbcccc79.md
@@ -50,39 +50,39 @@ Analyze the two types of quotation elements. Think about which one displays the
 
 ## --text--
 
-Which HTML element is used for displaying inline quotations?
+What is the purpose of the `cite` element in HTML?
 
 ## --answers--
 
-`q`
-
----
-
-`blockquote`
+To display inline quotations.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ---
 
-`cite`
+To specify the source URL of a quotation.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ---
 
-`p`
+To mark up the title of a referenced creative work.
+
+---
+
+To display extended quotations.
 
 ### --feedback--
 
-Think about the two types of quotation elements. Think about which one is perfect for short quotations from other sources.
+Consider how the `cite` element is used in relation to creative works like books, articles, or films.
 
 ## --video-solution--
 
-1
+3
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
index 6ca38d68c8..671eaa7226 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995d673bd3237200b9e7c.md
@@ -50,7 +50,7 @@ Think about an element that is specifically designed for shortened words.
 
 ## --text--
 
-What is the primary purpose of the ``abbr` element?
+What is the primary purpose of the `abbr` element?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
index 92fd187d64..516dfb03e3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -62,7 +62,7 @@ What is the correct format for the `datetime` attribute value according to ISO 8
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -70,7 +70,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -78,7 +78,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
index 051b5c4ea8..87f6104018 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md
@@ -1,20 +1,50 @@
 ---
 id: 6734e3a9cc78faaf4248d335
 title: What Is the Role of JS Libraries and Frameworks, and Why Are They Used in the Industry?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-role-of-js-libraries-and-frameworks-and-why-are-they-used-in-the-industry
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+JavaScript libraries and frameworks provide pre-built code that streamlines the development process.  While both libraries and frameworks serve to improve productivity and standardize coding practices, they differ in their approach and level of control they provide to developers.
+
+Libraries are generally more focused on providing solutions to specific tasks, such as manipulating the DOM, handling events, or managing AJAX requests.
+
+An example of a JavaScript library is jQuery.
+
+jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like datepickers, sliders, and modal dialogs.
+
+Although jQuery is no longer as widely used as it once was, it significantly helped developers by making tasks that were complex in vanilla JavaScript much easier to implement.
+
+Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow.
+
+For example, Angular encourages a component-based architecture with a set of conventions and tools that provide a structured approach to organizing and building applications. Angular gives developers clear guidelines on how to structure components, manage state, handle routing, and interact with services, making it a more opinionated framework.
+
+Other examples of frameworks include Remix and NextJS.
+
+In contrast, React, a UI library, is more flexible and doesn't enforce any particular architectural pattern. React focuses primarily on the view layer and leaves a lot of the choices on application design up to the developers.
+
+Although libraries and frameworks are used across projects of all sizes, The choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications.
+
+In the industry, libraries and frameworks are widely used for several reasons. They significantly speed up development by providing quick solutions for common problems.
+
+One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built in solutions to help you with date manipulation, timezones, parsing and formatting of dates.
+
+A lot of popular libraries and frameworks are well-tested and maintained by large communities. This means they're often more practical than building the same thing from scratch.
+
+Libraries and frameworks follow best practices and patterns that have been proven effective in real life scenarios. This can lead to more robust and scalable applications.
+
+In conclusion, libraries and frameworks offer quick solutions to common problems, speed up development, and promote best practices. Understanding the differences between libraries and frameworks, and knowing when to use them is a valuable skill for any JavaScript developer.
 
 # --questions--
 
 ## --text--
 
-Why was jQuery a popular library of choice in the early 2010’s?
+Why was jQuery a popular library of choice in the early 2010's?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
index f643612a40..6384efbdf9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md
@@ -1,14 +1,32 @@
 ---
 id: 6734e867bbf41cc5b11648c4
 title: What Are Single Page Applications, and What Are Some Issues Surrounding Them?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-single-page-applications-and-what-are-some-issues-surrounding-them
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Unlike traditional multi-page websites, single page applications (SPAs) load only one HTML page and dynamically update the content as the user interacts with the app, without reloading the entire page. This approach can lead to faster, more responsive applications, but it also comes a set of challenges and considerations.
+
+SPAs heavily use JavaScript to manage the application's state and render content. Instead of requesting new HTML pages from the server, SPAs use JavaScript to manipulate the DOM and fetch data asynchronously. This is often done using libraries and frameworks like React, Vue, or Angular, which provide great tools for building complex user interfaces.
+
+SPAs have some common issues. One significant issue is that screen readers may struggle with dynamically updated content. When content changes without a page reload/refresh, screen readers might not notify these changes, which makes our users unaware of updates on our web app.
+
+Another challenge with SPAs is with navigation and browser history. Users expect the back and forward buttons to work as they do on traditional websites. This might not work properly in SPAs because technically, the URL of the web app doesn’t change. Since, the URL of the web app doesn’t change, they can’t bookmark any specific page. Refreshing the page might reset the application to its initial state, rather than maintaining the current view.
+
+SPAs can pose challenges for SEO optimization.
+
+Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly.
+
+However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs.
+
+Performance is another consideration. SPAs load the entire application in one go, which means that if the loading time increases, users will be seeing a blank screen for a longer period of time. Now consider the scenario of users with slower internet speeds. Overall, the user experience will not be very pleasant.
+
+In conclusion, while Single Page Applications offer many benefits, they also present unique challenges. Developers need to be careful of accessibility, usability, SEO, and performance considerations when building SPAs. By addressing these issues, it's possible to create SPAs that are fast, responsive, and accessible to all users.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
index 41ae2d9b62..5c3163ec9d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md
@@ -1,14 +1,30 @@
 ---
 id: 6734e86f590727c5e7e9ec5e
 title: What Is React, and What Is It Commonly Used For?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-react-and-what-is-it-commonly-used-for
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features.
+
+A fundamental concept in React is the creation of reusable UI components. These components, such as buttons, cards, and avatar components, can be easily reused throughout your application. You can nest these components inside each other to build more complex, dynamic interfaces.
+
+One of the key advantages of React is that these custom components can update and render independently as data changes.
+
+Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency. You’ll learn more about the virtual DOM and how it works in upcoming lecture videos.
+
+In addition to reusable components, React also provides a powerful way to manage the state of your application. State refers to the data that determines how a component renders and behaves.
+
+With React, you can easily track and update the state of components, ensuring that the UI reflects the most current data. You will learn more about working with state in future lecture videos.
+
+While there are many libraries within the JavaScript ecosystem, freeCodeCamp will mainly be focused on teaching React because of its wide spread use and demand in the industry.
+
+Over the next few lectures, we will dive deeper into building custom components, managing state, and more.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
index 419372cd3e..c0d9ac8920 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md
@@ -1,14 +1,117 @@
 ---
 id: 6734e879c78ee6c61db25b90
 title: What Are Components in React, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-components-in-react-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces, making it easier to develop and maintain large-scale applications.
+
+The two types of components in React are functional and class based components. In modern React, developers will use functional components and all of the examples we look at today will be functional components.
+
+At a higher level, you can think of component like JavaScript functions that return elements describing the UI.
+
+This UI is described using JSX, a syntax extension for JavaScript that looks similar to HTML but allows you to write UI elements in a more declarative way.
+
+Let's look at an example of a React component:
+
+```js
+function Greeting() {
+  const name = "John"
+  {/* The result will be Hello John*/}
+  return <h1 className="title">Hello {name}</h1>;
+}
+```
+
+In this example, we've defined a component called Greeting. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the name variable within the h1 element.
+
+We are also applying a `className` called title to the `h1` element.
+
+But why are we using `className` instead of class like with regular HTML elements?
+
+Well this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead.
+
+We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work.
+
+```js
+{/* Block Comments */}
+```
+
+Another thing you might have noticed is that we are using a capital letter at the beginning of the component name. But why can’t we use all lower case letters?
+
+This is because React treats components with a capital letter as custom components, while elements with lowercase letters are considered built-in HTML elements.
+
+When React encounters a lowercase tag (like `<div>` or `<span>`), it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create.
+
+To use this `Greeting` component in our application, we would write something like this:
+
+```js
+<Greeting />
+```
+
+This would render an `<h1>` element with the text `"Hello, John"` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol.
+
+When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here
+
+```js
+<img />
+<MyComponent />
+```
+
+So far we have only been looking at how to render a single h1 element. But you can actually render multiple elements.
+
+Let’s take a look at the following example code here:
+
+```js
+function Greeting() {
+  const name = "John";
+  {/* This will throw an error */}
+  return <h1>Hello {name}</h1> 
+  <p>Nice to meet you.</p>
+}
+```
+
+We are trying to add another sentence of `"Nice to meet you"` but it is not rendering on the page correctly.
+
+There seems to be an error message instead. The error message says `"Adjacent JSX elements must be wrapped in an enclosing tag."`
+
+The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the h1 and p elements in a single div, there is another way to silence the error.
+
+React `<Fragment>`s are used to group elements together.
+
+Here is what the revised example will look like:
+
+```js
+function Greeting() {
+  const name = "John";
+  return (
+    <Fragment>
+      <h1>Hello {name}</h1>
+      <p>Nice to meet you.</p>
+    </Fragment>
+  );
+}
+```
+
+You can also choose to use empty JSX tags which can serve as shorthand for Fragments.
+
+```js
+ function Greeting() {
+  const name = "John";
+  return (
+    <>
+      <h1>Hello {name}</h1>
+      <p>Nice to meet you.</p>
+    </>
+  );
+}
+```
+
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
index 158d5b4c12..cfd23df155 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md
@@ -1,14 +1,63 @@
 ---
 id: 6734e88cc46e6dc679420040
 title: What is Vite and How Can It Be Used to Setup a New React Project?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-vite-and-how-can-it-be-used-to-setup-a-new-react-project
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to setup of all of the necessary configurations by yourself, there are tools that will do that for you.
+
+One of the most popular tools for setting up projects is Vite. Vite, which means "fast" in French, is a build tool that aims to provide a faster development experience for modern web projects. Vite can be used with React, as well as with other libraries and frameworks like Vue or Svelte. You can even use it with vanilla JavaScript projects.
+
+To create a new project with Vite, you will need to use the command line. If you are using Windows machine, then you can use the Command Prompt or Windows PowerShell. If you are using a Mac, then you can use the Terminal app.
+
+Once you have the command line open, you can use the following command:
+
+```bash
+npm create vite@latest my-react-app -- --template react
+```
+
+This command creates a new React project named `my-react-app` using Vite's React template.
+
+You can then open up the new project and see the React boilerplate code that Vite has provided for you.
+
+The great thing about Vite is that it will only provide the files that are absolutely necessary to get started with your React project.
+
+To actually run the project as is, you will need to install the dependencies using the following commands in the command line:
+
+```bash
+  cd my-react-app
+  npm install
+```
+
+The `cd my-react-app` command ensures that you change to the correct directory where your project is located.
+
+The `npm install` command is used to install the dependencies needed to properly run your React project. Dependencies are libraries or packages that your React project requires in order to function correctly, such as React itself, ReactDOM, or other third-party packages that provide additional functionality.
+
+Running `npm install` will read the `package.json` file in your project directory and install all the dependencies listed there, allowing you to build and run your React app without missing any necessary components.
+
+The `package.json` file is a key configuration file in projects that contains metadata about your project, including its name, version, and dependencies. It also defines scripts, licensing information, and other settings that help manage the project and its dependencies.
+
+Once the dependencies are installed, you should notice a new folder in your project called `node_modules`.
+
+The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in your package.json file, including both your project's direct dependencies and any dependencies of those dependencies.
+
+To run your project, run the `npm run dev` command and open up a new browser tab at `http://localhost:5173/`.
+
+You should see the starter template that Vite has provided for you.
+
+If you need to stop the local server, press `CTRL + C` in the command line.
+
+To actually see the code for this starter template, you can go into your project inside the src folder and you should see the `App.jsx` file.
+
+From there you can start to modify the file, save your changes and see the new changes display in the browser.
+
+And with that, you're ready to begin building your React application!
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
index ea0054f4ca..bbc991edf0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md
@@ -1,14 +1,106 @@
 ---
 id: 674ba6876f7ada867135bb95
 title: How Can You Import and Export Components in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-import-and-export-components-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In this lecture, we will take a look at how to import and export components in React.
+
+In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the jsx file extension because this file is mainly working with JSX.
+
+```js
+function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+```
+
+This `Cat` component returns a JSX markup with a title and image for a cat called Mr.Whiskers.
+
+If we want to use our `Cat` component in another file, we need to first export it like this:
+
+```js
+function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+
+export default Cat;
+```
+
+We are using the default keyword because this will be the default export from the module. You can also choose to export the component on the same line as the component definition like this:
+
+```js
+export default function Cat() {
+  return (
+    <div className="card">
+      <h2>Mr. Whiskers</h2>
+      <img
+        src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
+        alt="Cute cats running in the grass."
+      />
+    </div>
+  );
+}
+```
+
+You can choose to import child components in other parent component files. Or import them in the root component file. For this example, we will import the Cat component inside the root component file.
+
+Every React project will have a top-level component, typically called `App.jsx`. This file is usually located in the src directory of your project. You’ll learn more about common project layouts in a future lecture video.
+
+```js
+export default function App() {
+  return (
+    // return component here
+  );
+}
+```
+
+To use the `Cat` component inside the root `App` component, you will need to import it like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+  return (
+    // return component here
+  );
+}
+```
+
+Now, you can return the `Cat` component inside the `App` component like this:
+
+```js
+import Cat from "./Cat";
+
+export default function App() {
+  return (
+    <Cat />
+  );
+}
+```
+
+As you continue building your own React projects, you’ll become more comfortable organizing components, importing them where needed, and creating sophisticated UIs by composing these modular components.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
index 6ca9e5d940..ce54c281bb 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d26385dbe73203c4dac81.md
@@ -2,7 +2,7 @@
 id: 672d26385dbe73203c4dac81
 title: What Is JavaScript, and How Does It Work with HTML and CSS?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G7lc_Yt2fqY
 dashedName: what-is-javascript
 ---
 
@@ -58,7 +58,7 @@ JavaScript adds more styles to the CSS file.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ---
 
@@ -66,11 +66,11 @@ JavaScript creates a new version of HTML for the page.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ---
 
-JavaScript interacts with the DOM to change content and styles dynamically.
+JavaScript interacts with the page to change content and styles dynamically.
 
 ---
 
@@ -78,7 +78,7 @@ JavaScript only works in the backend.
 
 ### --feedback--
 
-Think about how JavaScript can change the webpage’s content or styles without needing a page reload.
+Think about how JavaScript can change the webpage's content or styles without needing a page reload.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
index 9c8fdba12f..af13e8e3bb 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d496eca926b5df8176a67.md
@@ -2,7 +2,7 @@
 id: 672d496eca926b5df8176a67
 title: What Is a Data Type, and What Are the Different Data Types in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DQgf3RxOiQg
 dashedName: what-is-a-data-type
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
index e39d154003..ec58dd387d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d497cb1a1675e47bf7ea1.md
@@ -2,7 +2,7 @@
 id: 672d497cb1a1675e47bf7ea1
 title: What Are Variables, and What Are Guidelines for Naming JavaScript Variables?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: h6ytd29mrrg
 dashedName: what-are-variables
 ---
 
@@ -74,7 +74,7 @@ Remember the rules for starting a variable name and avoiding special characters
 
 ---
 
-`return`
+`const`
 
 ### --feedback--
 
@@ -90,7 +90,7 @@ Why is it important to use descriptive names for your variables?
 
 ## --answers--
 
-It’s required by JavaScript.
+It's required by JavaScript.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
index 046193f28b..887da5e0df 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49959621885e9d3e672c.md
@@ -2,7 +2,7 @@
 id: 672d49959621885e9d3e672c
 title: How Do let and const Work Differently When It Comes to Variable Declaration, Assignment, and Reassignment?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ax8XbAiG4Ek
 dashedName: how-do-let-and-const-work
 ---
 
@@ -66,7 +66,7 @@ When you want to track a value that will change during program execution.
 
 ---
 
-When you want to declare a variable but don’t want it to be accessible in a specific block of code.
+When you want to declare a variable but don't want it to be accessible in a specific block of code.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
index 57696daf94..b6d894df10 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49a5cf43945ee09e5fba.md
@@ -2,7 +2,7 @@
 id: 672d49a5cf43945ee09e5fba
 title: What Is a String in JavaScript, and What Is String Immutability?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: AXinCYvj7h8
 dashedName: what-is-a-string
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
index 6d90d8cd24..f021fff99e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49b2fb76df5f1d6117af.md
@@ -2,7 +2,7 @@
 id: 672d49b2fb76df5f1d6117af
 title: What Is String Concatenation, and How Can You Concatenate Strings with Variables?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4bCDHakINH8
 dashedName: what-is-string-concatenation
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
index 38058dd76e..eb62c204cf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49c4e899345f5b33c24c.md
@@ -2,7 +2,7 @@
 id: 672d49c4e899345f5b33c24c
 title: What Is console.log Used For, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: J9CeRj7EBmM
 dashedName: what-is-console-log
 ---
 
@@ -50,7 +50,7 @@ Think about where you can see the results of the `console.log` method.
 
 ## --text--
 
-Which of the following examples correctly uses `console.log` to display the value of a variable?
+Which of the following examples correctly uses `console.log` to display the value of a string?
 
 ## --answers--
 
@@ -110,11 +110,11 @@ Think about the basic structure of `console.log` and where the variable should g
 
 ---
 
-`console.write(age);`
+`console.log("age");`
 
 ### --feedback--
 
-Think about the basic structure of `console.log` and where the variable should go.
+Think about the difference between a variable and a string.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
index db6be4b3f6..5b27976bf6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49d93b54b85faa4dbad7.md
@@ -2,7 +2,7 @@
 id: 672d49d93b54b85faa4dbad7
 title: What Is the Role of Semicolons in JavaScript, and Programming in General?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: BgZYZV0_-UM
 dashedName: what-is-the-role-of-semicolons
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
index ab6814c50b..5dda4709d8 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-introduction-to-javascript/672d49e65a1c855fe7bb3fdb.md
@@ -2,7 +2,7 @@
 id: 672d49e65a1c855fe7bb3fdb
 title: What Are Comments in JavaScript, and When Should You Use Them?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HyYHnvP_EaM
 dashedName: what-are-comments-in-javascript
 ---
 
@@ -98,7 +98,7 @@ Think about how comments help clarify but should not clutter the code.
 
 ---
 
-Only use comments for complex logic or unclear code.
+Use comments to provide context and leave notes for yourself and other developers.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
index 9273138f57..34f6a8de44 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
@@ -86,42 +86,6 @@ This rule adds space below each list item, not above.
 
 ## --text--
 
-Given the CSS rule `li { margin-bottom: 15px; }`, what effect does this have on list items?
-
-## --answers--
-
-Adds `15px` of space inside each list item.
-
-### --feedback--
-
-This rule affects the space outside the list item, not inside.
-
----
-
-Adds `15px` of space between the content and `border` of each list item.
-
-### --feedback--
-
-This rule affects the space outside the `border` of each list item.
-
----
-
-Adds `15px` of space below each list item.
-
----
-
-Adds `15px` of space above each list item.
-
-### --feedback--
-
-This rule adds space below each list item, not above.
-
-## --video-solution--
-
-3
-
-## --text--
-
 What does the `line-height` property control in CSS?
 
 ## --answers--
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md b/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
index 0982d60a3e..5d1897b9df 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67329fbcfaf5ff5cdaa38a42.md
@@ -2,7 +2,7 @@
 id: 67329fbcfaf5ff5cdaa38a42
 title: What Is the var Keyword, and Why Is It No Longer Suggested to Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ae4bq5IcDfI
 dashedName: what-is-the-var-keyword-and-why-is-it-no-longer-suggested-to-use-it
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
index bc8a1a6b21..c4decaafbe 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-the-var-keyword-and-hoisting/67335f45489c5a11b71d0ed5.md
@@ -2,7 +2,7 @@
 id: 67335f45489c5a11b71d0ed5
 title: What Is Hoisting?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Aa1bLYTu5T8
 dashedName: what-is-hoisting
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
index 39fa9b1772..7e9ac93c18 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/6733b072bd8f5b06ccdbd9e2.md
@@ -2,7 +2,7 @@
 id: 6733b072bd8f5b06ccdbd9e2
 title: What Is Asynchronous JavaScript, and How Does It Differ from Synchronous JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ibxm8ApRm8A
 dashedName: what-is-asynchronous-javascript-and-how-does-it-differ-from-synchronous-javascript
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
index 95a85fa90e..6cb9d259b1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/67340798c2c1776709d8a5fe.md
@@ -2,7 +2,7 @@
 id: 67340798c2c1776709d8a5fe
 title: How Does the Async Attribute Work Inside Script Elements, and How Does It Differ from the Defer Attribute?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G0eRfrQzHdM
 dashedName: how-does-the-async-attribute-work-inside-script-elements-and-how-does-it-differ-from-the-defer-attribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
index 3a53b7a083..287bc520cc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407a223891b6734563c89.md
@@ -2,7 +2,7 @@
 id: 673407a223891b6734563c89
 title: What Is the Fetch API, and What Are Common Types of Resources That Are Fetched from the Network?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DVq2gXN12tQ
 dashedName: what-is-the-fetch-api-and-what-are-common-types-of-resources-that-are-fetched-from-the-network
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
index ffcc41b7e0..1b6e559cf9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407be6af21d6766ed4b96.md
@@ -2,7 +2,7 @@
 id: 673407be6af21d6766ed4b96
 title: How Does the Fetch API Work with Common HTTP Methods and res.json()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: igua3fllgXc
 dashedName: how-does-the-fetch-api-work-with-common-http-methods-and-res-json
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
index 140a6c6384..0269fc49b0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407ca21117a67cf9521ca.md
@@ -2,7 +2,7 @@
 id: 673407ca21117a67cf9521ca
 title: What Are Promises, and How Does Promise Chaining Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 7BclniIRnUs
 dashedName: what-are-promises-and-how-does-promise-chaining-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
index 963fc7e828..1cd296de72 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407d56c3dce67fa97969b.md
@@ -2,7 +2,7 @@
 id: 673407d56c3dce67fa97969b
 title: What Is Async/Await, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: GYf6F2PTMEw
 dashedName: what-is-async-await-and-how-does-it-work
 ---
 
@@ -62,7 +62,7 @@ Consider the restrictions on where `await` can be placed.
 
 ---
 
-Only at the top level of a module.
+At very beginning of your code.
 
 ### --feedback--
 
@@ -70,7 +70,7 @@ Consider the restrictions on where `await` can be placed.
 
 ---
 
-Only inside `async` functions.
+Inside `async` functions.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
index e4d24c63fd..c98ac06414 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407e02bcf0d682b9a49a9.md
@@ -2,7 +2,7 @@
 id: 673407e02bcf0d682b9a49a9
 title: How Does the JavaScript Engine Work, and What Is a JavaScript Runtime?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ekNo7Ai_4Uo
 dashedName: how-does-the-javascript-engine-work-and-what-is-a-javascript-runtime
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
index e3a4b550e0..053796abee 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-asynchronous-programming/673407eb10ca9d68634e81d9.md
@@ -2,7 +2,7 @@
 id: 673407eb10ca9d68634e81d9
 title: What Is the Geolocation API, and How Does the getCurrentPosition Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Daytgop2tf0
 dashedName: what-is-the-geolocation-api-and-how-does-the-getcurrentposition-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
index e2d2d17228..e92ab03672 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/672d26917a8ab3220c038a42.md
@@ -2,7 +2,7 @@
 id: 672d26917a8ab3220c038a42
 title: How Do Comparisons Work with Null and Undefined Data Types?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LFaWJYxUkds
 dashedName: how-do-comparisons-work-with-null-and-undefined-data-types
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
index efe7c82d19..e5ff928312 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-comparisons-and-conditionals/673282bea35dbf129efb63d6.md
@@ -2,13 +2,13 @@
 id: 673282bea35dbf129efb63d6
 title: What Are Switch Statements and How Do They Differ from If/Else Chains?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3qSSecohwrc
 dashedName: what-are-switch-statements-and-how-do-they-differ-from-if-else-chains
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
index 11fc342586..96d642737c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672aa578a2129554d4675049.md
@@ -2,7 +2,7 @@
 id: 672aa578a2129554d4675049
 title: What Are the Basic Parts of a Computer?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: SJT6r_ejSqw
 dashedName: what-are-the-basic-parts-of-a-computer
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
index 99c7c12bda..91a1e84380 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab82c1a9bbd0e3aabc39d.md
@@ -2,7 +2,7 @@
 id: 672ab82c1a9bbd0e3aabc39d
 title: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: AcTxNEVccxc
 dashedName: how-to-effectively-work-with-your-keyboard-mouse-and-other-pointing-devices
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
index 9105b060dc..515d189cc8 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab83c4297910eade53c2e.md
@@ -2,7 +2,7 @@
 id: 672ab83c4297910eade53c2e
 title: What Are the Different Types of Internet Service Providers?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pNR0QzFzSrg
 dashedName: what-are-the-different-types-of-internet-service-providers
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
index dba5d2ea48..8e1b267afd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab849aa1ef70eefd29364.md
@@ -2,7 +2,7 @@
 id: 672ab849aa1ef70eefd29364
 title: What Are Safe Ways to Sign Into Your Computer?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pGoZFEMjC-g
 dashedName: what-are-safe-ways-to-sign-into-your-computer
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which of the follow is considered an unsafe password?
+Which of the following is considered an unsafe password?
 
 ## --answers--
 
@@ -78,7 +78,7 @@ Think about the extra layer of security.
 
 ---
 
-To ensure the person trying to access the account is the authorized user.
+It ensures the person trying to access the account is the authorized user.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
index 18c74684ad..0aba68160a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-computer-internet-and-tooling-basics/672ab8573f32480f192aaae1.md
@@ -2,7 +2,7 @@
 id: 672ab8573f32480f192aaae1
 title: What Are the Different Types of Tools Professional Developers Use?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: FHUfC8cm_AA
 dashedName: what-are-the-different-types-of-tools-professional-developers-use
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
index 1604f7ec9b..43fdc2091c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/67329f9e9eb84e5c6a5e4366.md
@@ -2,7 +2,7 @@
 id: 67329f9e9eb84e5c6a5e4366
 title: What Is a String Object, and How Does It Differ from String Primitive?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _-EJRG7vr-0
 dashedName: what-is-a-string-object-and-how-does-it-differ-from-string-primitive
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
index 772d1bf66e..b81371dcae 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c68f4520d160584a6fd2.md
@@ -2,7 +2,7 @@
 id: 6732c68f4520d160584a6fd2
 title: What Is the toString() Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: OYOHw8Xmatw
 dashedName: what-is-the-tostring-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
index a2fe162e72..3bfd6c643e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c69d82814160951b1aa7.md
@@ -2,7 +2,7 @@
 id: 6732c69d82814160951b1aa7
 title: What Is the Number Constructor, and How Does It Work for Type Coercion?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ZY_GdH7FbPI
 dashedName: what-is-the-number-constructor-and-how-does-it-work-for-type-coercion
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
index 9fe8fd7de9..aa9de6ca0f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ab21031b60d2b0c999.md
@@ -2,7 +2,7 @@
 id: 6732c6ab21031b60d2b0c999
 title: What Are Some Common Practices for Naming Variables and Functions?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: wheRZCpE724
 dashedName: what-are-some-common-practices-for-naming-variables-and-functions
 ---
 
@@ -86,35 +86,35 @@ Remember the prefix we typically use for getter functions.
 
 ## --text--
 
-Which of these is the best name for a constant representing the maximum number of login attempts?
+Which of the following should you do if you’re working in an established codebase and / or with a team?
 
 ## --answers--
 
-`max_attempts`
+Use your text editor's find-and-replace feature to update any function or variable names you come across that could be improved, even it's not related to the task you're working on.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ---
 
-`MAX_LOGIN_ATTEMPTS`
+Stick to the naming conventions for variables and functions that have already been established.
 
 ---
 
-`loginMaxAttempts`
+Come up with your own naming conventions for any new code you write.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ---
 
-`ATTEMPTS_MAX`
+Strictly use the naming conventions covered in this lecture.
 
 ### --feedback--
 
-Recall the convention for naming constants in JavaScript.
+Remember that this lecture covers some naming conventions, and each codebase could have its own established conventions.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
index 96a5d87762..627d73b2a3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6ba2ea42b610b9f9ce1.md
@@ -2,7 +2,7 @@
 id: 6732c6ba2ea42b610b9f9ce1
 title: How Do You Get the Length for an Array, and How Can You Create an Empty Array of Fixed Length?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ezk1SIbBDqw
 dashedName: how-do-you-get-the-length-for-an-array-and-how-can-you-create-an-empty-array-of-fixed-length
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
index fb67a1c812..6aca9b93a9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6c72d3738614e1230a2.md
@@ -2,7 +2,7 @@
 id: 6732c6c72d3738614e1230a2
 title: What Are Linters and Formatters, and How Can They Help You with Code Consistency?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XDPvu4bk8IA
 dashedName: what-are-linters-and-formatters-and-how-can-they-help-you-with-code-consistency
 ---
 
@@ -106,7 +106,7 @@ Think about when it would be most beneficial to catch potential issues.
 
 ---
 
-As part of the continuous integration pipeline.
+As part of the build process, a plugin for your text editor or IDE, a pre-commit hook before code can be committed to a codebase, and so on.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
index a7150859dc..781cc1c448 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6d4dec34c61850a1276.md
@@ -2,7 +2,7 @@
 id: 6732c6d4dec34c61850a1276
 title: What Is Memory Management, and How Does It Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HJF89E-ODlw
 dashedName: what-is-memory-management-and-how-does-it-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
index b93d630963..a5f72166df 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-core-javascript-fundamentals/6732c6e281c14a61c4858361.md
@@ -2,7 +2,7 @@
 id: 6732c6e281c14a61c4858361
 title: What Are Closures, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: J4ZBwMbDAgE
 dashedName: what-are-closures-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
index 38797fe0ea..aafb368aab 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733aae9d25004f60d1e86f2.md
@@ -2,7 +2,7 @@
 id: 6733aae9d25004f60d1e86f2
 title: What Are Some Ways to Validate Forms Using JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: azh-Mh6dxyo
 dashedName: what-are-some-ways-to-validate-forms-using-javascript
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
index 614a257d86..ad0285c05d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md
@@ -2,7 +2,7 @@
 id: 6733d3a33abdd27cd562bdf2
 title: What Is the Purpose of e.preventDefault?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gBUdCKcBJSg
 dashedName: what-is-the-purpose-of-e-preventdefault
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
index 74b2c72627..31b4d3e0b3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-form-validation/6733d3ab69e94b7df7ee91b0.md
@@ -2,7 +2,7 @@
 id: 6733d3ab69e94b7df7ee91b0
 title: How Does the Submit Event Work with Forms?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EWGb5yFyQs4
 dashedName: how-does-the-submit-event-work-with-forms
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
index 10957f235f..4c8b910483 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6733b0451d6be0065430b418.md
@@ -1,14 +1,75 @@
 ---
 id: 6733b0451d6be0065430b418
 title: What Is Functional Programming?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-functional-programming
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Functional programming is about writing code that is clean, predictable, and easier to test and debug. Two key concepts we'll explore today are pure functions and avoiding side effects.
+
+Let's start with pure functions.
+
+A pure function is a function that, given the same input, will always return the same output, and it doesn't modify anything outside of itself.
+
+Here's an example of a pure function:
+
+```js
+function add(a, b) {
+  return a + b;
+}
+```
+
+This function is pure because it always returns the same result for the same inputs, and it doesn't change anything outside of itself. No matter how many times you call `add(2, 3)`, it will always return `5`, and it won't affect any other part of your program.
+
+Now, let's contrast this with an impure function:
+
+```js
+let total = 0;
+function addToTotal(value) {
+  total += value;
+  return total;
+}
+```
+
+This function is impure because it modifies a variable outside of itself (`total`). The result of `addToTotal(5)` will be different depending on what `total` was before the function was called. This unpredictability can make our code harder to understand and debug.
+
+This brings us to our next important concept and that is side effects.
+
+A side effect is any change that occurs in the state of the program when a function is called. This could include modifying a global variable, writing to a file, or making an API call.
+
+Pure functions have no side effects but impure functions have these.
+
+Avoiding side effects is a key principle of functional programming. When we minimize side effects, our code becomes more predictable and easier to test.
+
+While writing code, our main goal should be to make functions do one thing and they should do it very well without changing other parts of our program.
+
+Here's an example of a function with a side effect:
+
+```js
+function greet(name) {
+  console.log(`Hello, ${name}!`);
+}
+```
+
+This function has a side effect because it interacts with the outside world by logging to the console.
+
+In functional programming, we might rewrite this as:
+
+```js
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+console.log(greet("Alice"));
+```
+
+Now `greet` is a pure function that simply returns a string, and we handle the side effect (logging to the console) separately.
+
+Functional programming encourages us to compose our programs using pure functions by breaking our code into small, predictable pieces. And thus, we can build programs that are easier to understand, test, and maintain.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
index 435dd0013d..39cae08a55 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-functional-programming/6734061fe116df617a564a37.md
@@ -1,14 +1,56 @@
 ---
 id: 6734061fe116df617a564a37
 title: What Is Currying, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-currying-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Currying is a technique where we transform a function that takes multiple arguments into a sequence of functions, each taking a single argument.
+
+Let's start with a basic example. Imagine we have a function that adds two numbers:
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add(3, 4)); // Output: 7
+```
+
+This is a function that takes two arguments and returns their sum. Now, let's see how we can curry this function:
+
+```js
+function curriedAdd(a) {
+  return function(b) {
+    return a + b;
+  }
+}
+
+console.log(curriedAdd(3)(4)); // Output: 7
+```
+
+In this curry converted code, instead of taking two arguments at once, we have a function that takes the first argument and returns another function. This returned function then takes the second argument and performs the addition. We call it like `curriedAdd(3)(4)`, where each pair of parentheses represents a function call.
+
+But why would we want to do this?
+
+Currying allows us to create some special functions easily. For example, we could create a function that always adds five to any number:
+
+```js
+const addFive = curriedAdd(5);
+console.log(addFive(10)); // Output: 15
+console.log(addFive(20)); // Output: 25
+```
+
+Here, `addFive` is a function that's always ready to add five to whatever number we give it. This is a simple example of partial application, where we fix a certain number of arguments to a function, producing another function that takes fewer arguments.
+
+While our examples have focused on functions with two arguments, currying can be applied to functions with any number of arguments.
+
+As you continue your journey in JavaScript, you'll likely find many situations where currying can make your code cleaner and more expressive.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
index 4db556f700..77979f32f6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/6733affc29df1304e2c97e88.md
@@ -2,7 +2,7 @@
 id: 6733affc29df1304e2c97e88
 title: What Are Classes, and How Do They Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ap99e6plM10
 dashedName: what-are-classes-and-how-do-they-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
index e2e7faaaf7..da3b669de0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403ca2bb16658309e3632.md
@@ -2,7 +2,7 @@
 id: 673403ca2bb16658309e3632
 title: How Does the This Keyword Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Tt1v6kLAdMo
 dashedName: how-does-the-this-keyword-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
index a59505a833..b83eb10e2e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403d2aa52d8586a14a269.md
@@ -2,7 +2,7 @@
 id: 673403d2aa52d8586a14a269
 title: What Is Class Inheritance, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DNO-xTd5D70
 dashedName: what-is-class-inheritance-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
index 84531b6dff..50e53a924d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-classes-in-javascript/673403dbf5c9835898632c84.md
@@ -2,7 +2,7 @@
 id: 673403dbf5c9835898632c84
 title: What Are Static Properties and Methods in Classes?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xDIqlqh6_EU
 dashedName: what-are-static-properties-and-methods-in-classes
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
index f4336f8d2d..0280a627cf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672aa86da9937560d3dfe3d6.md
@@ -2,7 +2,7 @@
 id: 672aa86da9937560d3dfe3d6
 title: What Are Common Use Cases for Using Floats, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xUr2Oh1KE8I
 dashedName: what-are-common-use-cases-for-using-floats
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
index edff7974ad..d9b6146d33 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a84fb8d4613776cc99e.md
@@ -2,7 +2,7 @@
 id: 672c3a84fb8d4613776cc99e
 title: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3BO43MUDd8Q
 dashedName: what-is-relative-positioning
 ---
 
@@ -22,7 +22,7 @@ Which of the following is the default positioning for all elements?
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
@@ -30,7 +30,7 @@ Think about what kind of positioning doesn’t need any special CSS declaration.
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
@@ -38,7 +38,7 @@ Think about what kind of positioning doesn’t need any special CSS declaration.
 
 ### --feedback--
 
-Think about what kind of positioning doesn’t need any special CSS declaration.
+Think about what kind of positioning doesn't need any special CSS declaration.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
index 5b2646ed2c..e81f1e77fc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a8fac7c5613b4bb75de.md
@@ -2,7 +2,7 @@
 id: 672c3a8fac7c5613b4bb75de
 title: What Is Absolute Positioning, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KaTb9CL9lMQ
 dashedName: what-is-absolute-positioning
 ---
 
@@ -106,7 +106,7 @@ Consider what the element falls back to when no positioned ancestor is available
 
 ---
 
-Relative to the initial containing block (usually the browser’s viewport).
+Relative to the initial containing block (usually the browser's viewport).
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
index 180cf0866c..703bafa815 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3a9d32c56113fcaedf24.md
@@ -2,7 +2,7 @@
 id: 672c3a9d32c56113fcaedf24
 title: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: H7sJoYv_zmA
 dashedName: what-is-fixed-and-sticky-positioning
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
index 1a25bd0249..b21819ecc3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-how-to-work-with-floats-and-positioning-in-css/672c3aa9bc3a481425cb52b3.md
@@ -2,7 +2,7 @@
 id: 672c3aa9bc3a481425cb52b3
 title: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IkEM5npJM5E
 dashedName: what-is-the-z-index-property
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
index cccaf8c884..46366eb342 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-modules-imports-and-exports/67329fd6ad99c75d4a4b74e4.md
@@ -2,7 +2,7 @@
 id: 67329fd6ad99c75d4a4b74e4
 title: What Is a Module in JavaScript, and How Can You Import and Export Modules in Your Program?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: mGPyLJLTUpo
 dashedName: what-is-a-module-in-javascript-and-how-can-you-import-and-export-modules-in-your-program
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
index d9ca791db7..1406e683c1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-recursion-and-the-call-stack/6733b02d1e556005a544c5e3.md
@@ -1,14 +1,144 @@
 ---
 id: 6733b02d1e556005a544c5e3
 title: What Is Recursion, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-recursion-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let’s learn how recursion works in JavaScript.
+
+Recursion is a complicated feature that allows you to call a function repeatedly until a base-case is reached. Unlike a traditional loop, recursion allows you to handle something with an unknown depth, such as deeply nested objects/arrays, or a file tree. But you can also use it for more basic tasks, such as counting down from a given number.
+
+Let’s construct a function to do exactly that. We’ll call our function recursiveCountdown, and it needs to accept a number. We’ll have it print this number to the console:
+
+```js
+const recursiveCountdown = (number) => {
+  console.log(number);
+};
+```
+
+Now if we call this and pass the number 5, we’ll see the number print to our terminal. But nothing else happens – and the number 5 certainly isn’t a countdown.
+
+Before we start building the recursive portion of our function, we need to establish our base case first. If you don’t have a base case established, your code will run until it exceeds your memory allocation and crashes.
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    console.log(number);
+  };
+
+recursiveCountdown(5);
+```
+
+For our base case, we want the countdown to stop if the number is less than 1. When we hit that base-case, we can return to break out of the function execution.
+
+Now that we’ve safely prepared a base-case, we can set up the recursion. The key point that makes a function recursive is that it calls itself in its execution. In this case, we want to call the function after we print the number. But in order to count down, our new number needs to be one less:
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    console.log(number);
+    recursiveCountdown(number - 1);
+  };
+
+recursiveCountdown(5); // 
+```
+
+This would log the numbers 5, 4, 3, 2, and 1 to the console.
+
+We do get our five numbers! But what if we wanted to count up instead? Rather than writing an entirely new function, we can swap the order of our log and our recursive call:
+
+```js
+const recursiveCountdown = (number) => {
+    if (number < 1) {
+        return;
+    }
+    recursiveCountdown(number - 1);
+    console.log(number);
+  };
+
+recursiveCountdown(5);
+```
+
+This would log the numbers 1, 2, 3, 4, and 5 to the console.
+
+But why does that work? Well, to understand this you need to understand the call stack. The call stack is how JavaScript tracks and resolves function calls. The stack functions as a last-in-first-out queue of sorts. To understand this better, let’s add some logging to our function:
+
+```js
+const recursiveCountdown = (number) => {
+    console.log(`Function execution started for number: ${number}`);
+    if (number < 1) {
+        console.log(`Base case reached, begin resolving stack`);
+        return;
+    }
+    console.log(`Calling recursiveCountdown with number: ${number - 1}`);
+    recursiveCountdown(number - 1);
+    console.log(`Function execution completed for number: ${number}`);
+  };
+
+recursiveCountdown(5);
+```
+
+We’ve added four key statements here. The first log runs when a function call begins executing. The third log runs just before the recursive function is called. And the fourth log runs when the function execution has ended. The result is:
+
+```md
+Function execution started for number: 5
+Calling recursiveCountdown with number: 4
+Function execution started for number: 4
+Calling recursiveCountdown with number: 3
+Function execution started for number: 3
+Calling recursiveCountdown with number: 2
+Function execution started for number: 2
+Calling recursiveCountdown with number: 1
+Function execution started for number: 1
+Calling recursiveCountdown with number: 0
+Function execution started for number: 0
+Base case reached, begin resolving stack
+Function execution completed for number: 1
+Function execution completed for number: 2
+Function execution completed for number: 3
+Function execution completed for number: 4
+Function execution completed for number: 5
+```
+
+But how does this happen? Well, this is where the call stack comes in to play. When we call `recursiveCountdown(5)`, that function call is added to the call stack.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(4)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(4)` gets added to the call stack, on top of the `recursiveCountdown(5)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(3)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(3)` gets added to the call stack, on top of the `recursiveCountdown(4)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(2)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(2)` gets added to the call stack, on top of the `recursiveCountdown(3)`.
+
+When that function call reaches the point where it needs to call `recursiveCountdown(1)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(1)` gets added to the call stack, on top of the `recursiveCountdown(2)`.
+
+And finally, when that function call reaches the point where it needs to call `recursiveCountdown(0)`, it has to stop and wait for that result. Meanwhile, our `recursiveCountdown(0)` gets added to the call stack, on top of the `recursiveCountdown(1)`.
+
+But `recursiveCountdown(0)` doesn’t call another function – it hits our base case, where it returns early. Because the execution of that function has ended, the function call can be considered “resolved”. When the call is resolved, it’s removed from the stack.
+
+Now our `recursiveCountdown(1)` is no longer waiting on that call – it’s at the top of the stack and can resume executing.
+
+`recursiveCountdown(1)` resolves, is removed from the stack, and allows `recursiveCountdown(2)` to resume execution.
+
+`recursiveCountdown(2)` resolves, is removed from the stack, and allows `recursiveCountdown(3)` to resume execution.
+
+`recursiveCountdown(3)` resolves, is removed from the stack, and allows `recursiveCountdown(4)` to resume execution.
+
+`recursiveCountdown(4)` resolves, is removed from the stack, and allows `recursiveCountdown(5)` to resume execution.
+
+And `recursiveCountdown(5)` resolves and is removed from the stack. Our call stack is now empty, so the recursion is complete!
+
+This is a basic overview of how recursion works in JavaScript. It’s a complicated concept, and you should play around with some code and log statements until you’re comfortable with the behavior of the call stack.
+
+For a little fun fact, we talked about how a lack of a base-case can cause your code to crash when it runs out of memory. This is because the recursion keeps piling more and more function calls into the call stack until the stack overflows. Just like the name of the popular programming community.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
index 7e2662b831..8b15a1fa60 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
@@ -2,7 +2,7 @@
 id: 6732a06aed1b095f57b0bb82
 title: What Is the Change Event, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 87w0nfXZhss
 dashedName: what-is-the-change-event-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
index 5eb1995853..d5ef623ff0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
@@ -2,7 +2,7 @@
 id: 67338e93b75977a344cf6d40
 title: How Do Event Bubbling, and Event Delegation Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9yeVpWaYwMU
 dashedName: how-do-event-bubbling-and-event-delegation-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
index 046c33cb15..a38b58bf7d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bafe4ef812b78696b0e27.md
@@ -50,7 +50,7 @@ The name of the feature is a clue to its purpose.
 
 ## --text--
 
-Why is not a good idea to use pure black backgrounds with white text in dark mode?
+Why is it not a good idea to use pure black backgrounds with white text in dark mode?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
index 96e9d87863..13bcc49923 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672baffc684be178dd02fa06.md
@@ -46,7 +46,7 @@ Think about the user experience
 
 ## --video-solution--
 
-3
+1
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
index 7bf2b03135..b3cc62f425 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-centered-design/672bb009952c7a7904a750cb.md
@@ -18,7 +18,7 @@ What is infinite scrolling?
 
 ## --answers--
 
-A design pattern to change the scrollbar on the page.
+A design pattern that changes the scrollbar on the page.
 
 ### --feedback--
 
@@ -26,7 +26,7 @@ Review the beginning of the video when this concept is introduced.
 
 ---
 
-A design pattern to change size of the page.
+A design pattern that changes the size of the page.
 
 ### --feedback--
 
@@ -42,15 +42,11 @@ Review the beginning of the video when this concept is introduced.
 
 ---
 
-A design pattern that breaks up content into pages.
-
-### --feedback--
-
-Review the beginning of the video when this concept is introduced.
+A design pattern that loads more content as the user scrolls down the page
 
 ## --video-solution--
 
-3
+4
 
 ## --text--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
index 501388fb55..6e3678f0a1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What is alignment in design?
+What is the importance of balance in design when placing images?
 
 ## --answers--
 
-The distribution of visual weight in a design.
+To ensure images are the right size.
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ---
 
-The order in which elements are viewed on a page.
+To make images accessible to all users
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ---
 
-The placement of elements in relation to each other.
+To create a harmonious design by distributing visual weight.
 
 ---
 
-The size of an image in relation to the space it occupies.
+To improve the resolution of images.
 
 ### --feedback--
 
-Think about how images are placed in the layout of a design.
+Think about how text and images work together in a design.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
index bed2785ba2..ad39683131 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734ddabad59e593a49afafe.md
@@ -2,7 +2,7 @@
 id: 6734ddabad59e593a49afafe
 title: Welcome Message from Quincy
 challengeType: 24
-videoId: nVAaxZ34khk
+videoId: KwZkXwDUc1o
 dashedName: welcome-message-from-quincy
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
index 50014e458c..cfa1be8adc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2c5780912abd874e79c.md
@@ -2,7 +2,7 @@
 id: 6734e2c5780912abd874e79c
 title: How Does the Certification Process Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: v27_UwsNiUE
 dashedName: how-does-the-certification-process-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
index 2bd0446801..339890c9ab 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6734e2dcb965e5ac0ea38e0f.md
@@ -1,9 +1,9 @@
 ---
 id: 6734e2dcb965e5ac0ea38e0f
-title: How to Develop Effective Learning Habits
+title: How Can You Build Effective Learning Habits and Work Smarter?
 challengeType: 11
-videoId: nVAaxZ34khk
-dashedName: how-to-develop-effective-learning-habits
+videoId: tnp3tOg9oBM
+dashedName: how-can-you-build-effective-learning-habits-and-work-smarter
 ---
 
 # --description--
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-How to Develop Effective Learning Habits question?
+What does the "Pace yourself" tip emphasize as key to making progress through the curriculum?
 
 ## --answers--
 
-Answer 1
+Learning as much as possible all in one day
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
+
+---
+
+Completing the curriculum without breaks
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
 
 ---
 
-Answer 2
+Working a little bit each day
+
+---
+
+Stopping frequently whenever it feels hard
+
+### --feedback--
+
+It's about treating coding like a marathon rather than a sprint.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the main benefit of establishing a coding routine?
+
+## --answers--
+
+It doubles the amount of learning in half the time
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+---
+
+It reduces the need for sleep
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+---
+
+It helps make coding a habit that requires less willpower
+
+---
+
+It eliminates the need for practice or repetition
+
+### --feedback--
+
+Think about what happens after you wake up 30 minutes earlier every day to code.
+
+## --video-solution--
+
+3
+
+## --text--
+
+How does the Pomodoro technique help with starting a coding session?
+
+## --answers--
+
+It guarantees you will code for hours without stopping
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
+
+---
+
+It instantly makes you a faster coder by strictly timing every keystroke
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
+
+---
+
+It automatically determines which tasks you should work on, removing the need for planning
+
+### --feedback--
+
+You set a timer for a short, fixed amount of time to break the initial resistance.
 
 ---
 
-Answer 3
+It makes it easier to begin coding by committing to just 25 minutes
 
 ## --video-solution--
 
-1
+4
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
new file mode 100644
index 0000000000..60c6525ae0
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-welcome-to-freecodecamp/6763500bd5a85d5898cc21a9.md
@@ -0,0 +1,121 @@
+---
+id: 6763500bd5a85d5898cc21a9
+title: How do Most People Learn Effectively?
+challengeType: 11
+videoId: ybpwBqa56-s
+dashedName: how-do-most-people-learn-effectively
+---
+
+# --description--
+
+Watch the lecture video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+What is the concept called where learning is spread out over time, allowing sleep to reinforce memory structures?
+
+## --answers--
+
+Spaced Repetition
+
+---
+
+Speed Reading
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+---
+
+Memorization
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+---
+
+Passive Review
+
+### --feedback--
+
+This concept emphasizes learning a bit each day rather than all at once.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which learning approach involves switching between different concepts or skills during a single study session to keep your thinking flexible?
+
+## --answers--
+
+Focused Immersion
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+---
+
+Interleaving Practice
+
+---
+
+Highlighting Notes
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+---
+
+Mental Mapping
+
+### --feedback--
+
+It’s the technique that mixes things up to prevent your brain from getting stuck on one track.
+
+## --video-solution--
+
+2
+
+## --text--
+
+What strategy helps you overcome the illusion of competence by actively testing your understanding through quizzes and exercises?
+
+## --answers--
+
+Passive Listening
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+---
+
+Rereading Notes
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+---
+
+Active Recall
+
+---
+
+Watching Tutorials Only
+
+### --feedback--
+
+It’s the method where you try to recall information without looking at the answers first.
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
index b10d5af014..cac2bfd8ad 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc03c257524d6a5151e8.md
@@ -92,30 +92,30 @@ Which of the following units can be used to set the `width` or `height` of an el
 
 `px`, `%`, and `em`.
 
-### --feedback--
-
-CSS allows various units to set dimensions.
-
 ---
 
-`px`, `vh`, and `vw`.
+`pxx`, `depth`, and `radius`.
 
 ### --feedback--
 
-CSS allows various units to set dimensions.
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
 
 ---
 
-`cm`, `vh`, and `rem`.
+`%%`, `mb`, and `vel`.
 
 ### --feedback--
 
-CSS allows various units to set dimensions.
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
 
 ---
 
 All of the above
 
+### --feedback--
+
+Consider the different types of units available in CSS for setting dimensions, including absolute and relative units.
+
 ## --video-solution--
 
-4
+1
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
index c1a539a0ac..adebb0514c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc100d59d24da7b4e09c.md
@@ -120,13 +120,6 @@ Think about the combinator that targets elements that are direct children of a s
 
 Which CSS rule will style the first `p` element that immediately follows any `h1` element?
 
-```css
-h1 {
-  color: green;
-  font-size: 24px;
-}
-```
-
 ## --answers--
 
 ```css
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
index 64551994f4..4eed45a28e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md
@@ -86,7 +86,7 @@ Consider how inline-block strikes a balance between inline flow and size control
 
 ## --text--
 
-In what situation would an element with d`isplay: inline-block;` behave differently than one with `display: block;`?
+In what situation would an element with `display: inline-block;` behave differently than one with `display: block;`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..715cff09bf
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: zUCIsEDCIMU
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is an example of a boolean attribute?
+
+## --answers--
+
+`src`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`href`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`disabled`
+
+---
+
+`alt`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the role of an attribute in HTML?
+
+## --answers--
+
+Attributes provide additional information and help define the behavior for HTML elements.
+
+---
+
+Attributes change the background color of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes change the font size of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes add JavaScript functionality to an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is the correct syntax for a boolean attribute?
+
+## --answers--
+
+`<input type="checkbox" checked>`
+
+---
+
+`<input type="checkbox" checked="on">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="off">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="isChecked">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
index 273ad05c90..dabc6bc4a6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-arrays/67329f508a6ec45b046700b3.md
@@ -14,40 +14,35 @@ Watch the video lecture and answer the questions below.
 
 ## --text--
 
-What will be the output of the following code?
-
-```js
-let numbers = [1, 2, 3, 4, 5];
-console.log(numbers[2]);
-```
+Which of the following is NOT true about JavaScript arrays?
 
 ## --answers--
 
-`2`
+They are zero-indexed.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ---
 
-`3`
+They are an unordered collection of values.
 
 ---
 
-`4`
+They can contain another array as a value.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ---
 
-`5`
+They are dynamic, and their size can change after they're created.
 
 ### --feedback--
 
-Remember that arrays in JavaScript are zero-indexed.
+Recall how each value in an array is numerically indexed, and how that affects the way values are stored.
 
 ## --video-solution--
 
@@ -58,38 +53,37 @@ Remember that arrays in JavaScript are zero-indexed.
 What will be the output of the following code?
 
 ```js
-let fruits = ['apple', 'banana'];
-fruits.push('orange');
-console.log(fruits);
+let numbers = [1, 2, 3, 4, 5];
+console.log(numbers[2]);
 ```
 
 ## --answers--
 
-`['apple', 'banana']`
+`2`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ---
 
-`['apple', 'banana', 'orange']`
+`3`
 
 ---
 
-`['banana', 'orange']`
+`4`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ---
 
-`['orange', 'apple', 'banana']`
+`5`
 
 ### --feedback--
 
-The `push()` method adds a new element to the end of an array.
+Remember that arrays in JavaScript are zero-indexed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
index cfbae628d8..81ec4e45e7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733ab12b60bd7f6b2b0b0c0.md
@@ -1,14 +1,26 @@
 ---
 id: 6733ab12b60bd7f6b2b0b0c0
 title: How Does the Audio Constructor Work, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-does-the-audio-constructor-work-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about the Audio constructor and its common methods.
+
+The `Audio` constructor, like other constructors, is a special function called with the `new` keyword. It returns an HTMLAudioElement, which you can then use to play audio for the user, or append to the DOM for the user to control themselves.
+
+When you call the constructor, you can optionally pass a URL as the (only) argument. This URL should point to the source of the audio file you want to play. Or, if you need to change the source dynamically, you can assign the URL to the `src` property of the returned audio element.
+
+The returned audio element offers various methods for controlling the audio. You'll most likely use the `play()` method, which begins audio playback. There is also the `pause()` method, which pauses the audio playback but preserves the current location in the track allowing `play()` to resume playback from that point.
+
+You might expect there to be a `stop()` method, to pause audio playback and reset the track to the beginning. But instead, you should call `pause()` and set the `currentTime` property directly.
+
+Finally, the `canPlayType()` method can be used to determine if a browser is likely to be able to play your specific audio format. You will learn about audio and video formats in the next lecture.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
index 58373912a7..d967dd3b0d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8203da84a08a0f5eab4.md
@@ -1,14 +1,34 @@
 ---
 id: 6733d8203da84a08a0f5eab4
 title: What Are the Different Types of Video and Audio Formats?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-the-different-types-of-video-and-audio-formats
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about the different types of audio and video formats.
+
+You have probably heard of, or even used, a few common ones. If the terms MP3, MP4, MOV, or WebM are familiar to you, those are all different formats for video and audio. And there are quite a few more that are available.
+
+Before we dive in to file formats, we need to talk about MIME types. A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type.
+
+Nearly every file format has a MIME type. HTML, for example, has the type `text/html`. A JSON object has the type `application/json`. Even a Windows `.exe` installer has a MIME type: `application/vnd.microsoft.portable-executable`.
+
+The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
+
+An MP3 file has the MIME type `audio/mp3`. An MP4, however, can have the MIME type `audio/mp4` OR `video/mp4`, depending on whether it's a video file or audio-only. This distinction tells the browser how to handle the file.
+
+There are plenty of other file formats, such as the waveform format WAV, the multipurpose OGG, WMV for the Windows media player, the open source MKV, and many more.
+
+Knowing the differences between these file formats can help you ensure your users get the best experience, but sometimes you can't know what format a user's computer will support (or not support). Thankfully, `video` and `audio` elements both support the `source` element.
+
+With the `source` element, you can specify a file type and `source` and can include multiple different types by using multiple `source` elements. When you do this, the browser will determine the best format to use for the user's current environment.
+
+This takes away the guess work and allows you to focus on building engaging applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
index 48a10a8aea..5011bcafef 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d829d983c008d2db41a1.md
@@ -1,14 +1,28 @@
 ---
 id: 6733d829d983c008d2db41a1
 title: What Is Codecs and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-codecs-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about codecs and how they work.
+
+If you have worked with videos or audio before, you may have heard about codecs. A codec, short for “encoder/decoder", is an algorithm or software that can convert audio and video between analogue and digital formats.
+
+Codecs can be specified as part of the MIME type. The basic syntax to define a codec is to add a semi-colon after the media type, then `codecs=` and the codec.
+
+For example, an OGG audio file which uses the Vorbis codec might have a MIME type of `audio/ogg; codecs=vorbis`. Or, if a file supports multiple codecs, you can specify them as comma separated, but must surround them with quotes: `video/webm; codecs="vp8, vorbis"`.
+
+But some file types have a much more complicated syntax for codecs. For example, an MP4 might have a codec of `codecs="avc1.4d002a"`, indicating it was encoded with H.264.
+
+But when might you actually use these? Well, you can include them in the `type` attribute for a `source` element. This allows you to specify different codecs for the same format, giving the browser more granular options when determining which format to use for that user's environment.
+
+But you can also use them as part of the MIME type you pass to the global `MediaSource.isTypeSupported()` method. This method accepts a MIME-type, and returns `true` if the environment is likely to support it. Or rather, it returns `false` if it fails to instantiate a buffer for that file type. This approach allows you to programmatically select a source yourself, rather than relying on whatever the browser determines is “best".
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
index 25cc9e69db..ab8985556b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d83630e76f08ff49e6dc.md
@@ -1,14 +1,32 @@
 ---
 id: 6733d83630e76f08ff49e6dc
 title: What Is the HTMLMediaElement API and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-htmlmediaelement-api-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The HTMLMediaElement API is a powerful tool to control the behavior of audio and video elements on your page. It extends the base HTMLElement interface, so you have access to the base properties as well as these helpful methods.
+
+You've already explored some of the methods in a previous lecture about the Audio element, such as `play()` and `pause()`. These same methods are available on video elements as well.
+
+There are some other helpful methods, such as the `addTextTrack()` method. This method allows you to specify a text track to associate with the media element which is especially helpful for adding subtitles to a video.
+
+Or the `fastSeek()` method, which allows you to move the playback position to a specific time within the media.
+
+The HTMLMediaElement API also provides access to some new events that a standard element does not have.
+
+The `play` and `pause` events are fired when the media starts and stops playing. The `ended` event fires when the end of the media has been reached.
+
+The `waiting` event fires when playback is automatically paused due to data buffering.
+
+And the `canplay` and `canplaythrough` events fire when the media can be partially played, or played in totality.
+
+The HTMLMediaElement offers a great deal of control over your interactive media, and we've only scratched the surface. I encourage you to explore and experiment with the API to find the best ways to integrate it with your applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
index 025caa8592..7b30a960f7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d852175df50937f06061.md
@@ -1,14 +1,58 @@
 ---
 id: 6733d852175df50937f06061
 title: How Can You Work with the Media Streams to Capture Video and Audio from a Local Device?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-work-with-the-media-streams-getusermedia-to-capture-video-and-audio-from-a-local-device
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Instead of playing audio and video, you may sometimes want to capture audio or video. The Media Capture and Streams API, or the MediaStream API, allows you to do this.
+
+In order to use the API, however, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the global `navigator` object has a `getUserMedia()` method for you to use.
+
+This method accepts a single `constraints` object which defines the type of media you want to receive. This object has an `audio` and `video` property, reflecting audio and video streams. These properties can be `false`, if you do not want to receive that type of stream, `true` if you do, or objects defining additional constraints.
+
+For example, you can require a specific resolution of video output:
+
+```js
+window.navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: {
+    width: {
+      min: 1280,
+      ideal: 1920,
+      max: 3840
+    },
+    height: {
+      min: 720,
+      ideal: 1080,
+      max: 2160
+    }
+  }
+});
+```
+
+This constraint object specifies minimum and maximum resolutions for the video feed. The `ideal` property specifies the resolution you'd most like to have – and the stream will provide the resolution closest to your ideal.
+
+Once you've created your MediaStream (assuming the user approves the automated request to access their hardware), you can use the stream data however you need.
+
+Note that `getUserMedia()` returns a Promise, which means you will either need a callback function to consume the stream, or use async/await syntax. You will learn more about Promises and asynchronous programming in future lectures.
+
+Here's a basic example which renders the user's webcam feed to the page.
+
+```js
+const video = document.querySelector("video");
+const stream =
+  await window.navigator.mediaDevices.getUserMedia({ video: true });
+video.srcObject = stream;
+await video.play();
+```
+
+It is worth noting that this API does not offer access to screen capture. You'll learn about that API in the next lecture.
 
 # --questions--
 
@@ -22,7 +66,7 @@ Which method is used to access the user's media devices?
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ---
 
@@ -30,7 +74,7 @@ This method accesses the user’s media devices.
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ---
 
@@ -42,7 +86,7 @@ This method accesses the user’s media devices.
 
 ### --feedback--
 
-This method accesses the user’s media devices.
+This method accesses the user's media devices.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
index 9a2ccc881f..33008c9aa9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-audio-and-video/6733d8606fb893099e3d0df3.md
@@ -1,14 +1,26 @@
 ---
 id: 6733d8606fb893099e3d0df3
 title: What Are Some Other Examples of Video and Audio APIs?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-some-other-examples-of-video-and-audio-apis
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+You've learned about the HTMLMediaElement and MediaStreams APIs, but there are a few more APIs that can be quite helpful in working with video and audio.
+
+The first is the Screen Capture API. As the name might suggest, this API allows you to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+
+Then there is the MediaStream Recording API. This API works in tandem with the MediaStreams APIs, allowing you to record a MediaStream (or even an HTMLMediaElement directly). It then fires `dataavailable` events with Blob payloads you can write to the local file storage.
+
+Underlying all of this technology is the Media Source Extensions API. The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property, for example.
+
+And finally, the Web Audio API which powers everything audible on the web. This API includes important objects like an `AudioBuffer` (representing a Buffer specifically containing audio data) or the `AudioContext`.
+
+And that wraps up our lectures on audio and video!
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
index 9f69392f93..0080dd6da9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98be592cfb451f651451.md
@@ -74,7 +74,7 @@ It makes the gradient extend to the farthest corner of the element.
 
 ---
 
-It makes the gradient only appear within the element’s `padding`.
+It makes the gradient only appear within the element's `padding`.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
index 49ecdfbbfc..50823d9683 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98cd77b6b7456b6ef2de.md
@@ -94,15 +94,15 @@ It makes the website look less colorful.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ---
 
-It doesn’t affect users with visual impairments.
+It doesn't affect users with visual impairments.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ---
 
@@ -114,7 +114,7 @@ It requires more CSS code.
 
 ### --feedback--
 
-Think about how users who can’t distinguish between certain colors might be affected.
+Think about how users who can't distinguish between certain colors might be affected.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
index 467ca6704d..f6ea379d54 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-backgrounds-and-borders/672b98db3bcdd545ab3b3c73.md
@@ -102,35 +102,35 @@ Consider which property specifically targets one side of an element's border.
 
 ## --text--
 
-What's a potential advantage of using `box-shadow` to create a border effect instead of the `border` property?
+Which CSS property would you use to round the corners of a border?
 
 ## --answers--
 
-It's more widely supported by browsers.
+`border-style`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ---
 
-It allows for multiple "borders" with a single property.
+`border-radius`
 
 ---
 
-It's more performant.
+`border-spacing`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ---
 
-It can create gradients without additional properties.
+`border-bottom`
 
 ### --feedback--
 
-Think about the flexibility of box-shadow and how it can be used to layer multiple effects.
+Think of a word related to a circle or curve.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
index 7cb6ef94dc..17ccf4a3d7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md
@@ -1,14 +1,92 @@
 ---
 id: 6733ab64775d35f78f5238fe
 title: What Does CRUD Stand For, and How Do the Basic Operations Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-does-crud-stand-for-and-how-do-the-basic-operations-work
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+CRUD is an acronym that stands for Create, Read, Update, and Delete. These are the four operations of persistent storage.
+
+Persistent storage refers to saving data in a way that makes it available even after the power is turned off or the device is restarted.
+
+Understanding how the basic operation of CRUD works is crucial to web development because it forms the foundation for working with databases and building applications where users can add, view, modify, and delete data.
+
+Now, let’s take a look at each part of CRUD more closely
+
+- Create refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
+
+- Read is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+
+- Update involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
+
+- Delete is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+
+CRUD is used when working with databases, the UI, and RESTful APIs. RESTful APIs are a set of conventions for building web services that allow the client to interact with a database or backend system by performing CRUD operations through standard HTTP methods.
+
+HTTP stands for Hypertext Transfer Protocol and it is the foundation for data communication on the web. There are HTTP methods which define the actions that can be performed on resources over the web. The common methods are `GET`, `POST`, `PUT`, `PATCH`, `DELETE`.
+
+You will learn more about RESTful APIs and HTTP in future videos, but here is a quick break down of how CRUD maps to the different HTTP methods.
+
+- `POST` is used to create a new resource.
+
+- `GET` is used to retrieve or read data.
+
+- `PUT` is used to update a resource by replacing it entirely.
+
+- `PATCH` is used to partially update a resource.
+
+- `DELETE` is used to remove a resource.
+
+Here’s an example of how CRUD operations might be represented in code using a simple array in JavaScript:
+
+```js
+let items = [];
+
+// Create
+function createItem(item) {
+  items.push(item);
+}
+
+// Read
+function readItems() {
+  return items;
+}
+
+// Update
+function updateItem(index, newItem) {
+  items[index] = newItem;
+}
+
+// Delete
+function deleteItem(index) {
+  items.splice(index, 1);
+}
+
+// Example Usage
+createItem('Book');
+console.log(readItems()); // ['Book']
+updateItem(0, 'Magazine');
+console.log(readItems()); // ['Magazine']
+deleteItem(0);
+console.log(readItems()); // []
+```
+
+In this example:
+
+- We create an item by pushing it into an array.
+
+- We read the items by returning the array.
+
+- We update an item by modifying the array element at a given index.
+
+- We delete an item by removing it from the array using splice().
+
+This is a basic representation of how CRUD operations work at a conceptual level.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
index dffd025eb2..c60ca2e42e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md
@@ -1,14 +1,80 @@
 ---
 id: 6733ff4a9319c8486750886c
 title: What Is localStorage, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-localstorage-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The Web Storage API provides a mechanism for browsers to store key-value pairs right within the browser, allowing developers to store information that can be used across different page reloads and sessions.
+
+The two main components in the Web Storage API are `localStorage` and `sessionStorage`.
+
+`localStorage` is the part of the Web Storage API that allows data to persist even after the browser window is closed or the page is refreshed. This data remains available until it is explicitly removed by the application or the user.
+
+`sessionStorage` is another part of the Web Storage API that stores data for the duration of the page session, meaning the data is available as long as the browser tab or window is open. However, unlike `localStorage`, the data in `sessionStorage` is cleared when the tab or window is closed. You will learn more about `sessionStorage` in the next video.
+
+Common use cases for `localStorage` include storing user settings, such as themes or language preferences, remembering form data across browser sessions, and caching small pieces of information to improve the performance of web apps.
+
+Caching refers to storing frequently accessed data in a temporary storage location, known as a cache, so that subsequent requests for that data can be served more quickly without having to recompute or fetch it from a slower data source, such as a database or external server.
+
+Some common `localStorage` methods include the `setItem`, `getItem`, `removeItem` and `clear` methods.
+
+Here is an example of using the `setItem()` method which stores a key-value pair in `localStorage`.
+
+```js
+localStorage.setItem('username', 'JaneDoe');
+```
+
+Then if we want retrieve that value of a given key from `localStorage`, we can use the `getItem()` method.
+
+```js
+let username = localStorage.getItem('username');
+console.log(username); // JaneDoe
+```
+
+To remove an item from `localStorage` using its key, you can use the `removeItem()` method.
+
+```js
+localStorage.removeItem('username');
+```
+
+To clear all data in `localStorage`, you can use the `clear()` method.
+
+```js
+localStorage.clear();
+```
+
+Now, let’s take a look at an example where we use `localStorage` to store the preferred theme of a user.
+
+```js
+// Store the user's theme preference
+localStorage.setItem('theme', 'dark');
+
+// Retrieve the stored theme preference
+const userTheme = localStorage.getItem('theme');
+console.log(userTheme); // 'dark'
+
+// Remove the theme preference
+localStorage.removeItem('theme');
+
+// Clear all localStorage data
+localStorage.clear();
+```
+
+In this example:
+
+- We first store a theme choice (`dark`) for the user.
+
+- We then retrieve that theme and output it to the console.
+
+- Finally, we demonstrate how to remove a specific item or clear all stored data.
+
+`localStorage` is very useful for storing small pieces of data that need to persist between sessions, but it's important to note that `localStorage` should not be used to store sensitive information, such as passwords, because it can pose security risks.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
index b86ad69243..94f7696ea0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md
@@ -1,14 +1,86 @@
 ---
 id: 6733ff5814129c48b4fca88e
 title: What Is sessionStorage, and What Are Some Common Methods?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-sessionstorage-and-what-are-some-common-methods
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In the previous lecture video, we learned about working with `localStorage` and were briefly introduced to `sessionStorage`.
+
+Recall, that `sessionStorage` is when the data is cleared as soon as the user closes the tab or window in which the web application is running. It’s ideal for situations where data only needs to persist for the length of a single session, such as maintaining form data during navigation or storing temporary state information during a checkout process.
+
+Much like `localStorage`, `sessionStorage` uses key-value pairs to store and retrieve data. The methods used with `sessionStorage` are also the same as `localStorage`, with the only real difference being how long the data is stored.
+
+Here are a few examples of working with the different methods:
+
+- `sessionStorage.setItem()`: Stores a key-value pair in `sessionStorage`.
+
+```js
+sessionStorage.setItem('cart', '3 items');
+```
+
+- `sessionStorage.getItem()`: Retrieves the value of a given key from `sessionStorage`.
+
+```js
+let cart = sessionStorage.getItem('cart');
+console.log(cart); // Outputs: '3 items'
+```
+
+- `sessionStorage.removeItem()`: Removes a specific item from `sessionStorage` using its key.
+
+```js
+sessionStorage.removeItem('cart');
+```
+
+- `sessionStorage.clear()`: Clears all data stored in `sessionStorage`.
+
+```js
+sessionStorage.clear();
+```
+
+Let’s look at an example where we store data in `sessionStorage` which only lasts as long as the browser tab or window is open:
+
+```js
+// Store data in sessionStorage
+sessionStorage.setItem('currentUser', 'JohnDoe');
+
+// Retrieve the stored data
+const user = sessionStorage.getItem('currentUser');
+console.log(user); // 'JohnDoe'
+
+// Remove a specific key from sessionStorage
+sessionStorage.removeItem('currentUser');
+
+// Clear all sessionStorage data
+sessionStorage.clear();
+```
+
+In this example, we:
+
+1. Store the current user’s name (`JohnDoe`) in `sessionStorage`.
+
+2. Retrieve and display it.
+
+3. Remove the item associated with the key `currentUser`.
+
+4. Clear all `sessionStorage` data.
+
+The key difference from `localStorage` is that as soon as the user closes the tab, all stored session data will be lost.
+
+`sessionStorage` is particularly useful in scenarios like:
+
+- Storing temporary data such as form entries during a multi-page form process.
+
+- Storing temporary selections or preferences that don’t need to persist across sessions.
+
+- Maintaining state on a single-page application that doesn’t need to be remembered once the tab is closed.
+
+`sessionStorage` ensures that once the user leaves the page, the session data is cleared, which is great for scenarios where you don’t want to hold onto information beyond the current session.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
index ebd5dca539..125dde804d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md
@@ -1,14 +1,70 @@
 ---
 id: 6733ff6f02dde548ebe4a6d5
 title: What Are Cookies, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-cookies-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Cookies, also known as web cookies or browser cookies, are small pieces of data that a server sends to a user's web browser. These cookies are stored on the user's device and sent back to the server with subsequent requests.
+
+Cookies are essential in helping web applications maintain state and remember user information, which is especially important since HTTP is a stateless protocol.
+
+Cookies can store a variety of information such as user preferences, session data, or tracking information.
+
+Cookies are always stored as name-value pairs. This means each cookie has a name (key) and an associated value.
+
+For example, a cookie might store a user's session ID like this: `sessionId=abc123`. The key is `sessionId`, and the value is `abc123`. Each time the browser communicates with the server, the browser sends these cookies in the form of name-value pairs.
+
+When a user visits a website, the server can send one or more cookies to the user's browser by including a Set-Cookie header in the HTTP response. A header is a key-value pair that provides additional information about the HTTP request or response. You will learn more about HTTP requests and responses in future lectures.
+
+Once the cookies are set, the browser stores them and automatically includes them in the Cookie header with every subsequent request to the same domain. This allows the server to access the stored cookies and use them for things like maintaining user sessions or tracking preferences.
+
+Here’s an example of how a cookie is set in an HTTP response:
+
+```http
+Set-Cookie: sessionId=abc123; Expires=Wed, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
+```
+
+The browser will store the cookie, and in future requests to the same server, it will include the cookie in the `Cookie` header:
+
+```http
+Cookie: sessionId=abc123
+```
+
+The server can then read the cookie and use the stored session ID to retrieve information about the user, such as whether they are logged in.
+
+Here is a breakdown of the different types of cookies.
+
+- Session Cookies only last for the duration of the user's session on the website. Once the user closes the browser or tab, the session cookie is deleted. These cookies are typically used for tasks like keeping a user logged in during their visit.
+
+- Persistent Cookies have an expiration date and remain stored on the user's device until that date is reached. Persistent cookies are often used for remembering user preferences or login details across sessions.
+
+- Secure Cookies are only sent over HTTPS, ensuring that they cannot be intercepted by an attacker in transit.
+
+- HttpOnly Cookies cannot be accessed or modified by JavaScript running in the browser, making them more secure against cross-site scripting (XSS) attacks. cross-site scripting (XSS) attacks happen when an attacker injects malicious scripts into a web page that is viewed by other users. These scripts can then execute in the context of the victim's browser, potentially stealing cookies, session data, or performing other malicious actions without the user's knowledge or consent. By marking cookies as HttpOnly, they are protected from being accessed via JavaScript, reducing the risk of such attacks.
+
+You can create cookies via server responses using the `Set-Cookie` header or through JavaScript using `document.cookie`.
+
+Here's an example of setting a cookie using JavaScript:
+
+```js
+document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
+```
+
+This command sets a cookie named `username` with the value `"JohnDoe"` that will expire at the end of 2021. You can update an existing cookie by simply setting it again with a new value.
+
+To delete a cookie, you set its expiration date in the past:
+
+```js
+document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+```
+
+This will remove the `username` cookie from the browser.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
index ca5ce5c517..dfb09c49e7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md
@@ -1,14 +1,34 @@
 ---
 id: 6733ff8d06376149474a0c0d
 title: What Is the Cache API, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-the-cache-api-and-how-does-that-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+The Cache API is used to store network requests and responses, making web applications work more efficiently and even function offline. It is part of the broader Service Worker API and is crucial for creating Progressive Web Apps (PWAs) that can work under unreliable or slow network conditions.
+
+Before we continue with the Cache API, we first need to understand how service workers, PWAs, and network requests work on a basic level.
+
+A Network request is a request made by a web browser or application to a server to retrieve data or resources over the internet. For example, when you visit a website, your browser sends a network request to the web server to get the files (such as HTML, images, or videos) needed to display the page.
+
+A service worker is a special type of JavaScript file that runs in the background of a web application, separate from the main browser thread. It acts as a middleman between the web page and the network, allowing developers to intercept network requests, cache resources, and handle things like push notifications or background sync.
+
+A PWA, or Progressive Web App, is a type of web application that uses modern web technologies to provide a native app-like experience on the web. PWAs are designed to work reliably on any device, regardless of network conditions, and can be accessed through a browser or installed on a user's device like a traditional app.
+
+Now that we have a better understanding of service workers, PWAs, and network requests, we can dive deeper into the Cache API.
+
+The Cache API is a storage mechanism that stores `Request` and `Response` objects. When a request is made to a server, the application can store the response and later retrieve it from the cache instead of making a new network request. This reduces load times, saves bandwidth, and improves the overall user experience.
+
+The browser provides a storage area known as Cache Storage, where developers can save key-value pairs of network requests and their corresponding responses.
+
+With the Cache-Control header, developers can specify how long a cached resource should remain stored, as well as whether it should be revalidated or served directly from the cache.
+
+By using the Cache API, developers can build offline-first web applications, allowing a PWA, for example, to serve cached assets when the user is disconnected from the network.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
index a6ec2d038a..88ab457a3e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md
@@ -1,14 +1,55 @@
 ---
 id: 6733ff9d2fb9c449af68ad99
 title: What Are Some Negative Patterns Associated with Client-Side Storage?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-some-negative-patterns-associated-with-client-side-storage
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Client-side storage allows websites to store data on a user's device. However, like many technologies, it can be misused.
+
+Let’s explore some negative patterns associated with client-side storage, focusing on cookies and their misuse for tracking and fingerprinting.
+
+Let's start with cookies.
+
+In an earlier lecture video, you learned that cookies are data stored on a user's device when they visit a web app. A common misuse of cookies is excessive tracking.
+
+Websites use cookies to track a user's interactions with a web app, creating a history of their digital activities. This is done for targeted advertising but can raise significant privacy concerns.
+
+For example, a shopping website might use a tracking cookie like this:
+
+```js
+document.cookie = "userID=123; path=/; expires=Thu, 18 Dec 2024 6:00:00 UTC";
+```
+
+This code sets a cookie named `userID` with a value of `123`. The cookie will be sent with every request to the website, allowing it to track the user's actions. While this might seem harmless, imagine hundreds of websites sharing this information – it could create a very detailed picture of your online life and choices.
+
+Another concerning practice is browser fingerprinting.
+
+This technique uses client-side information to create a unique "fingerprint" of a user's browser. Websites have the ability to gather information about your browser version, installed plugins, screen resolution, and other data to uniquely identify you.
+
+Here's a simple example of how a website can create a fingerprint of you:
+
+```js
+let fingerprintExample = navigator.userAgent + screen.width + screen.height;
+console.log(fingerprintExample);
+```
+
+This code combines your browser's user agent with your screen dimensions. While this is a basic example, real fingerprinting methods are much more complex and can be highly accurate in identifying users.
+
+Local Storage can also be misused as some websites use it to store sensitive information insecurely. For instance:
+
+```js
+localStorage.setItem('userPassword', 'someonesPasswordHere');
+```
+
+This code stores a user's password in Local Storage. This is a serious security risk as the data in Local Storage is not encrypted and can be accessed easily.
+
+In conclusion, while client-side storage offers many benefits, it's crucial to use it responsibly. As you continue your web development journey, always consider the privacy and security of your users' data on the client side.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
index 0cb2fd4f26..c4a0c18da7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md
@@ -1,14 +1,46 @@
 ---
 id: 6733ffacd0ad1e49ec2af051
 title: How Can You Use Cookies to Store Arbitrary Data, Normally Controlled by HTTP Headers?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-can-you-use-cookies-to-store-arbitrary-data-normally-controlled-by-http-headers
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+As you learned in previous lectures, cookies are simple data that websites can store on a user's device.
+
+However, you can actually store more complex data structures in cookies. One common method is to use JSON to store objects or arrays. Here's an example:
+
+```js
+const userData = {
+  name: "John Doe",
+  age: 30,
+  role: "admin"
+};
+
+document.cookie = "userInfo=" + JSON.stringify(userData) + "; path=/";
+```
+
+In this example, we're creating an object with user data, converting it to a JSON string, and then storing it in a cookie. When we want to retrieve this data, we can parse the JSON string into an object using `JSON.parse()`.
+
+Now, you might be wondering about the “HTTP headers” aspect of our topic. Typically, cookies are set by the server using HTTP headers.
+
+For example, a server might send a header like this:
+
+```http
+Set-Cookie: username=John Doe; expires=Thu, 31 Dec 2024 6:00:00 IST; path=/
+```
+
+This header tells the browser to set a cookie.
+
+We can also set cookies directly in the browser using JavaScript. This is useful for storing data that doesn't need to be sent to the server immediately.
+
+Please note that cookies have a size limit of around 4KB, and storing too much data in them may slow down your web app.
+
+Storing large amounts of data in cookies can increase network traffic as cookies are sent with every HTTP request.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
index 5c8014fb7e..b9402a6abf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md
@@ -1,14 +1,92 @@
 ---
 id: 6733ffb59c62ee4a23522efe
 title: What Is IndexedDB, and How Does It Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-is-indexeddb-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+IndexedDB is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently.
+
+Unlike other storage mechanisms like localStorage, which is limited to storing strings, IndexedDB can store JavaScript objects, files, and pretty much any other type of data. This makes it easy for web applications that need to work with large and complex data structures.
+
+Now, let's look at how IndexedDB works.
+
+The first step is to open a database. Here's an example:
+
+```js
+let request = indexedDB.open("Sample DB", 1);
+
+request.onerror = function(event) {
+  console.log("Error opening database");
+};
+
+request.onsuccess = function(event) {
+  let db = event.target.result;
+  console.log("Database opened successfully");
+};
+```
+
+In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The 'db' object we get in the success callback is what we'll use to interact with the database.
+
+If you check the browser dev tools application interface, you will see your `Sample DB` in the `IndexedDb` section has been opened. Once you have your database open, you can start working with object stores.
+
+Object stores in IndexedDB are similar to tables in traditional databases. They hold the actual data you want to store. Here's how to create an object store:
+
+```js
+request.onupgradeneeded = function(event) {
+  let db = event.target.result;
+  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
+};
+```
+
+This code creates an object store named `"customers"` with `"id"` as its key path. The key path is like a primary key in a traditional database - it's used to uniquely identify each record.
+
+To add data to our object store, we'd do something like this. The `db` in this example represents the IndexedDB database instance.
+
+```js
+let transaction = db.transaction(["customers"], "readwrite");
+let objectStore = transaction.objectStore("customers");
+let request = objectStore.add({ id: 1, name: "John Doe", email: "john@example.com" });
+
+request.onerror = function(event) {
+  console.log("Error adding data");
+};
+
+request.onsuccess = function(event) {
+  console.log("Data added successfully");
+};
+```
+
+This code adds a new customer to our `"customers"` object store. We start a transaction (which is how we group database operations), get a reference to our object store, and then add our data.
+
+Retrieving data works in a similar way. We start a transaction, get our object store, and then use methods like `get` to retrieve data:
+
+```js
+let transaction = db.transaction(["customers"]);
+let objectStore = transaction.objectStore("customers");
+let request = objectStore.get(1);
+
+request.onerror = function(event) {
+  console.log("Error retrieving data");
+};
+
+request.onsuccess = function(event) {
+  console.log("Customer:", request.result);
+};
+```
+
+This code retrieves the customer with `id` `1` from our `"customers"` object store.
+
+One of the key features of IndexedDB is that it's asynchronous.
+
+This means that when you interact with IndexedDB, operations don't block the main thread of the web application. This ensures that your web application remains responsive even when dealing with large amounts of data.
+
+While IndexedDB provides powerful capabilities, it has a steeper learning curve compared to other simpler storage API options which can be challenging for beginners. However, for applications that need to handle large amounts of structured data on the client-side, IndexedDB offers unparalleled capabilities.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
index d2079aea91..5a307fc8bd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md
@@ -1,14 +1,30 @@
 ---
 id: 6733ffc7353af34a61ed683a
 title: What Are Cache and Service Workers, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-cache-service-workers-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Caching is the process of storing copies of files in a temporary storage location so they can be accessed more quickly.
+
+When you visit a website, your browser can save certain files (such as images, CSS, and JavaScript) locally. This means that the next time you visit the same site, it can load these files from your device instead of fetching them again from a server, making the site load faster.
+
+A Service Worker is a script that runs in the background, separate from your web page. It can intercept network requests, access the cache, and enable the web app to work offline. It is a key component of Progressive Web Apps.
+
+So, how do Cache and Service Workers work together in Progressive Web Apps?
+
+PWAs are web apps that can offer an app-like experience. They can work offline, send push notifications, and even be installed on the home screen of a mobile device or computer.
+
+When a user first visits a PWA, the Service Worker can cache important files.
+
+Users can continue to use the app offline, and when they come back online, any upcoming changes can be synced with the server.
+
+The combination of caching and Service Workers enables web apps to provide a fast and reliable experience even in poor network conditions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
index efbc82e4fd..1eb9879c22 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-code-editors-and-ides/672d45583fd75a504136fbbb.md
@@ -2,7 +2,7 @@
 id: 672d45583fd75a504136fbbb
 title: How to Install Visual Studio Code onto Your Computer
 challengeType: 11
-videoId: hWa_PgsNSw0
+videoId: JuxdN8OWllk
 dashedName: how-to-install-visual-studio-code-onto-your-computer
 ---
 
@@ -86,15 +86,15 @@ The lecture describes several ways to install VSCode on Mac, but one common meth
 
 ## --text--
 
-On Linux, what command would you use to install VSCode using the Arch Linux package manager?
+What command would you use to install VSCode using Homebrew?
 
 ## --answers--
 
-`sudo apt-get install code`
+`sudo brew -i code`
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ---
 
@@ -102,19 +102,19 @@ The lecture provides a specific command for Arch Linux users.
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ---
 
-`sudo pacman -S code`
+`brew install --cask visual-studio-code`
 
 ---
 
-`sudo dnf install code`
+`homebrew install vscode`
 
 ### --feedback--
 
-The lecture provides a specific command for Arch Linux users.
+The lecture provides a specific command for Homebrew.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
index 556fcb7ff4..600de23b15 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/672d266034b5242126271995.md
@@ -2,7 +2,7 @@
 id: 672d266034b5242126271995
 title: What Is ASCII, and How Does It Work with charCodeAt() and fromCharCode()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XMi4lKr0FRw
 dashedName: what-is-ascii-and-how-does-it-work-with-charcodeat-and-fromcharcode
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
index ec5398c2d2..20964ee3e9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c0d7bef01c539120766.md
@@ -2,7 +2,7 @@
 id: 67326c0d7bef01c539120766
 title: How Can You Test if a String Contains a Substring?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XBva3_87hWg
 dashedName: how-can-you-test-if-a-string-contains-a-substring
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
index 3bc56fab66..a63b7b0b65 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c15b3b2f0c5827927cc.md
@@ -2,7 +2,7 @@
 id: 67326c15b3b2f0c5827927cc
 title: How Can You Extract a Substring from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: xLKJvMJKYAU
 dashedName: how-can-you-extract-a-substring-from-a-string
 ---
 
@@ -18,7 +18,7 @@ What will the following code output?
 
 ```js
 let text = "JavaScript is awesome!";
-let result = text.slice(0, 10);
+let result = text.slice(0, 9);
 
 console.log(result);
 ```
@@ -97,7 +97,7 @@ What will the following code return?
 
 ```js
 let sentence = "Learning JavaScript is fun!";
-let extracted = sentence.slice(9, -4);
+let extracted = sentence.slice(9, -5);
 
 console.log(extracted);
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
index 573a12eb0e..27ac63c416 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c1fdaf9c0c5ad1a2589.md
@@ -2,7 +2,7 @@
 id: 67326c1fdaf9c0c5ad1a2589
 title: How Can You Change the Casing for a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KOaGZ2IXzV0
 dashedName: how-can-you-change-the-casing-for-a-string
 ---
 
@@ -53,7 +53,7 @@ Think about how `toUpperCase()` affects the entire string.
 What will the following code output?
 
 ```js
-javascriptCopy codelet phrase = "JavaScript is Fun!";
+let phrase = "JavaScript is Fun!";
 console.log(phrase.toLowerCase());
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
index d4e7bd05cf..ca543e6e1f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c29dcd98fc5ecc49779.md
@@ -2,7 +2,7 @@
 id: 67326c29dcd98fc5ecc49779
 title: How Can You Replace Parts of a String with Another?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: '-Ft7Whs9xRY'
 dashedName: how-can-you-replace-parts-of-a-string-with-another
 ---
 
@@ -50,35 +50,42 @@ Think about what happens when there are multiple instances of the word you are t
 
 ## --text--
 
-How can you replace all instances of a word in a string?
+What will the following code output?
+
+```js
+let phrase = "freeCodeCamp is awesome!";
+let updatedPhrase = phrase.replace("freecodecamp", "fCC");
+
+console.log(updatedPhrase);
+```
 
 ## --answers--
 
-Use a `for` loop.
+`"fcc is awesome!"`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ---
 
-Use `replace()` with a case-sensitive string.
+`"fCC is awesome!"`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ---
 
-Use `replace()` with a global regular expression.
+`"freeCodeCamp is awesome!"`
 
 ---
 
-Use `replaceAll()` instead of `replace()`.
+`undefined`
 
 ### --feedback--
 
-Consider how regular expressions can help with multiple replacements.
+Remember that the `replace()` method is case-sensitive.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
index 77e5f3679d..72f62596d9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3392068ec6184a0c95.md
@@ -2,7 +2,7 @@
 id: 67326c3392068ec6184a0c95
 title: How Can You Repeat a String x Number of Times?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: G78i7JW70hE
 dashedName: how-can-you-repeat-a-string-x-number-of-times
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
index 3e2c98fa43..dfbebc9e65 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-common-string-methods/67326c3c3ab931c644cea05b.md
@@ -2,7 +2,7 @@
 id: 67326c3c3ab931c644cea05b
 title: How Can You Trim Whitespace from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: qVjDfh-K2SY
 dashedName: how-can-you-trim-whitespace-from-a-string
 ---
 
@@ -95,7 +95,9 @@ console.log(str.trimEnd());
 
 ## --answers--
 
-`"Code"`
+```js
+"Code"
+```
 
 ### --feedback--
 
@@ -103,11 +105,15 @@ Consider which part of the string is affected by `trimEnd()`.
 
 ---
 
-`" Code"`
+```js
+"   Code"
+```
 
 ---
 
-`"Code "`
+```js
+"Code   "
+```
 
 ### --feedback--
 
@@ -115,7 +121,9 @@ Consider which part of the string is affected by `trimEnd()`.
 
 ---
 
-`" Code "`
+```js
+" Code "
+```
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
index 3d3eaaed93..58f8257052 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/672aa8ac4631d1623ec5cd86.md
@@ -2,7 +2,7 @@
 id: 672aa8ac4631d1623ec5cd86
 title: What Is CSS Grid, and How Does It Differ from Flexbox?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: uh0EzmmlpwQ
 dashedName: what-is-css-grid
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
index bba9197b3c..6a3f64997f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
@@ -2,7 +2,7 @@
 id: 673226732b19aa1cacd0a75c
 title: How Can You Create Flexible Grids with the fr Unit?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: frGW2L836GU
 dashedName: how-can-you-create-flexible-grids-with-the-fr-unit
 ---
 
@@ -91,7 +91,7 @@ What happens when you use `grid-template-columns: 1fr 1fr 1fr 1fr;` in a CSS gri
 
 ## --answers--
 
-The container will have four columns, each taking up 10% of the container’s width.
+The container will have four columns, each taking up 10% of the container's width.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
index cb9240fab1..fa6512ecaa 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
@@ -2,7 +2,7 @@
 id: 6732267ecab2151ced471cd4
 title: How Can You Create Gaps Between Tracks in a Grid?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: f8jbUFfvZ_Q
 dashedName: how-can-you-create-gaps-between-tracks-in-a-grid
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
index 2b14792c8f..0a5ab5c32a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
@@ -2,7 +2,7 @@
 id: 6732268d05c3661d32a0fee8
 title: How Can You Repeat Track Listings in a Grid Layout?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: d2wi5br6o0E
 dashedName: how-can-you-repeat-track-listings-in-a-grid-layout
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
index 55dead81ed..bcaf3ee8ef 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md
@@ -2,7 +2,7 @@
 id: 6732269a7aa2ca1d6b6574fe
 title: What Is the Difference Between an Implicit and Explicit Grid?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: QMqRqHE_t8k
 dashedName: what-is-the-difference-between-an-implicit-and-explicit-grid
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
index 73675c2b62..4f96da8225 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226a62eb2121da41a3d68.md
@@ -2,7 +2,7 @@
 id: 673226a62eb2121da41a3d68
 title: What Is the minmax() Function and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: rpWiq2k2B_8
 dashedName: what-is-the-minmax-function-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
index afe98aad00..8f51dffeaa 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226afcd33991dd751937a.md
@@ -2,7 +2,7 @@
 id: 673226afcd33991dd751937a
 title: How Do the grid-column and grid-row Properties Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ZKlcAue2j_U
 dashedName: how-do-the-grid-column-and-grid-row-properties-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
index 06d6182cc8..02c9ce264a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
@@ -2,7 +2,7 @@
 id: 673226b97d4a731e0577ae93
 title: How Can You Position Items on the Grid Using the grid-template-areas Property?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: PV83v-6vxKw
 dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property
 ---
 
@@ -14,35 +14,35 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What do the `grid-column` and `grid-row` properties specify in a grid layout?
+How do you design a grid layout with the `grid-template-areas` property?
 
 ## --answers--
 
-The size of the grid container.
+With comma separated values like `1 / 4` to represent the different rows and columns of the layout.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ---
 
-The alignment of the entire grid.
+With comma separated values like `header` and `footer`.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ---
 
-The horizontal and vertical placement of grid items.
+With strings of space-separated values to represent the different rows and columns of the layout.
 
 ---
 
-The size of grid tracks.
+With space-separated values like `2fr 1fr 1fr`.
 
 ### --feedback--
 
-Focus on the property that assigns visual labels for the layout.
+Recall that this property uses separate strings, each with separate values, to represent the different rows and columns of the layout, respectively.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
index b7cf9657aa..5888765c6d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672aa7e03c2e365e906e5733.md
@@ -2,7 +2,7 @@
 id: 672aa7e03c2e365e906e5733
 title: What Is Overflow in CSS, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: iqnkHaVCLww
 dashedName: what-is-overflow-in-css
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
index d97065c696..c892ba2327 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md
@@ -2,7 +2,7 @@
 id: 672bcc8ccc976fd791610f43
 title: What Is the CSS Transform Property, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pC59ipGpaDk
 dashedName: what-is-the-css-transform-property
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
index 8ac6e6e23d..7b4f0292ae 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bcc9c4a6dd6d7dd3e6357.md
@@ -2,7 +2,7 @@
 id: 672bcc9c4a6dd6d7dd3e6357
 title: What Is the CSS Box Model, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: oBIIFdfLGos
 dashedName: what-is-the-css-box-model
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
index 12c059731c..2892dd8fd7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
@@ -2,7 +2,7 @@
 id: 672bccae6e556cd81cef6af2
 title: What Is Margin Collapsing, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: MMWBC8duT_0
 dashedName: what-is-margin-collapsing
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
index 80888cea82..d1ba6e030a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md
@@ -2,7 +2,7 @@
 id: 672bccc8ea33bad87abb3c56
 title: What Is the Difference Between content-box and border-box?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: eKqNs2XXG14
 dashedName: what-is-the-difference-between-content-box-and-border-box
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
index 0df4558a03..04b27c6b43 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md
@@ -2,7 +2,7 @@
 id: 672bccdb8f1823d8c60f914c
 title: What Is a CSS Reset, and What Are Some Common Examples?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2VPFQpukQV8
 dashedName: what-is-a-css-reset
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
index c5ee4a0846..0f5889f3cc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-transforms-overflow-and-filters/672bccebe1fc82d911c3f078.md
@@ -2,7 +2,7 @@
 id: 672bccebe1fc82d911c3f078
 title: What Is the CSS Filter Property, and What Are Common Examples?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9ta8m4T9KYc
 dashedName: what-is-the-css-filter-property
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
index 50cd496e23..8a53a50148 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672aa8985acb7361e656f94c.md
@@ -2,7 +2,7 @@
 id: 672aa8985acb7361e656f94c
 title: What Are CSS Custom Properties, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: rG9-26gM3eU
 dashedName: what-are-css-custom-properties
 ---
 
@@ -86,7 +86,7 @@ Think about the function used to reference custom properties in CSS.
 
 ## --text--
 
-What is a key advantage of using CSS custom properties over preprocessor variables?
+What is something you should be aware of when using CSS custom properties?
 
 ## --answers--
 
@@ -94,27 +94,27 @@ They can be used with older versions of CSS.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ---
 
-They can be manipulated using JavaScript at runtime.
+They might not be supported by older browsers.
 
 ---
 
-They are faster to process than preprocessor variables.
+They can lead to faster page speeds.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ---
 
-They can hold more complex values than preprocessor variables.
+They increase repetition in your stylesheets.
 
 ### --feedback--
 
-Consider the dynamic nature of CSS custom properties compared to preprocessor variables.
+Consider how recently CSS custom properties were introduced, and how that might cause issues for people with older devices.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
index 3781b2687d..a97c67aeec 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-css-variables/672cf3ca326da9f63683e236.md
@@ -2,7 +2,7 @@
 id: 672cf3ca326da9f63683e236
 title: What Is the @property Rule, and How Does It Work with Fallbacks?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lFwXJzcJ9fg
 dashedName: what-is-the-at-property-rule
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
index 3e86207006..d9706a50d9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md
@@ -1,14 +1,136 @@
 ---
 id: 6734e3ceee2da4b0301719b7
 title: How Do You Pass Props from Parent to Child Component in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-you-pass-props-from-parent-to-child-component-in-react
 ---
 
 # --description--
 
-Watch the video lecture and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In the previous lectures, we learned how to build small components in React like this:
+
+```js
+function Greeting() {
+  const developerName = "Jessica";
+  return <h1>Hi {developerName}!</h1>;
+}
+```
+
+We can choose to nest this component inside another parent component or the root component like this:
+
+```js
+function App() {
+  return <Greeting />;
+}
+
+function Greeting() {
+  const developerName = "Jessica";
+  return <h1>Hi {developerName}!</h1>;
+}
+```
+
+While this code will run fine and display the result of Hi Jessica! on the screen, it is not that flexible of a component.
+
+What if we wanted to display a different name like Naomi, Tom, or Oliver?
+
+This is where React props comes in.
+
+Props, which is short for properties, is the way for Parent components to pass data down to the child component.
+
+Props can be of any type: strings, numbers, booleans, objects, or arrays.
+
+Let’s update our example from earlier to now accept a `name` prop:
+
+```js
+function App() {
+  return <Greeting name="Jessica" />;
+}
+
+export default App;
+
+function Greeting(props) {
+  console.log(props);
+  return <h1>Hi {props.name}!</h1>;
+}
+```
+
+For the child component called `Greeting` we are now using `props.name` instead of hardcoding the name `"Jessica"`. We are also logging props to the console which is showing as an object.
+
+Then inside of the parent App component, we are passing the value to the name prop so it can be passed down to the child.
+
+The result will be the same on the screen like earlier, but now we have created a more flexible component.
+
+Now we have the ability to reuse the child component several times and pass in different names each time.
+
+```js
+function App() {
+  return (
+    <>
+      <Greeting name="Naomi" />
+      <Greeting name="Tom" />
+      <Greeting name="Jessica" />
+      <Greeting name="Oliver" />
+    </>
+  );
+}
+```
+
+You can also choose to use object destructuring in the props to make it more readable.
+
+Here's how you could rewrite the `Greeting` component:
+
+```js
+function Greeting({ name }) {
+  return <h1>Hi {name}!</h1>;
+}
+```
+
+This code achieves the same result but makes it clearer which props the component is expecting to receive.
+
+Sometimes, you can have a lot of properties that you have to pass as props. Instead of passing them one by one, you can use the spread operator (`...`), after converting them to an object.
+
+Here is an example of a new child component called `DeveloperCard`:
+
+```js
+function DeveloperCard({ name, age, country }) {
+  return (
+    <div className="developer-card">
+      <h1>Developer: {name}</h1>
+      <p>Age: {age}</p>
+      <p>Country: {country}</p>
+    </div>
+  );
+}
+```
+
+This `DeveloperCard` component accepts three props: `name`, `age`, and `country`.
+
+In the parent `App` component, we can use the spread syntax to pass all the properties from an object as individual props to the child component.
+
+```js
+function App() {
+  const developerObj = {
+    name: "Alice",
+    age: 30,
+    country: "USA",
+  };
+
+  return (
+    <div className="App">
+      <DeveloperCard {...developerObj} />
+    </div>
+  );
+}
+```
+
+This is particularly useful when working with arrays of objects and passing multiple sets of properties to child components. For example, you might have a list of developers where each object in the array has the same structure but represents a different person.
+
+You will learn more about how to render lists in React in future lectures.
+
+Using props in React makes your components more flexible and reusable, allowing you to build more complex UIs. However, it's important to note that props are immutable, meaning they cannot be changed once passed to a component. If you need to handle user input and modify data, you should use state instead. You'll learn more about managing state in future lectures.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
index 59701e4b40..25b6b6c3bf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md
@@ -1,14 +1,71 @@
 ---
 id: 673500abfe36cd015b67b1b7
 title: How Does Conditional Rendering Work in React Components?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-does-conditional-rendering-work-in-react-components
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application.
+
+The most common approaches of using Conditional rendering includes using if statements, the ternary operator, and `logical AND (&&)` operator.
+
+The simplest form of conditional rendering uses an if statement.
+
+Here's an example:
+
+```js
+function Greeting({ isLoggedIn }) {
+  if (isLoggedIn) {
+    return <h1>Welcome back!</h1>;
+  }
+  return <h1>Please sign in</h1>;
+}
+```
+
+In this example, the `Greeting` component checks the `isLoggedIn` prop. If it's true, it returns a welcome message, otherwise, it prompts the user to sign in.
+
+Here is an example using the Greeting component inside of the parent App component.
+
+```js
+function App() {
+  return (
+    <div className="App">
+      <Greeting isLoggedIn={false} />
+    </div>
+  );
+}
+```
+
+For simpler conditions, the ternary operator (?) is often used directly within JSX. It allows for inline conditional rendering, which can make your code more concise:
+
+```js
+function Greeting({ isLoggedIn }) {
+  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
+}
+```
+
+This code achieves the same result as the previous example but in a more compact form. The ternary operator checks isLoggedIn and renders the appropriate message.
+
+Another common pattern for conditional rendering is using the `logical AND (&&)` operator. This is particularly useful when you want to render something or nothing based on a condition:
+
+```js
+function Notification({ message }) {
+  return (
+    <div>
+      {message && <p>{message}</p>}
+    </div>
+  );
+}
+```
+
+In this example, the paragraph element with the message is only rendered if the `message` prop is truthy. If `message` is falsy (meaning it is an empty string, `null`, or `undefined`), nothing is rendered to the screen.
+
+By mastering these techniques of conditional rendering, you can build more interactive and user-friendly applications that adapt to changing data and user interactions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
index 957731e786..bf14742e40 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md
@@ -1,14 +1,80 @@
 ---
 id: 673500b41af8500191febedc
 title: How Do You Render Lists in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-you-render-lists-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map()` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI.
+
+Here is an example of a component called `FruitList` that displays a list of fruits:
+
+```js
+function FruitList() {
+  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
+  return (
+    <ul>
+      {fruits.map(fruit => <li>{fruit}</li>)}
+    </ul>
+  );
+}
+```
+
+In this example, the `map()` function iterates over each item in the fruits array. For each fruit, it creates a new `<li>` element containing the fruit's name. The newly created array of `<li>` elements is then displayed inside the `<ul>` parent tags.
+
+However, when rendering lists in React, it is important not to forget the key prop to each element in the list. The key must always be unique and it helps React identify which items have changed, been added, or been removed, which is essential for efficient rendering and updating the list.
+
+Let's modify our example to include keys:
+
+```js
+function FruitList() {
+  const fruits = ["Apple", "Banana", "Cherry", "Date"];
+  return (
+    <ul>
+      {fruits.map((fruit, index) => (
+        <li key={`${fruit}-${index}`}>{fruit}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+In this refactored example, we are creating a unique key for each list item by concatenating the fruit name with its index. This ensures that each list item has a distinct key, which helps React efficiently manage and update the list when items are added, removed, or reordered.
+
+React's also allows you to render more complex structures. For instance, you might have an array of objects representing users, each with multiple properties that you want to display:
+
+```js
+function UserList() {
+  const users = [
+    { id: "user-001-employee", name: "Alice", email: "alice@example.com" },
+    { id: "user-002-employee", name: "Bob", email: "bob@example.com" },
+    { id: "user-003-employee", name: "John", email: "john@example.com" },
+  ];
+  return (
+    <div>
+      {users.map((user) => (
+        <div key={user.id}>
+          <h3>{user.name}</h3>
+          <p>{user.email}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+In this example, we're creating a more complex JSX structure for each user, displaying both their name and email. We're using the user's id as the key, which is a good practice.
+
+In conclusion, rendering lists in React involves converting arrays of data into JSX elements, typically using the `map()` function.
+
+Always remember to provide a unique key for each list item to help React manage the updating and rendering roles.
+
+With these techniques, you can create flexible, efficient, and dynamic lists in your React applications.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
index 42fc4bdbd4..ac21642908 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md
@@ -1,14 +1,81 @@
 ---
 id: 673500bfe1f41601c1ddb1a2
 title: How Do Inline Styles Work in React?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: how-do-inline-styles-work-in-react
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+In React, inline styles are used to apply CSS styles directly to React elements within your JSX code instead of defining them in separate CSS files.
+
+React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camelCased versions of CSS property names, and the values are the strings of CSS values.
+
+Here is an example of how you can use inline styles for a `Button` component:
+
+```js
+function Button({ buttonText }) {
+  const defaultStyles = {
+    backgroundColor: "#007BFF",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    padding: "10px 20px",
+    fontSize: "16px",
+    fontWeight: "bold",
+    cursor: "pointer",
+    transition: "background-color 0.3s ease",
+  };
+
+  return <button style={defaultStyles}>{buttonText}</button>;
+}
+```
+
+In this example, we define a style object called defaultStyles. We then apply these styles to a button element using the style attribute. React takes care of applying these styles to the element when it renders.
+
+You can also choose to pass in an object directly to the style attribute. Here is what a revised example would look like:
+
+```js
+function Button({ buttonText }) {
+  return (
+    <button
+      style={{
+        backgroundColor: "#007BFF",
+        color: "white",
+      }}
+    >
+      {buttonText}
+    </button>
+  );
+}
+```
+
+Sometimes you might want to pass in an object directly if there are only a few properties like shown here. Otherwise, passing in a name to an object would be better like in the first example.
+
+It's important to note that while CSS property names are typically written in kebab-case (like font-size), in React's inline styles, we use camelCase (like fontSize). This is because the style object is a JavaScript object, and kebab-case names are not valid as object keys in JavaScript without using quotes.
+
+A great advantage of inline styles in React is that they support dynamic styling based on a component state or props. For example:
+
+```js
+function DynamicButton({ isActive }) {
+  const buttonStyles = {
+    backgroundColor: isActive ? "green" : "red",
+    color: "white",
+    padding: "10px 15px",
+    border: "none",
+    cursor: "pointer",
+  };
+
+  return <button style={buttonStyles}>Login</button>;
+}
+```
+
+In this example, the button's background color changes based on the isActive prop. This kind of dynamic styling can be powerful for creating interactive and responsive user interfaces.
+
+In summary, inline styles in React provide a powerful way to apply and manipulate styles directly within your components. They use JavaScript objects instead of CSS strings, require camelCased property names, and can easily incorporate dynamic values. They're an essential tool in a React developer's toolkit, especially for creating highly customized and interactive user interfaces.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
index 2dece399e2..f6409110e6 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/672d264645e289208e562f10.md
@@ -2,7 +2,7 @@
 id: 672d264645e289208e562f10
 title: What Is Dynamic Typing in JavaScript, and How Does It Differ from Statically Typed Languages?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: IOKsF08zioQ
 dashedName: what-is-dynamic-typing-in-javascript-and-how-does-it-differ-from-statically-typed-languages
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
index ad8edaae65..b3dd9cdb9c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-data-types/6732518a8627876f4fcd18a4.md
@@ -2,7 +2,7 @@
 id: 6732518a8627876f4fcd18a4
 title: How Does the typeof Operator Work, and What Is the typeof null Bug in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: DDHu5VDlkPM
 dashedName: how-does-the-typeof-operator-work-and-what-is-the-typeof-null-bug-in-javascript
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What does the `typeof` operator return when used on a `string` in JavaScript?
+What does the `typeof` operator return when used on a string in JavaScript?
 
 ## --answers--
 
@@ -86,7 +86,7 @@ Recall the unexpected behavior when checking the type of `null`.
 
 ## --text--
 
-How does `typeof` behave when checking the type of a `number`?
+How does `typeof` behave when checking the type of a number?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
index 92714c7a4e..57287c577f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md
@@ -2,7 +2,7 @@
 id: 6733aafb9c0802f66cc1e056
 title: How Does the JavaScript Data Object Work, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: aFGXBwkmNqg
 dashedName: how-does-the-javascript-data-object-work-and-what-are-some-common-methods
 ---
 
@@ -54,11 +54,11 @@ If you use the `getMonth` method and it returns `4`, which month is being repres
 
 ## --answers--
 
-`April`
+`May`
 
 ---
 
-`May`
+`April`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
index d00bcaffc3..c803fed955 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-dates/6733d608654c17868e01c0a2.md
@@ -2,7 +2,7 @@
 id: 6733d608654c17868e01c0a2
 title: What Are the Different Ways to Format Dates?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 67I6H8Vce2E
 dashedName: what-are-the-different-ways-to-format-dates
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
index 8942cd8356..683f59ec45 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-file-systems/672ac37104dc2530a769e6a4.md
@@ -38,7 +38,7 @@ Think about the file name that looks complicated.
 
 ---
 
-products.html
+`products.html`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md
index 28f4518c0d..bbd535265b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/672d269da46786225e3fe3fd.md
@@ -2,7 +2,7 @@
 id: 672d269da46786225e3fe3fd
 title: What Is the Purpose of Functions, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sU2mIGNjBtc
 dashedName: what-is-the-purpose-of-functions-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md
index 2ac2ecd8ce..8b8da846a9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284d5e52ef81a2169b097.md
@@ -2,13 +2,13 @@
 id: 673284d5e52ef81a2169b097
 title: What Are Arrow Functions, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EVrZqQ7Y3So
 dashedName: what-are-arrow-functions-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md
index 87e98db0a0..8373bf7ebd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-functions/673284e7244c0c1a649121b9.md
@@ -2,13 +2,13 @@
 id: 673284e7244c0c1a649121b9
 title: What Is Scope in Programming, and How Does Global, Local, and Block Scope Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: saSaw-VOFuo
 dashedName: what-is-scope-in-programming-and-how-does-global-local-and-block-scope-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
index 6c407d3ce4..1aae18e36b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67329ffd75010f5ddeb4ea13.md
@@ -2,7 +2,7 @@
 id: 67329ffd75010f5ddeb4ea13
 title: What Is a Callback Function, and How Does It Work with the forEach Method?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Ye6d69RVeqY
 dashedName: what-is-a-callback-function-and-how-does-it-work-with-the-foreach-method
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
index e922b881c1..fe5a9fbf34 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/67336296a3c1591da81856c2.md
@@ -2,7 +2,7 @@
 id: 67336296a3c1591da81856c2
 title: What Are Higher-Order Functions?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: dj9Pt4tODfA
 dashedName: what-are-higher-order-functions
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
index 816314c512..a19d36fb50 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md
@@ -2,13 +2,13 @@
 id: 673362a34edda41dedf87623
 title: What Is the Map Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: CdSr7rv8pwo
 dashedName: what-is-the-map-method-and-how-does-it-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
index f859943167..c4b05e8119 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362b3f763ae1e38e17df7.md
@@ -2,7 +2,7 @@
 id: 673362b3f763ae1e38e17df7
 title: What Is the Filter Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EaVyNFI53Mk
 dashedName: what-is-the-filter-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
index be1d5e441f..bea6d82f98 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362be2f70c21e65bc5459.md
@@ -2,7 +2,7 @@
 id: 673362be2f70c21e65bc5459
 title: What Is the Reduce Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: fxgwdO-Eii8
 dashedName: what-is-the-reduce-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
index 538b78c844..f721c1d624 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362cbb475e21eab726506.md
@@ -2,7 +2,7 @@
 id: 673362cbb475e21eab726506
 title: What Is Method Chaining, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bsCkwxZ4sho
 dashedName: what-is-method-chaining-and-how-does-it-work
 ---
 
@@ -116,7 +116,7 @@ console.log(result);
 
 ## --answers--
 
-2
+`2`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
index 540d92a0f8..99550b28a5 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362d7f94d551edb532d24.md
@@ -2,7 +2,7 @@
 id: 673362d7f94d551edb532d24
 title: How Does the Sort Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: eA5HGl-qsdA
 dashedName: how-does-the-sort-method-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
index 6ec357a968..12db447450 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-higher-order-functions-and-callbacks/673362e43d57b51f1ad2d466.md
@@ -2,7 +2,7 @@
 id: 673362e43d57b51f1ad2d466
 title: How Do the every() and some() Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ELHJGK4IyqU
 dashedName: how-do-the-every-and-some-methods-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
index ab1b8a6f1a..02f33dec43 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-html-tools/672a4fa7d335bc7cfb63a392.md
@@ -86,36 +86,36 @@ A tool that checks the validity of HTML.
 
 ## --text--
 
-Which of these is not an example of an HTML validator?
+Which of these is an example of an HTML validator?
 
 ## --answers--
 
-W3.org HTML validator.
+W3.org HTML validator
 
-### --feedback--
+---
 
-Look out for the option that is not an HTML validator.
+CSS Lint
 
----
+### --feedback--
 
-JS World HTML Validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ---
 
-Prettier Code Formatter.
+JavaScript Debugger
 
 ### --feedback--
 
-Look out for the option that is not an HTML validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ---
 
-JSONFormatter.org HTML Validator.
+Photoshop
 
 ### --feedback--
 
-Look out for the option that is not an HTML validator.
+Look for the tool specifically designed to check the validity of HTML code.
 
 ## --video-solution--
 
-2
+1
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
index 22712e9c17..950d3b1275 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716744f7245947a3dd60009.md
@@ -1,6 +1,6 @@
 ---
 id: 6716744f7245947a3dd60009
-videoId: D4PO-NUqmzg
+videoId: zf4bbN-hYOg
 title: What Are the Different Target Attribute Types, and How Do They Work?
 challengeType: 11
 dashedName: what-are-the-different-target-attribute-types
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
index 40e0a83659..7bc6e9ff7d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/671682dd88e461a8e2620f38.md
@@ -1,6 +1,6 @@
 ---
 id: 671682dd88e461a8e2620f38
-videoId: hpEmssjWh-0
+videoId: bxr4p5Ik4js
 title: What Is the Difference Between Absolute and Relative Paths?
 challengeType: 11
 dashedName: what-is-the-difference-between-absolute-and-relative-paths
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
index f708e3445a..9327a2725c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
@@ -1,6 +1,6 @@
 ---
 id: 6716830dbaf95da9564f2e3b
-videoId: nVAaxZ34khk
+videoId: GTgzy4wPXcM
 title: What Is the Difference Between Slashes, a Single Dot, and Double Dot in Path Syntax?
 challengeType: 11
 dashedName: what-is-the-difference-between-slashes-a-single-dot-and-double-dot-in-path-syntax
@@ -26,7 +26,7 @@ Which option is an absolute path?
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -34,7 +34,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -42,7 +42,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
index e02d8909a7..c2d2741e7a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
@@ -1,6 +1,6 @@
 ---
 id: 67168323932391a9ee0d3a9e
-videoId: O86-AxNc0nU
+videoId: ztu_9h2ZJrA
 title: What Are the Different Link States, and Why Are They Important?
 challengeType: 11
 dashedName: what-are-the-different-link-states
@@ -94,7 +94,7 @@ In what order should you style your links?
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -102,7 +102,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -110,7 +110,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
index 676a886137..816424d2dd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/67329f7f3d1bd75c17896c66.md
@@ -2,7 +2,7 @@
 id: 67329f7f3d1bd75c17896c66
 title: How Do Loops and Iteration Work in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2h4RsvyUDH4
 dashedName: how-do-loops-and-iteration-work-in-javascript
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
index 26e85ea235..4f6e763e6d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c04638420641dcca2e6e.md
@@ -2,7 +2,7 @@
 id: 6732c04638420641dcca2e6e
 title: How Does the For...of Loop Work, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 3EvkUpl4IQs
 dashedName: how-does-the-for-of-loop-work-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
index cbd715bf2a..4462c37abc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c05595ca7d422b9e55ff.md
@@ -2,7 +2,7 @@
 id: 6732c05595ca7d422b9e55ff
 title: What Is the For...in Loop, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: K0dZ8f9AZt4
 dashedName: what-is-the-for-in-loop-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
index 11eeb943ca..651015d2e4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c06654ea3442724284fe.md
@@ -2,7 +2,7 @@
 id: 6732c06654ea3442724284fe
 title: What Is a While Loop, and How Does It Differ from the Do...while Loop?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 93KL4Ou1eXU
 dashedName: what-is-a-while-loop-and-how-does-it-differ-from-the-do-while-loop
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
index 80429b20e1..9e1bd6c97d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-loops/6732c07238355642a9781dfb.md
@@ -2,7 +2,7 @@
 id: 6732c07238355642a9781dfb
 title: What Are the Break and Continue Statements Used for in Loops?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: U3gATVuQTxQ
 dashedName: what-are-the-break-and-continue-statements-used-for-in-loops
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
index ede42b9287..9327c83582 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733ab269b378bf724c9ac71.md
@@ -2,7 +2,7 @@
 id: 6733ab269b378bf724c9ac71
 title: What Are Sets in JavaScript, and How Does It Differ from WeakSets?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4XFTr08_hog
 dashedName: what-are-sets-in-javascript-and-how-does-it-differ-from-weaksets
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
index f09c5a8158..977210422e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-maps-and-sets/6733dd694f91d61a5272b4ac.md
@@ -2,7 +2,7 @@
 id: 6733dd694f91d61a5272b4ac
 title: What Is the Map Object, and How Does It Differ from WeakMaps?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 2hHKZBPJQRY
 dashedName: what-is-the-map-object-and-how-does-it-differ-from-weakmaps
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
index ee6bf2b9f0..86d44f1b1d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
@@ -50,11 +50,11 @@ Using a mismatched size can create loading or display issues.
 
 ## --text--
 
-Which file type should you prefer?
+Which of the following is NOT a valid image file type?
 
 ## --answers--
 
-WEBP
+TS
 
 ---
 
@@ -62,7 +62,7 @@ PNG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
@@ -70,15 +70,15 @@ JPG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
-GIF
+WEBP
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
index 0c1cf5df63..1e02cee3fe 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
@@ -26,7 +26,7 @@ Permissive license
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -34,7 +34,7 @@ Public Domain
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Creative Commons
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ## --video-solution--
 
@@ -90,32 +90,32 @@ How can you find images that you are allowed to use?
 
 ## --answers--
 
-Search engine filters.
+Search for images on Google and use them freely.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-Dedicated websites like Pixabay.
-
-### --feedback--
-
-There are multiple options.
+Use websites like Pixabay or Unsplash.
 
 ---
 
-Creating your own image.
+Use any image from social media as long as you give credit.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-All of the above.
+You can use any image as long as it's not watermarked.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
 
 ## --video-solution--
 
-4
+2
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
index 5afb78dfe8..116fb99d96 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
@@ -22,7 +22,7 @@ An image which stores paths, lines, points, and curves.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -34,7 +34,7 @@ All images are raster images.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -42,7 +42,7 @@ An image which is easily scalable.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ## --video-solution--
 
@@ -62,7 +62,7 @@ An image which stores color data for each pixel.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -70,7 +70,7 @@ All images are vector images.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -78,7 +78,7 @@ An image which is not easily scalable.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ## --video-solution--
 
@@ -94,7 +94,7 @@ As pixels.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -102,7 +102,7 @@ As binary.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -110,7 +110,7 @@ As hexadecimal.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
index 04535ddc16..678424a3aa 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
@@ -22,7 +22,7 @@ What attribute allows the audio to start in a muted state?
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -30,7 +30,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -38,7 +38,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
index 72278f888a..28deeb7f56 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/672d26809d388621ad1ecd43.md
@@ -2,7 +2,7 @@
 id: 672d26809d388621ad1ecd43
 title: How Does isNaN Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lxK56X8Rr1M
 dashedName: how-does-isnan-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
index cb6dd13339..ccae567b85 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/6732808f3221720adc833e81.md
@@ -2,7 +2,7 @@
 id: 6732808f3221720adc833e81
 title: How Do the parseFloat() and parseInt() Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 5Q_BlR2NKYk
 dashedName: how-do-the-parsefloat-and-parseint-methods-work
 ---
 
@@ -74,7 +74,7 @@ Consider how `Number.parseInt()` handles leading whitespace and non-digit charac
 
 ---
 
-42
+`42`
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
index 2daec965f3..b371fd65d2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-and-common-number-methods/673280a1c29d0a0b17316e56.md
@@ -2,7 +2,7 @@
 id: 673280a1c29d0a0b17316e56
 title: What Is the toFixed() Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4GnMICoBC1Y
 dashedName: what-is-the-tofixed-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md
index 099c339146..ca24f48370 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/672d266e014ef8216df987d2.md
@@ -2,7 +2,7 @@
 id: 672d266e014ef8216df987d2
 title: What Is the Number Type in JavaScript, and What Are the Different Types of Numbers Available?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ccHZ7e8z4SM
 dashedName: what-is-the-number-type-in-javascript-and-what-are-the-different-types-of-numbers-available
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md
index ea0aa4ac2f..a9f1a0d033 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271884bf678d8b9c64f56.md
@@ -2,7 +2,7 @@
 id: 673271884bf678d8b9c64f56
 title: What Are the Different Arithmetic Operators in JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: guUVaI-X7Gk
 dashedName: what-are-the-different-arithmetic-operators-in-javascript
 ---
 
@@ -14,107 +14,117 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-How can you check if a number is even using the `modulus` operator in JavaScript?
+Which of the following operators should you use to subtract one number from another?
 
 ## --answers--
 
-Use the `modulus` operator and check if the remainder is equal to `0` using strict equality (`===`).
+`+`
 
----
+### --feedback--
 
-Use the `modulus` operator and check if the remainder is greater than `1`.
+Think about the symbol typically used for subtraction.
 
-### --feedback--
+---
 
-Consider what remainder an even number gives when divided by `2`.
+`-`
 
 ---
 
-Use the `modulus` operator and ignore the remainder.
+`*`
 
 ### --feedback--
 
-Consider what remainder an even number gives when divided by `2`.
+Think about the symbol typically used for subtraction.
 
 ---
 
-Use the `modulus` operator and check if the remainder is equal to 1.
+`/`
 
 ### --feedback--
 
-Consider what remainder an even number gives when divided by `2`.
+Think about the symbol typically used for subtraction.
 
 ## --video-solution--
 
-1
+2
 
 ## --text--
 
-Which of these statements best describes operator precedence in JavaScript?
+What’s the output of the following code?
+
+```js
+const result = 4 / 0;
+console.log(result);
+```
 
 ## --answers--
 
-Addition and subtraction have the highest precedence.
+`Infinity`
 
-### --feedback--
+---
 
-Consider which operations are executed first in a mathematical expression.
+`4`
 
----
+### --feedback--
 
-Exponentiation has the highest precedence, followed by multiplication, division, and remainder.
+Recall the special value JavaScript returns when you divide by zero.
 
 ---
 
-Multiplication and division have lower precedence than addition and subtraction.
+`1`
 
 ### --feedback--
 
-Consider which operations are executed first in a mathematical expression.
+Recall the special value JavaScript returns when you divide by zero.
 
 ---
 
-All operators have the same precedence.
+`16`
 
 ### --feedback--
 
-Consider which operations are executed first in a mathematical expression.
+Recall the special value JavaScript returns when you divide by zero.
 
 ## --video-solution--
 
-2
+1
 
 ## --text--
 
-How do you use the subtraction operator in JavaScript to find the difference between two numbers?
+What’s the output of the following code?
+
+```js
+const remainder = 5 % 3;
+console.log(remainder);
+```
 
 ## --answers--
 
-Use the plus sign (`+`) to subtract numbers.
+`15`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ---
 
-Use the minus sign (`-`) to subtract a smaller number from a bigger number.
+`2`
 
 ---
 
-Use the multiplication sign (`*`) to perform subtraction.
+`3`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ---
 
-Use the division sign (`/`) to find the difference.
+`1.6666666666666667`
 
 ### --feedback--
 
-Think about the symbol typically used for subtraction.
+Remember that `%` is the remainder operator, so another way to think of the equation is, after `3` goes into `5` once, what’s left?
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md
index 8bd8a87d00..0dddc6cbb0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/67327195e77b1bd90bdd49d7.md
@@ -2,7 +2,7 @@
 id: 67327195e77b1bd90bdd49d7
 title: What Happens When You Try to Do Calculations with Numbers and Strings?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KPFskFoAzUA
 dashedName: what-happens-when-you-try-to-do-calculations-with-numbers-and-strings
 ---
 
@@ -14,35 +14,39 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What happens when you perform arithmetic operations with a boolean (`true` or `false`) in JavaScript?
+What happens when you run the following code?
+
+```js
+const result = 3 + "19";
+```
 
 ## --answers--
 
-JavaScript throws an error.
+JavaScript ignores the string and only performs the operation on the number.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ---
 
-JavaScript ignores the boolean and only performs the operation on numbers.
+JavaScript throws an error when you try to mix strings and numbers in arithmetic.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ---
 
-JavaScript treats `true` as `1` and `false` as `0` in arithmetic operations.
+JavaScript converts the number `3` into the string `"3"`, concatenates the two strings, and assigns the value `"319"` to `result`.
 
 ---
 
-JavaScript converts the boolean to a string before performing the operation.
+JavaScript converts the string `"19"` into the number `19`, performs the operation, and assigns the value `22` to `result`.
 
 ### --feedback--
 
-Consider how JavaScript interprets `true` and `false` in numerical contexts.
+Recall how type coercion works for addition operations, and how you use the same symbol to combine strings.
 
 ## --video-solution--
 
@@ -50,71 +54,75 @@ Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ## --text--
 
-What happens when you perform arithmetic operations like subtraction, multiplication, or division with a string and a number in JavaScript?
+What happens when you run the following code?
+
+```js
+const result = "6" - 4;
+```
 
 ## --answers--
 
-JavaScript ignores the string and only performs the operation on the number.
+Conversion fails and JavaScript returns `NaN`.
 
 ### --feedback--
 
-Think about how JavaScript handles different data types in math operations.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
 ---
 
-JavaScript throws an error when you try to mix strings and numbers in arithmetic.
+JavaScript converts the number `4` into the string `"4"`, concatenates the two strings, and assigns the value `"64"` to `result`.
 
 ### --feedback--
 
-Think about how JavaScript handles different data types in math operations.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
 ---
 
-JavaScript converts the string into a number before performing the operation, a process called type coercion.
+The value `Infinity` is assigned to `result`.
 
----
+### --feedback--
 
-JavaScript converts the number into a string before performing the operation.
+Recall how type coercion works for subtraction, multiplication, division, and other kinds of operations.
 
-### --feedback--
+---
 
-Think about how JavaScript handles different data types in math operations.
+JavaScript converts the string `"6"` into the number `6`, performs the operation, and assigns the value `2` to `result`.
 
 ## --video-solution--
 
-3
+4
 
 ## --text--
 
-How does JavaScript handle arrays or objects in arithmetic operations?
+What happens when you perform arithmetic operations with a boolean (`true` or `false`) in JavaScript?
 
 ## --answers--
 
-It throws an error.
+JavaScript throws an error.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ---
 
-It performs the arithmetic operation normally without any conversion.
+JavaScript ignores the boolean and only performs the operation on numbers.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ---
 
-It converts the array or object to a string and then concatenates it with the number.
+JavaScript treats `true` as `1` and `false` as `0` in arithmetic operations.
 
 ---
 
-It ignores the array or object and only operates on the number.
+JavaScript converts the boolean to a string before performing the operation.
 
 ### --feedback--
 
-Consider how JavaScript treats non-numeric types when combined with numbers.
+Consider how JavaScript interprets `true` and `false` in numerical contexts.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md
index fcaf6be9d2..1ee9d0a810 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/6732719e2e3ad4d947410b65.md
@@ -2,7 +2,7 @@
 id: 6732719e2e3ad4d947410b65
 title: How Does Operator Precedence Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pnXCNw4fCyU
 dashedName: how-does-operator-precedence-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md
index a704f909f3..24d3384157 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271a8998ddfd97578d095.md
@@ -2,7 +2,7 @@
 id: 673271a8998ddfd97578d095
 title: How Do the Increment and Decrement Operators Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: byGvO4RC26w
 dashedName: how-do-the-increment-and-decrement-operators-work
 ---
 
@@ -66,7 +66,7 @@ Prefix (`++value` or `--value`).
 
 ---
 
-Either prefix or postfix, it doesn’t matter.
+Either prefix or postfix, it doesn't matter.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md
index 254a230c4b..c80280ece1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271b4213033d9b661c70e.md
@@ -2,7 +2,7 @@
 id: 673271b4213033d9b661c70e
 title: What Are Compound Assignment Operators in JavaScript, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: _OotACioDZs
 dashedName: what-are-compound-assignment-operators-in-javascript-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md
index 0b701c7098..a75801d30b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271c7581a27d9dd78f6d6.md
@@ -2,7 +2,7 @@
 id: 673271c7581a27d9dd78f6d6
 title: What Are Booleans, and How Do They Work with Equality and Inequality Operators?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: PmbDO3GXcO4
 dashedName: what-are-booleans-and-how-do-they-work-with-equality-and-inequality-operators
 ---
 
@@ -110,7 +110,7 @@ Think about how JavaScript handles different types with regular equality.
 
 ---
 
-It throws an error if the types don’t match.
+It throws an error if the types don't match.
 
 ### --feedback--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md
index 35faec0329..015656c81e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271dffbc34fda31da9515.md
@@ -2,7 +2,7 @@
 id: 673271dffbc34fda31da9515
 title: What Are Comparison Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1E_U3oP18sA
 dashedName: what-are-comparison-operators-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md
index 4652149991..12b88aab00 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271e8e3d43bda89f723b3.md
@@ -2,7 +2,7 @@
 id: 673271e8e3d43bda89f723b3
 title: What Are Unary Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VTY8Y9qfvTs
 dashedName: what-are-unary-operators-and-how-do-they-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md
index b9e0fb151d..d43333545d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-numbers-booleans-and-the-math-object/673271f39f124ddac28866d5.md
@@ -2,7 +2,7 @@
 id: 673271f39f124ddac28866d5
 title: What Are Bitwise Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Wga6bSebwFg
 dashedName: what-are-bitwise-operators-and-how-do-they-work
 ---
 
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 7c78e6ce54..525aa9fc34 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
@@ -2,7 +2,7 @@
 id: 673271fd11d063daf0cf8d20
 title: What Are Conditional Statements, and How Do If/Else If/Else Statements Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 6BZn4rKzpJ8
 dashedName: what-are-conditional-statements-and-how-do-if-else-if-else-statements-work
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What’s a compact way to write simple `if`/`else` statements?
+What's a compact way to write simple `if`/`else` statements?
 
 ## --answers--
 
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 215b6cbcee..7ecb9e7567 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
@@ -2,7 +2,7 @@
 id: 6732720e95f6a0db526a2e4d
 title: What Are Binary Logical Operators, and How Do They Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: bFo2p8aD9Y8
 dashedName: what-are-binary-logical-operators-and-how-do-they-work
 ---
 
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 78b4665618..aae68540df 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
@@ -2,7 +2,7 @@
 id: 67327217e70ee0db7913b255
 title: What Is the Math Object in JavaScript, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 1VUy-I4sNKQ
 dashedName: what-is-the-math-object-in-javascript-and-what-are-some-common-methods
 ---
 
@@ -86,7 +86,7 @@ Think about how it chooses to round up or down based on the decimal value.
 
 ## --text--
 
-What’s the difference between `Math.min()` and `Math.max()`?
+What's the difference between `Math.min()` and `Math.max()`?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
index 49f6d5682f..cc96327f7b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/67329f737126b75bcb949e13.md
@@ -2,7 +2,7 @@
 id: 67329f737126b75bcb949e13
 title: What Is an Object in JavaScript, and How Can You Access Properties from an Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JNFs7YHLRFQ
 dashedName: what-is-an-object-in-javascript-and-how-can-you-access-properties-from-an-object
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
index 333f83cc67..fa14e74eb0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b721eb98f224868b44a6.md
@@ -2,7 +2,7 @@
 id: 6732b721eb98f224868b44a6
 title: How Can You Remove Properties from an Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sz2K-rYNjSI
 dashedName: how-can-you-remove-properties-from-an-object
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
index a084a126cf..2e03b3f962 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b72961f94324bd6390de.md
@@ -2,7 +2,7 @@
 id: 6732b72961f94324bd6390de
 title: How to Check If an Object Has a Property?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i1MpmDeRZ_0
 dashedName: how-to-check-if-an-object-has-a-property
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
index 0aa3e00632..401d654fbc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73509f71f24ef05e86e.md
@@ -2,7 +2,7 @@
 id: 6732b73509f71f24ef05e86e
 title: How Do You Work with Accessing Properties from Nested Objects and Arrays in Objects?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: f7uZdVLZuCA
 dashedName: how-do-you-work-with-accessing-properties-from-nested-objects-and-arrays-in-objects
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
index 292eae0920..5216609e44 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b73d25cc01251b778043.md
@@ -2,7 +2,7 @@
 id: 6732b73d25cc01251b778043
 title: What Is the Difference Between Primitive and Non-Primitive Data Types?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: c-jyZdhWIYk
 dashedName: what-is-the-difference-between-primitive-and-non-primitive-data-types
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
index 2b10ff9d72..76679f6501 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b749b8aad125523dcda5.md
@@ -2,7 +2,7 @@
 id: 6732b749b8aad125523dcda5
 title: What Is the Difference Between Functions and Object Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Jufe8vG8TVo
 dashedName: what-is-the-difference-between-functions-and-object-methods
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
index 2b1deddd94..7391daa6b7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b758194c97257d23fc72.md
@@ -2,7 +2,7 @@
 id: 6732b758194c97257d23fc72
 title: What Is the Object() Constructor, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: o-AsC8Z7Vng
 dashedName: what-is-the-object-constructor-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
index 679086182c..b372a2c458 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b76c03f7d825c7fc74ee.md
@@ -2,7 +2,7 @@
 id: 6732b76c03f7d825c7fc74ee
 title: What Is the Optional Chaining Operator, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: s9EDuy0Djco
 dashedName: what-is-the-optional-chaining-operator-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
index bb70d7f5dc..4ddaf22bae 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b77adf9de12617a2dbb3.md
@@ -2,7 +2,7 @@
 id: 6732b77adf9de12617a2dbb3
 title: What Is Object Destructuring, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XMS8vSutlUc
 dashedName: what-is-object-destructuring-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
index ad76569333..062c850d52 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b788046862264eeb1c39.md
@@ -2,7 +2,7 @@
 id: 6732b788046862264eeb1c39
 title: What Is JSON, and How Do You Access Values Using Bracket and Dot Notation?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 8x6vJarVy_o
 dashedName: what-is-json-and-how-do-you-access-values-using-bracket-and-dot-notation
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
index 4ab4b3c290..75a87253e8 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-objects/6732b79c6aa77826855a3f11.md
@@ -2,7 +2,7 @@
 id: 6732b79c6aa77826855a3f11
 title: How Do JSON.parse() and JSON.stringify() Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gjnT8byXAc0
 dashedName: how-do-json-parse-and-json-stringify-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
index eaec498023..fdc907c950 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md
@@ -2,7 +2,7 @@
 id: 6733aad43b3ebff588a26fb5
 title: What Are Regular Expressions, and What Are Some Common Methods?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: yyawAbHw9Mw
 dashedName: what-are-regular-expressions-and-what-are-some-common-methods
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
index 2d1fa9529f..78c2a2ef8c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md
@@ -2,13 +2,13 @@
 id: 6733c5ba834ded4bb067e67c
 title: What Are Some Common Regular Expression Modifiers Used for Searching?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 0ZGj-WNbB98
 dashedName: what-are-some-common-regular-expression-modifiers-used-for-searching
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
index b0a3ae0b1b..f75efb200a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5c549775c4be710237c.md
@@ -2,13 +2,13 @@
 id: 6733c5c549775c4be710237c
 title: How Can You Match and Replace All Occurrences in a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: HyuDs-jVJyw
 dashedName: how-can-you-match-and-replace-all-occurrences-in-a-string
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+Watch the video lecture and answer the questions below.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
index 01e94f5248..f2bd25ca44 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5d0048bb74c18431296.md
@@ -1,14 +1,120 @@
 ---
 id: 6733c5d0048bb74c18431296
 title: What Are Character Classes, and What Are Some Common Examples?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-character-classes-and-what-are-some-common-examples
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about character classes in regular expressions, including some common examples.
+
+Character classes are a special syntax you can use to match sets or subsets of characters.
+
+The first character class you should learn is the wild card class.
+
+The wild card is represented by a period or dot (`.`), and matches any single character except line breaks. To allow the wildcard class to match line breaks, remember that you would need to use the `s` flag.
+
+A regular expression that matched the letter `A` followed by one single character might look like:
+
+```js
+const regex = /a./;
+```
+
+This can be helpful when you are looking for specific patterns in a string, but don't know what might be between those two patterns. But you can also use character classes to narrow down your matches.
+
+For example, what if you wanted to match a numerical character? You might have to write out every possible digit, separating them with the `|` or operator:
+
+```js
+const regex = /0|1|2|3|4|5|6|7|8|9/;
+```
+
+A character class exists for this exact pattern, and gives you a shorthand syntax for writing the same thing. In this case, the character class is written as a backslash (`\`)followed by a `d` character:
+
+```js
+const regex = /\d/;
+```
+
+This regular expression will match the exact same pattern as our previous expression: a single numerical character anywhere in the string.
+
+Now consider a regular expression which also needs to match any letter character `a` through `z`. You could write out each individual character separated by the or operator. Or you could use another character class.
+
+The `\w` class, which is a backslash followed by a `w`, represents any word character.
+
+```js
+const regex = /\w/;
+```
+
+A word character is defined as any letter, from `a` to `z`, or a number from `0` to `9`, or the underscore (`_`) character.
+
+The inclusion of the underscore might seem strange, but consider the naming conventions for variables – variable names can often include underscores, so `\w` is designed to match that as well.
+
+There is one more special character class to consider: the white-space class `\s`, represented by a backslash followed by an `s`. This character class will match any white space, including new lines, spaces, tabs, and special unicode space characters.
+
+These special character classes can be negated. To negate one of these character classes, instead of using a lowercase letter after the backslash, use the uppercase equivalent.
+
+```js
+const regex = /\D/;
+```
+
+This regular expression, for example, does not match a numerical character. Instead, it matches any single character that is not a numerical character.
+
+Negating the `\w` class would match any character that is not `a` to `z`, `0` to `9`, or an underscore, and negating the `\s` character class would match any character that is not a white-space.
+
+But what if you wanted to match more specific subsets of characters?
+
+Maybe you're a professor grading papers, and you need to make sure your grades are valid. A valid grade can be `A`, `B`, `C`, `D`, or `F`. You can use square brackets to construct your own character class:
+
+```js
+const regex = /[abcdf]/;
+```
+
+This regular expression will match a single character that is in the list "`a`, `b`, `c`, `d`, or `f`".
+
+What about checking only grades that pass? A passing grade would be an `A`, `B`, `C`, or `D`. You can modify your character class to stop matching "`f`" by removing that character from the list:
+
+```js
+const regex = /[abcd]/;
+```
+
+You may have noticed now that our character class consists only of consecutive characters. `A`, `B`, `C`, and `D` are all directly next to each other in the alphabet. For numbers, consecutive characters might be `4`, `5`, and `6`.
+
+When you have consecutive characters, you can create a range using the hyphen character.
+
+Using a range, we can turn our regular expression into a shorter syntax while matching the exact same pattern.
+
+```js
+const regex = /[a-d]/;
+```
+
+Remember that regular expressions are case-sensitive by default. This means our character class will only match the lowercase variants of `a`, `b`, `c`, and `d`. You could use the `i` flag to achieve this, but you can also bake it directly into your character class by including the uppercase variants:
+
+```js
+const regex = /[a-zA-Z]/;
+```
+
+You can also mix digits and numbers in your character class. For example, if you wanted the behavior of the `\w` class without the underscore, you could construct your own:
+
+```js
+const regex = /[a-zA-Z0-9]/;
+```
+
+Note that if you want your character class to match a literal hyphen, you need to place a hyphen at the beginning or end of the class.
+
+```js
+const regex = /[-a-zA-Z0-9]/;
+```
+
+And finally, you can include special character classes in your custom class. Maybe you want to include a hyphen in the set matched by `\w`:
+
+```js
+const regex = /[-\w]/;
+```
+
+Character classes are a powerful tool that gives you incredible control over your pattern matching.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
index eb2c447e81..73e040d0fd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5dc74176e4c496d09e6.md
@@ -1,14 +1,76 @@
 ---
 id: 6733c5dc74176e4c496d09e6
 title: What Are Lookaheads and Lookbehind Assertions, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about lookahead and lookbehind assertions in regular expressions.
+
+Lookahead and lookbehind assertions allow you to match specific patterns based on the presence or lack of surrounding patterns. There are four variations of these assertions.
+
+First is the positive lookahead assertion. This assertion will match a pattern when the pattern is followed by another pattern.
+
+To construct a positive lookahead, you need to start with the pattern you want to match. Then, use parentheses to wrap the pattern you want to use as your condition. After the opening parenthesis, use `?=` to define that pattern as a positive lookahead.
+
+This pattern will only match the word `free` if it is followed by `code`.
+
+```js
+const regex = /free(?=code)/i;
+```
+
+Let's test the behavior of our pattern:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-1.png)
+
+Notice how only the string where `free` is immediately followed by `code` passes the test.
+
+But what if you want to match the presence of `free` when it is NOT followed by `code`? You can turn your positive lookahead into a negative lookahead, to invert the behavior. To do this, change your `?=` to `?!`:
+
+```js
+const regex = /free(?!code)/i;
+```
+
+Let's test this against our same strings:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-2.png)
+
+As expected, the results are reversed. The only string that fails is the first string, where `free` is immediately followed by `code`.
+
+Lookbehind assertions function similarly to lookahead assertions, except that instead of matching conditionally based on a following pattern, they match conditionally based on a preceding pattern. Let's take a look at a positive lookbehind.
+
+A positive lookbehind is denoted with `?<=` instead of `?=`. Let's make our regular expression match `code` when it is preceded by `free`:
+
+```js
+const regex = /(?<=free)code/i;
+```
+
+Just like with our positive lookahead, our positive lookbehind matches the first string because `code` is immediately preceded by `free`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-3.png)
+
+To match `code` when it is NOT preceded by `free`, we can use a negative lookbehind. A negative lookbehind is defined by replacing `?<=` with `?<!`:
+
+```js
+const regex = /(?<!free)code/i;
+```
+
+This would match any occurrence of `code` that is NOT immediately preceded by `free`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-4.png)
+
+Remember that `Regex.prototype.test` only confirms whether a string matches the regular expression. Let's use our negative lookbehind with `String.prototype.match` to see how assertions affect that:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-lookaheads-and-lookbehind-assertions-and-how-do-they-work-5.png)
+
+Notice how even though our regular expression uses a lookbehind to check for the presence of free, it does not match free. The only text included in the match is code.
+
+Lookaheads and lookbehinds are incredibly useful for conditionally matching text without impacting the returned value of your match.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
index 81911dc2bb..a74847861a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5e54e3a154c8078ed48.md
@@ -1,14 +1,104 @@
 ---
 id: 6733c5e54e3a154c8078ed48
 title: What Are Regex Quantifiers, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-regex-quantifiers-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about quantifiers in regular expressions.
+
+Consider a scenario where you want to match a four-digit identification code. You know you can use the `\d` character class, so you might write that four times. And to avoid any extraneous characters, you'd include both the start and end anchors.
+
+```js
+const regex = /^\d\d\d\d$/;
+```
+
+And this does work – it will match four numerical characters. But rather than having to write out the same class multiple times, you can give it a quantifier.
+
+Quantifiers are defined by curly braces containing one or two numbers. Let's use a quantifier in our pattern:
+
+```js
+const regex = /^\d{4}$/;
+```
+
+Notice how our quantifier contains only the number `4`. This syntax means "match the previous character exactly four times". Let's see how that behaves:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-1.png)
+
+The pattern only matches the string with exactly four digits, because we have used the anchors and our quantifier only allows exactly four digits. But maybe the identification code only needs to be a minimum of four digits.
+
+To allow for four or more digits, add a comma after the number in your quantifier:
+
+```js
+const regex = /^\d{4,}$/;
+```
+
+Now, our syntax allows the pattern to match four or more digits. Let's test it:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-2.png)
+
+A seven-digit identifier is rather long. These identifiers should have a maximum of 6 digits, and a minimum of 4 digits. To achieve this, you can add a second number to your quantifier after the comma.
+
+```js
+const regex = /^\d{4,6}$/;
+```
+
+And now our pattern no longer matches the seven-digit identifier, because it is greater than our six-digit maximum.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-3.png)
+
+Note that you cannot use this syntax to set a maximum alone – you must always set a minimum. But if you set the minimum to `1`, you can effectively achieve the same result.
+
+We've received updated requirements from our users. Identifiers can now optionally start with a letter. We already know the character class for this, so let's add that to our regular expression.
+
+```js
+const regex = /^[a-zA-z]\d{4,6}$/;
+```
+
+But now we mandate the presence of a letter. How can we make it optional?
+
+You could use the quantifier syntax with `0` as the minimum and `1` as the maximum:
+
+```js
+const regex = /^[a-zA-Z]{0,1}\d{4,6}$/;
+```
+
+But there's actually a special shorthand quantifier for a single optional character – the question mark. Let's replace our quantifier with the question mark:
+
+```js
+const regex = /^[a-zA-Z]?\d{4,6}$/;
+```
+
+We should validate the result:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-4.png)
+
+Our pattern now allows for a single optional letter, followed by four to six digits.
+
+Unfortunately, we've just realized we read the requirements wrong. We need to allow for any number of letters before the numbers. We can use our quantifier with a `0` minimum and no defined maximum:
+
+```js
+const regex = /^[a-zA-Z]{0,}\d{4,6}$/;
+```
+
+But our pattern is getting long again. Thankfully, there's another short-hand for "match the previous character zero or more times" –  the asterisk symbol. Let's replace our quantifier with that in the pattern, and test it:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-5.png)
+
+Now we successfully match any identifier with zero or more letters followed by four to six numbers. But it turns out this is crashing our system – we actually have to require at least one letter.
+
+Again, we could use a quantifier with a minimum of one and no defined maximum, or we could use yet another special syntax – the plus symbol:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-regex-quantifiers-and-how-do-they-work-6.png)
+
+Now the identifiers that do not start with at least one letter fail, regardless of how many numbers there are.
+
+You can use quantifiers to greatly enhance the brevity and readability of your regular expressions.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
index d579b39149..177a6e602e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-regular-expressions/6733c5f20cc9584cada942a4.md
@@ -1,14 +1,123 @@
 ---
 id: 6733c5f20cc9584cada942a4
 title: What Are Capturing Groups and Backreferences, and How Do They Work?
-challengeType: 11
-videoId: nVAaxZ34khk
+challengeType: 19
+#videoId: nVAaxZ34khk
 dashedName: what-are-capturing-groups-and-backreferences-and-how-do-they-work
 ---
 
 # --description--
 
-Watch the lecture video and answer the questions below.
+The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+
+Let's learn about capturing groups and back references in regular expressions.
+
+A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+
+Let's capture the `code` from our `freeCodeCamp` regular expression. To do that, we'll enclose `code` in parentheses and define it as a capture group.
+
+```js
+const regex = /free(code)camp/i;
+```
+
+To confirm the behavior, we can test it against a `freecodecamp` string:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-1.png)
+
+But this doesn't actually make use of our captured group. Instead, let's take a look at the result of using `match`:
+
+```js
+const regex = /free(code)camp/i;
+console.log("freecodecamp".match(regex));
+```
+
+Here we can see that our `match` array has a second element, which is the portion of the string which was captured by our capture group.
+
+Notice how the capture group matches the exact pattern `code`, where a character class would match a single character from the list `c`, `o`, `d`, and `e`.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-2.png)
+
+But how can we actually use this? Well, capture groups are often used when replacing contents of a string. Let's set up some code to do that. We're going to turn `freecodecamp` into `paidcodeworld`.
+
+```js
+const regex = /free(code)camp/i;
+console.log("freecodecamp".replace(regex, "paidcodeworld"));
+```
+
+This works on its own, but what if we didn't know how many `o`'s were in "`code`"? If we need a quantifier for one or more `o`'s…
+
+```js
+const regex = /free(co+de)camp/i;
+console.log("freecoooooooodecamp".replace(regex, "paidcodeworld"));
+```
+
+We're getting `paidcodeworld` as our result. We want to preserve the number of `o`'s, so we need to reuse what was captured by the regular expression.
+
+This is where a backreference comes in. Instead of hardcoding the "`code`" portion of our replacement string, we can reference the captured group directly.
+
+In a replace call, you achieve a backreference by using a dollar sign (`$`) followed by the number of the capture group to use.
+
+In our case, that would be `$1`, since code is captured in the first capture group.
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-3.png)
+
+We have now successfully preserved an unknown number of `o` characters when converting `freecodecamp` into `paidcodeworld`. But backreferences aren't just limited to the replace call. You can actually use them directly in a regular expression.
+
+This would allow you to match a previously captured pattern later on in the regular expression.
+
+Let's say we want to match `freecodecamp` twice, with the same number of `o`'s, but anywhere in the string.
+
+First, we need to separate them with our wildcard character, and allow any number of characters to match that wildcard:
+
+```js
+const regex = /free(co+de)camp.*free(co+de)camp/i;
+```
+
+This current expression won't ensure that the number of `o` characters is the same, however. To achieve that, we need to replace the second capture group with a reference to the first.
+
+Inside a regular expression, a backreference is denoted with a backslash followed by the number of the capture group:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-4.png)
+
+And with that, we can see that a string with the correct number of `o`'s matches, while a string with two different numbers of `o`'s does not.
+
+This syntax is great, but can quickly get confusing when you are referencing multiple capture groups. Thankfully, instead of using numbers, you can give your groups names.
+
+To define a named capture group, you add a question mark (`?`) followed by the name enclosed in less than and greater than signs to the beginning of the group. Let's name our capture group "`code`":
+
+```js
+const regex = /free(?<code>co+de)camp.*free\1camp/i;
+```
+
+Now we can update our backreference in the regular expression to refer to this group. A named back reference starts with a backslash followed by the letter `k` in JavaScript. Then you add the name, again enclosed in less than and greater than signs. Let's take a look at that:
+
+```js
+const regex = /free(?<code>co+de)camp.*free\k<code>camp/i;
+```
+
+Now if we check our `test` call, we can see that we still pass:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-5.png)
+
+To use our named capture group in a `replace` call, we'd insert a dollar sign into the string, followed by the name enclosed in less than and greater than signs:
+
+![image](https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-capturing-groups-and-backreferences-and-how-do-they-work-6.png)
+
+Finally, sometimes you want to create a group of characters, but don't need the captured result.
+
+Let's say we want to match either `freecodecamp` or `freecandycamp`. You could create two patterns separated by an OR assertion:
+
+```js
+const regex = /freecodecamp|freecandycamp/i;
+```
+
+But this can become quite lengthy for larger-scale regular expressions. Instead, you can create a non-capturing group around the characters that you need to OR:
+
+```js
+const regex = /free(?:code|candy)camp/i;
+```
+
+A non-capturing group does not store the `code|candy` match separately in memory. You can't backreference a non-capturing group. But it can be helpful for creating alternate patterns without sacrificing readability or performance.
 
 # --questions--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
index a4a8ad2676..e095474bc9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/672d2654f78cbf20e0ba4501.md
@@ -2,7 +2,7 @@
 id: 672d2654f78cbf20e0ba4501
 title: What Is Bracket Notation, and How Do You Access Characters from a String?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VFYqtU7nzFo
 dashedName: what-is-bracket-notation-and-how-do-you-access-characters-from-a-string
 ---
 
@@ -14,35 +14,35 @@ Watch the video lecture and answer the questions below.
 
 ## --text--
 
-What is the index of the character `"b"` in the string `"JavaScript"`?
+What is the index of the character `"r"` in the string `"JavaScript"`?
 
 ## --answers--
 
-2
+`2`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ---
 
-4
+`4`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ---
 
-6
+`6`
 
 ---
 
-8
+`8`
 
 ### --feedback--
 
-Remember that index numbers start from 0.
+Remember that index numbers start from `0`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
index e87598789a..d77b4ebf06 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md
@@ -2,7 +2,7 @@
 id: 673263d58da27ea7809963bf
 title: What Are Template Literals, and What Is String Interpolation?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: kISWzkA7gKg
 dashedName: what-are-template-literals-and-what-is-string-interpolation
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
index 7f8e998bad..11b9eee8ca 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263df0eb568a7b450f2fc.md
@@ -2,7 +2,7 @@
 id: 673263df0eb568a7b450f2fc
 title: How Do You Create a Newline in Strings and Escape Strings?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: gOLjFbJnTIM
 dashedName: how-do-you-create-a-newline-in-strings-and-escape-strings
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md
index e206886e65..d9f2af9f09 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263e80dd43da7df3ae565.md
+++ b/curriculum/challenges/chinese/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: nVAaxZ34khk
+videoId: k2QaBPHl_00
 dashedName: how-can-you-find-the-position-of-a-substring-in-a-string
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-What does the inde`xOf method return if the substring is not found in the string?
+What does the `indexOf` method return if the substring is not found in the string?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
index 1b8a21ef05..f9a8aca0d7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-strings-in-javascript/673263f4a5899da8124542fd.md
@@ -2,7 +2,7 @@
 id: 673263f4a5899da8124542fd
 title: What Is the Prompt Method, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lgAEO6_vNPQ
 dashedName: what-is-the-prompt-method-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
index 294d534ea7..1ebbeaf280 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
@@ -2,7 +2,7 @@
 id: 6732a0472f52015e511f8e58
 title: What Is an API, and What Are Web APIs?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: VRF7NItXm2c
 dashedName: what-is-an-api-and-what-are-web-apis
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
index 16170eb501..0706815738 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
@@ -2,7 +2,7 @@
 id: 67336894ae148431a870694d
 title: What Is the DOM, and How Do You Access Elements?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EKgxoZ9IzmQ
 dashedName: what-is-the-dom-and-how-do-you-access-elements
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
index 8ab10de1e3..b3ce6616d2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
@@ -2,7 +2,7 @@
 id: 6733689f9f31dd31e7d9c789
 title: How Do DOM Nodes Exist Relative to Each Other in the DOM Tree?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 5G2ZQrgrBYU
 dashedName: how-do-dom-nodes-exist-relative-to-each-other-in-the-dom-tree
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
index 6ec55e771b..4c895162b4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md
@@ -2,7 +2,7 @@
 id: 673368b1cf26253212a3cfb2
 title: What Is the querySelectorAll() Method, and When Should You Use It?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: F4WZUBQL9Js
 dashedName: what-is-the-queryselectorall-method-and-when-should-you-use-it
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
index 265c328c08..4a54c53466 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md
@@ -2,7 +2,7 @@
 id: 673368c0161e6b326a7e03f0
 title: How Do You Create New Nodes Using innerHTML() and createElement()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: WypY2jRcCe0
 dashedName: how-do-you-create-new-nodes-using-innerhtml-and-createelement
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
index 9e62c66aba..a6d1db635e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md
@@ -2,7 +2,7 @@
 id: 673368ccf52205329b729378
 title: What Is the Difference Between innerText, textContent, and innerHTML?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: A94NbhbAows
 dashedName: what-is-the-difference-between-innertext-textcontent-and-innerhtml
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
index cbe6a12eeb..e351964522 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md
@@ -2,7 +2,7 @@
 id: 673368d97e8ce232cdcd6b68
 title: How Do You Add and Remove Nodes from the DOM with appendChild() and removeChild()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 8xXQxXlvY8A
 dashedName: how-do-you-add-and-remove-nodes-from-the-dom-with-appendchild-and-removechild
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
index 74922f6a9b..74f45f28a3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md
@@ -2,7 +2,7 @@
 id: 673368e7bd043f331919514d
 title: How Do the Navigator, Window, and Document Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: O0SWih5pv9U
 dashedName: how-do-the-navigator-window-and-document-work
 ---
 
@@ -86,7 +86,7 @@ This property helps you find out where the browser is currently navigating.
 
 ## --text--
 
-How can you access the document interface properties without explicitly using the document object?
+How can you access the `document` interface properties without explicitly using the `window` object?
 
 ## --answers--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
index 8cd8e5a377..7629627226 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md
@@ -2,7 +2,7 @@
 id: 673368f272706633516e4873
 title: How Do You Add Attributes with setAttribute()?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: ciq88lYTHUc
 dashedName: how-do-you-add-attributes-with-setattribute
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
index 29685e3f0c..43297a9d9c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md
@@ -2,7 +2,7 @@
 id: 673368fbe12a2b337645053d
 title: What Is the Event Object?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: UVBsIxxvgBg
 dashedName: what-is-the-event-object
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
index 9ee0cbff26..4edba2d484 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md
@@ -2,7 +2,7 @@
 id: 673369067f824d33a90a0534
 title: How Does the addEventListener Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: XxKBdnCPtoU
 dashedName: how-does-the-addeventlistener-method-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
index a1a328af6e..e9b250c03d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md
@@ -2,7 +2,7 @@
 id: 673369101e5c4a33db0e8a02
 title: How Does the removeEventListener Method Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 59HUIkhJqnc
 dashedName: how-does-the-removeeventlistener-method-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
index 649e029b5a..5c6f0e783d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
@@ -2,7 +2,7 @@
 id: 6733691d88e3053414689276
 title: What Are Inline Event Handlers, and Why Is It Best Practice to Use addEventListener Instead?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: JbTSvver-y8
 dashedName: what-are-inline-event-handlers-and-why-is-it-best-practice-to-use-addeventlistener-instead
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
index 96b1b97410..f7243586c2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
@@ -2,7 +2,7 @@
 id: 6733692ffe1da034469f7917
 title: How Do You Manipulate Styles Using Element.style and Element.classList?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: i07QkMVN15o
 dashedName: how-do-you-manipulate-styles-using-elementstyle-and-elementclasslist
 ---
 
@@ -14,7 +14,7 @@ Watch the lecture video and answer the questions below.
 
 ## --text--
 
-Which property would you use to directly change the color of an element’s text using JavaScript?
+Which property would you use to directly change the color of an element's text using JavaScript?
 
 ## --answers--
 
@@ -94,7 +94,7 @@ The menu will be permanently visible.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ---
 
@@ -102,7 +102,7 @@ The menu will be permanently hidden.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ---
 
@@ -114,7 +114,7 @@ The menu will display an error message.
 
 ### --feedback--
 
-The button’s event listener uses a method that alternates the class on the menu.
+The button's event listener uses a method that alternates the class on the menu.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
index 7a7f0eacd8..974cade79d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
@@ -2,7 +2,7 @@
 id: 6733693bfce9a43489a355db
 title: What Is the DOMContentLoaded Event, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sEsyYH_SAb8
 dashedName: what-is-the-domcontentloaded-event-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
index f91118e250..621c1e59e7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
@@ -2,7 +2,7 @@
 id: 6733694805a85d34ced08a9b
 title: How Do the setTimeout and setInterval Methods Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: GSWSPc2SGTg
 dashedName: how-do-the-settimeout-and-setinterval-methods-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
index aac8cb2b93..5c5aef01fc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
@@ -2,7 +2,7 @@
 id: 67336956340e8a34fbd5d9f3
 title: What Is the requestAnimationFrame() API, and How Can It Be Used to Set Up an Animation Loop?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: mfnow4GWCo4
 dashedName: what-is-the-requestanimationframe-api-and-how-can-it-be-used-to-set-up-an-animation-loop
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
index d208cf6666..71deddcef0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
@@ -2,7 +2,7 @@
 id: 6733696567d2273540aa6033
 title: What Is the Web Animations API, and How Does It Relate to CSS Animation Properties?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: pVVcaDEIzvs
 dashedName: what-is-the-web-animations-api-and-how-does-it-relate-to-css-animation-properties
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
index c9790ec773..35c21edee9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
@@ -2,7 +2,7 @@
 id: 6733697661182d357fc643d2
 title: What Is the Canvas API, and How Does It Work?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: EbfxtG26HR0
 dashedName: what-is-the-canvas-api-and-how-does-it-work
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
index 68be5ca416..a347ece764 100644
--- a/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
+++ b/curriculum/challenges/chinese/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
@@ -2,7 +2,7 @@
 id: 673369829e232835c2732656
 title: How Do You Open and Close Dialog Elements Using JavaScript?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: W6gusPmPGo4
 dashedName: how-do-you-open-and-close-dialog-elements-using-javascript
 ---
 
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 f3cf1121c0..0f867d3ad9 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
@@ -237,23 +237,23 @@ Which selector is correct to target all siblings of an `img`?
 
 #### --text--
 
-What statement is TRUE about `block` elements?
+What statement is TRUE about block-level elements?
 
 #### --distractors--
 
-Blockline elements don't start on new lines.
+Block-level elements don't start on new lines.
 
 ---
 
-Blockline elements only takes up as much as it needs.
+Block-level elements only takes up as much as it needs.
 
 ---
 
-Blockline elements come with no margin.
+Block-level elements come with no margin.
 
 #### --answer--
 
-Blockline elements start on a new line with margin before and after the element.
+Block-level elements start on a new line with margin before and after the element.
 
 ### --question--
 
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 5f185147da..6102eaa31d 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
@@ -61,23 +61,23 @@ An element without child nodes or an end tag.
 
 #### --text--
 
-What is an inline level element?
+Which of the following is a correct value for the `id` attribute?
 
 #### --distractors--
 
-An element that takes up the entire horizontal space and always starts a new line.
+`id="main@content"`
 
 ---
 
-An element used to display images.
+`id="main content"`
 
 ---
 
-An element used to embedding videos on the page.
+`id="123content"`
 
 #### --answer--
 
-An element that only takes up the width and height of its inner content.
+`id="main-content"`
 
 ### --question--
 
@@ -369,23 +369,23 @@ Which of the following is an example of a boolean attribute?
 
 #### --text--
 
-What is a block level element?
+Which of the following is a correct syntax for the `img` element?
 
 #### --distractors--
 
-An element used to display tables.
+`<img src="image.jpg" alt="Description of the image"></img>`
 
 ---
 
-An element used to display modals.
+`<img source="image.jpg" desc="Description of the image"></img>`
 
 ---
 
-An element that only takes up the width and height of its inner content.
+`<img src="image.jpg" desc="Description of the image">`
 
 #### --answer--
 
-An element that takes up the entire horizontal space and always starts a new line.
+`<img src="image.jpg" alt="Description of the image">`
 
 ### --question--
 
@@ -525,23 +525,23 @@ HTML represents the content and structure for a web page.
 
 #### --text--
 
-What is the difference between inline and block level elements?
+Which image license works for the public domain?
 
 #### --distractors--
 
-Block-level elements are used to group images only, while inline elements group list items.
+JPG
 
 ---
 
-Inline elements are always larger in size compared to block-level elements.
+Creative Commons
 
 ---
 
-Block-level elements flow within the content of a line, while inline elements start on a new line.
+BSD
 
 #### --answer--
 
-Block-level elements occupy the full width available, while inline elements only occupy as much width as necessary.
+CC0
 
 ### --question--
 
@@ -679,23 +679,23 @@ Which element is used to add audio to your HTML document?
 
 #### --text--
 
-What does the `required` attribute do?
+Where is the content represented on the page placed in an HTML document?
 
 #### --distractors--
 
-It specifies the `width` for a form.
+In between the `head` and the `body` elements.
 
 ---
 
-It specifies the `color` of a form input.
+Within the `repr` element.
 
 ---
 
-It specifies the `type` for the input.
+Within the `script` element.
 
 #### --answer--
 
-It specifies that an input must be filled out before a form submission.
+Within the `body` element.
 
 ### --question--
 
@@ -855,23 +855,23 @@ Which of the following is the correct syntax for a paragraph element?
 
 #### --text--
 
-What does the `iframe` element stand for?
+What does the name of the `iframe` element stand for?
 
 #### --distractors--
 
-The `Inline Framing component`.
+Inline Framing
 
 ---
 
-The `Inner Frame element`.
+Inner Frame
 
 ---
 
-The `Inline video element`.
+Inline video
 
 #### --answer--
 
-The `Inline Frame element`.
+Inline Frame
 
 ### --question--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md b/curriculum/challenges/chinese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
index 4e2b1a0dfb..8e578e4f09 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-css-attribute-selectors/66ed8fd0f45ce3ece4053eaf.md
@@ -475,7 +475,7 @@ ol[type~="1"] { font-weight: bold; }
 
 #### --text--
 
-Suppose, on freeCodeCamp’s forum, each discussion has a `data-status` attribute that could be `"open"` or `"closed"`. You want to highlight all open discussions. How would you select these discussions?
+Suppose, on freeCodeCamp's forum, each discussion has a `data-status` attribute that could be `"open"` or `"closed"`. You want to highlight all open discussions. How would you select these discussions?
 
 #### --distractors--
 
@@ -535,7 +535,7 @@ textarea[maxlength] { border-color: darkred; }
 
 #### --text--
 
-Suppose, on freeCodeCamp’s course catalog, each course has a `data-completion` attribute representing the percentage completed. You want to style courses where this attribute ends with `"100"`, indicating full completion. Which selector would work?
+Suppose, on freeCodeCamp's course catalog, each course has a `data-completion` attribute representing the percentage completed. You want to style courses where this attribute ends with `"100"`, indicating full completion. Which selector would work?
 
 #### --distractors--
 
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 81c35bbb28..7558dd38a0 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
@@ -69,7 +69,7 @@ Which of the following is NOT a valid value for the `list-style-type` property?
 
 ---
 
-`lower-greek`
+`disc`
 
 ---
 
@@ -193,23 +193,23 @@ The background stays fixed while the content scrolls
 
 #### --text--
 
-Which of the following is NOT a valid `border-style` value?
+Which of the following is a valid `border-style` value?
 
 #### --distractors--
 
-`solid`
+`wave`
 
 ---
 
-`dotted`
+`triple`
 
 ---
 
-`groove`
+`zig zag`
 
 #### --answer--
 
-`triple`
+`dotted`
 
 ### --question--
 
@@ -237,23 +237,23 @@ Use the `:active` pseudo-class
 
 #### --text--
 
-Which property is used to define the width of a border?
+What is the correct CSS property to create an outline around an element, besides using the `border` property?
 
 #### --distractors--
 
-`border-size`
+`border-wide`
 
 ---
 
-`border-thickness`
+`box-shadow`
 
 ---
 
-`border-spacing`
+`border-img`
 
 #### --answer--
 
-`border-width`
+`outline`
 
 ### --question--
 
@@ -281,7 +281,7 @@ Which value for the `background-repeat` property ensures the image repeats horiz
 
 #### --text--
 
-What’s the purpose of the `border-radius` property?
+What's the purpose of the `border-radius` property?
 
 #### --distractors--
 
@@ -391,29 +391,29 @@ Which of these is NOT a valid border value?
 
 #### --text--
 
-What does the `border-collapse` property do when applied to table elements?
+How can you ensure that gradients used in web design are accessible?
 
 #### --distractors--
 
-It removes the table borders
+Use only two colors in the gradient
 
 ---
 
-It adds spacing between borders
+Use gradients only for decorative purposes
 
 ---
 
-It makes the border invisible
+Avoid using gradients in the background
 
 #### --answer--
 
-It merges adjacent table cell's borders into one
+Ensure sufficient contrast between the gradient and any text.
 
 ### --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 value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio?
 
 #### --distractors--
 
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 b020872416..0ee4e9ffcf 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
@@ -43,7 +43,7 @@ What does `100vw` cover in terms of screen width?
 
 #### --distractors--
 
-100% of the screen width answer
+100% of the screen width
 
 ---
 
@@ -149,7 +149,7 @@ On a typical screen with 96 DPI resolution, how many points (`pt`) are in 1 pixe
 
 #### --text--
 
-If the screen height is `800px`, what would `50vh` be?
+If the viewport height is `800px`, what would `50vh` be?
 
 #### --distractors--
 
@@ -175,19 +175,19 @@ What does setting an element's width to `100%` mean?
 
 #### --distractors--
 
-It takes up the full width of the document
+It takes up the full width of the document.
 
 ---
 
-It takes up the full width of the screen
+It takes up the full width of the screen.
 
 ---
 
-It takes up `100px`
+It takes up `100px`.
 
 #### --answer--
 
-It takes up the full width of its parent
+It takes up the full width of its parent.
 
 ### --question--
 
@@ -197,19 +197,19 @@ What happens with `calc(10px + 20%)` in CSS?
 
 #### --distractors--
 
-Adds `10px` to `10%` of the document width
+It adds `10px` to `10%` of the document width.
 
 ---
 
-Always equals `30px`
+It always equals `30px`.
 
 ---
 
-Adds `10px` to `20%` of the screen width
+It adds `10px` to `20%` of the screen width.
 
 #### --answer--
 
-Adds `10px` to `20%` of the parent's width
+It adds `10px` to `20%` of the parent's width.
 
 ### --question--
 
@@ -285,19 +285,19 @@ How does `calc(10vh + 50px)` work for height?
 
 #### --distractors--
 
-Adds `50px` to `10%` of the viewport height
+It adds `50px` to 10% of the viewport width.
 
 ---
 
-Adds `10px` to `50%` of the parent's height
+It adds `10px` to 50% of the parent's height.
 
 ---
 
-Adds `10vh` to `50%` of the document
+It adds `10vh` to 50% of the document width.
 
 #### --answer--
 
-Adds `50px` to `10%` of the viewport height
+It adds `50px` to 10% of the viewport height.
 
 ### --question--
 
@@ -351,19 +351,19 @@ What does `calc(50% + 20px)` do for width?
 
 #### --distractors--
 
-Adds `50%` of the screen width plus `20px`
+It adds `20px` to 50% of the screen width.
 
 ---
 
-Adds `50px` to the screen width
+It adds `50px` to the screen width.
 
 ---
 
-Adds `50%` of the height plus `20px`
+It adds `50%` of the height to `20px`.
 
 #### --answer--
 
-Adds `50%` of the parent's width plus `20px`
+It adds `50%` of the parent's width to `20px`.
 
 ### --question--
 
@@ -373,19 +373,19 @@ What's the key difference between `rem` and `em` in CSS?
 
 #### --distractors--
 
-`rem` is only used for fonts
+`rem` is only used for fonts.
 
 ---
 
-`rem` is for width, em is for fonts
+`rem` is for width, `em` is for fonts.
 
 ---
 
-`rem` is always smaller than `em`
+`rem` is always smaller than `em`.
 
 #### --answer--
 
-`rem` is based on the root font size, `em` is based on the parent's font size
+`rem` is based on the root font size, `em` is based on the parent's font size.
 
 ### --question--
 
@@ -395,19 +395,19 @@ How does `calc(100px + 10%)` work for width?
 
 #### --distractors--
 
-Adds `10%` of the screen width to `100px`
+It adds `10%` of the screen width to `100px`.
 
 ---
 
-Adds `10%` of the height to `100px`
+It adds `10%` of the height to `100px`.
 
 ---
 
-Adds `100px` to `10%` of the document
+It adds `100px` to `10%` of the document.
 
 #### --answer--
 
-Adds `10%` of the parent's width to `100px`
+It adds `10%` of the parent's width to `100px`.
 
 ### --question--
 
@@ -417,19 +417,19 @@ What does setting an element's width to auto do in CSS?
 
 #### --distractors--
 
-Sets the width to `100%`
+It sets the width to `100%`.
 
 ---
 
-Sets the width to `50%` of the viewport
+It sets the width to `50%` of the viewport.
 
 ---
 
-Sets the width to `0px`
+It sets the width to `0px`.
 
 #### --answer--
 
-Allows the browser to determine the width based on the content and container
+It allows the browser to determine the width based on the content and container.
 
 ### --question--
 
@@ -439,17 +439,17 @@ What happens when you use `calc(30vh - 10px)` for height?
 
 #### --distractors--
 
-Subtracts `10px` from the parent's height
+It subtracts `10px` from the parent's height.
 
 ---
 
-Subtracts `30px` from the screen height
+It subtracts `30px` from the screen height.
 
 ---
 
-Adds `30%` of the parent's height minus `10px`
+It adds `30%` of the parent's height minus `10px`.
 
 #### --answer--
 
-Subtracts `10px` from `30%` of the viewport height
+It subtracts `10px` from `30%` of the viewport height.
 
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 042848b722..6c8140bf6d 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
@@ -83,7 +83,7 @@ The space between individual letters
 
 #### --text--
 
-What’s the most common way to add Google Fonts to a website?
+What's the most common way to add Google Fonts to a website?
 
 #### --distractors--
 
@@ -209,7 +209,7 @@ 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--
 
@@ -329,11 +329,11 @@ 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
 
 ---
 
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 bcc7ed4e71..eab6ee36ca 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
@@ -285,7 +285,7 @@ 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
 
 ---
 
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 00c53dd4a5..e3ab555833 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
@@ -61,23 +61,23 @@ Scale
 
 #### --text--
 
-What design tool in Figma would you use to combine multiple elements together without flattening the layers of the elements?
+Which of the following sites would most likely benefit from using breadcrumbs?
 
 #### --distractors--
 
-Frames
+A single-page portfolio site.
 
 ---
 
-Blocks
+A complex e-commerce site with multiple categories and subcategories.
 
 ---
 
-Class
+A simple blog with only a few posts.
 
 #### --answer--
 
-Groups
+A complex e-commerce site with multiple categories and subcategories.
 
 ### --question--
 
@@ -193,23 +193,23 @@ Making the headline of the page larger than other text that comprise the body or
 
 #### --text--
 
-Which Figma tools allows users to specify a region on the screen they would like to export?
+What is a common goal of conducting exit interviews in user research?
 
 #### --distractors--
 
-Frames
+To increase the number of new users.
 
 ---
 
-Section
+To test new features with existing users
 
 ---
 
-Blocks
+To gather data for A/B testing.
 
 #### --answer--
 
-Slice
+To understand the factors causing user churn.
 
 ### --question--
 
@@ -281,45 +281,45 @@ Dark colors and muted light colors for contrast in dim lighting conditions
 
 #### --text--
 
-What is one good design practice when considering color palettes for a design?
+How can user research impact user requirements?
 
 #### --distractors--
 
-Using a variety of colors with strong saturation and contrast
+It has no impact on user requirements.
 
 ---
 
-Focus on vibrancy and saturation and place many non complementary hues
+It only affects non-functional requirements.
 
 ---
 
-Using many complementary colors together
+It only affects functional requirements.
 
 #### --answer--
 
-Limit colors and focus on using shades, tones, and tints of one color and add another hue three spaces away from that color
+It can help define and refine user requirements based on user feedback.
 
 ### --question--
 
 #### --text--
 
-What is one reason why the rule of thirds is important?
+Why is it important for a design brief to be reviewed and approved by all stakeholders before the project begins?
 
 #### --distractors--
 
-Creates symmetry in the composition by dividing it equally
+To ensure everyone is aware of the project's social media strategy.
 
 ---
 
-By dividing up the composition, it eliminates visual hierarchy
+To finalize the color palette and design elements.
 
 ---
 
-Objects at the edge of the composition get more focus
+To determine the project's marketing budget.
 
 #### --answer--
 
-Breaks the composition apart into 9 equal parts, where objects placed on the dividing lines provide focus and hierarchy to the composition
+To confirm that all stakeholders agree on the project's objectives and requirements.
 
 ### --question--
 
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 d3615d14e9..6a20dd01ac 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
@@ -395,7 +395,7 @@ 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
 
 ---
 
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 f89abcae04..bad816f377 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
@@ -157,7 +157,7 @@ When we work on an open-source repository, it becomes easy to detract from the p
 
 ---
 
-By using GitHub or any other repository management tool, it’s easy to develop robust ignorance of the project.
+By using GitHub or any other repository management tool, it's easy to develop robust ignorance of the project.
 
 ---
 
@@ -197,11 +197,11 @@ What is the correct way to contribute to other people's repositories?
 
 #### --distractors--
 
-`git add -> git commit -> git clone -> git push`
+`git add`, `git commit`, `git clone`, `git push`
 
 ---
 
-`git clone -> git commit -> git add -> git push`
+`git clone`, `git commit`, `git add`, `git push`
 
 ---
 
@@ -209,7 +209,7 @@ None of the options
 
 #### --answer--
 
-`git clone -> git add -> git commit -> git push`
+`git clone`, `git add`, `git commit`, `git push`
 
 ### --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 ae72f3b4c0..0b7b3e0703 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
@@ -173,7 +173,7 @@ To add tabs.
 
 #### --answer--
 
-To control keyboard navigation order and allow programmatic focus on elements that aren’t accessible via keyboard.
+To control keyboard navigation order and allow programmatic focus on elements that aren't accessible via keyboard.
 
 ### --question--
 
@@ -205,7 +205,7 @@ What is the difference between the attributes `aria-label` and `aria-labelledby`
 
 #### --distractors--
 
-The `aria-label`and `aria-labelledby` attributes serve the same purpose.
+The `aria-label` and `aria-labelledby` attributes serve the same purpose.
 
 ---
 
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 672d12ac25..9333d52145 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
@@ -17,29 +17,29 @@ To pass the quiz, you must correctly answer at least 17 of the 20 questions belo
 
 #### --text--
 
-Which html element allows a two-dimensional table with columns and rows?
+Which of the following attributes is used to specify the URL where the form data should be sent?
 
 #### --distractors--
 
-`row`
+`capture`
 
 ---
 
-`matrix`
+`accept`
 
 ---
 
-`table` using attributes `r="3" c="4"`
+`lang`
 
 #### --answer--
 
-`table`
+`action`
 
 ### --question--
 
 #### --text--
 
-What elements are used to specify a row and a row header?
+Which two elements are used to specify a row and a row header in a table?
 
 #### --distractors--
 
@@ -105,49 +105,23 @@ It merges cells across multiple columns.
 
 #### --text--
 
-```html
-<table>
-    <tr>
-        <td colspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
-
-How to make the `td` above span across three rows only?
+What is the role of the `placeholder` attribute?
 
 #### --distractors--
 
-```html
-<table>
-    <tr>
-        <td row="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to send data to the server when the form is submitted
 
 ---
 
-```html
-<table>
-    <tr rowspan="3">
-        <td colspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to associate a `label` element with an `input` element
 
 ---
 
-It's not possible.
+used to specify that an input field is read-only to the user
 
 #### --answer--
 
-```html
-<table>
-    <tr>
-        <td rowspan="3">This cell spans across three rows</td>
-    </tr>
-</table>
-```
+used to show a hint to the user
 
 ### --question--
 
@@ -157,69 +131,85 @@ What is the purpose of the `thead` element?
 
 #### --distractors--
 
-It can be used interchangeably with `th`.
+it is used to group the rows in an HTML table
 
 ---
 
-It defines a single header cell.
+it is used to group the columns in an HTML table
 
 ---
 
-It is essential for marking table headers
+it is used to group the footer content in an HTML table
 
 #### --answer--
 
-It groups table header rows.
+it is used to group the header content in an HTML table
 
 ### --question--
 
 #### --text--
 
-Can the `tfoot` element be placed before or after `tbody` element?
+Which of the following is an example of explicit form association between labels and inputs?
 
 #### --distractors--
 
-Neither before nor after.
+```html
+<label connect="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ---
 
-Only Before.
+```html
+<label associate="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ---
 
-Only After.
+```html
+<label explicit="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 #### --answer--
 
-Both before and after.
+```html
+<label for="age">Age:</label>
+
+<input type="number" id="age" name="age">
+```
 
 ### --question--
 
 #### --text--
 
-If the `tfoot` element is written before the `tbody` element then where will it be rendered?
+What is an HTML validator used for?
 
 #### --distractors--
 
-Before `tbody`.
+A validator is a tool that automatically formats your HTML code.
 
 ---
 
-It will show an error.
+A validator is a tool that applies styles to your HTML.
 
 ---
 
-Within the `tbody` element.
+A validator is a tool that makes your HTML code run faster.
 
 #### --answer--
 
-Always at the bottom of the table.
+A validator is a tool that checks the syntax of HTML code to ensure it is valid.
 
 ### --question--
 
 #### --text--
 
-What element is used to define a new cell in a table?
+Which element is used to define a new cell in a table?
 
 #### --distractors--
 
@@ -241,81 +231,67 @@ What element is used to define a new cell in a table?
 
 #### --text--
 
-What defines the cell of a header and improves accessibility?
+Which of the following is a tool that allows you to inspect and modify the HTML structure of a web page?
 
 #### --distractors--
 
-`colspan`
+pyCharm
 
 ---
 
-`style`
+Jest
 
 ---
 
-`table` with attribute `style = " "`
+ChatGPT
 
 #### --answer--
 
-`scope`
+DOM inspector
 
 ### --question--
 
 #### --text--
 
-What does the `<input>` tag do?
+Which of the following attributes is used to specify the maximum number of characters allowed in an input field?
 
 #### --distractors--
 
-It allows users to enter any type of data.
+`getMaxLength`
 
 ---
 
-It is a pop-up box that asks user to enter data.
+`max`
 
 ---
 
-It can be only used inside a form to enter user input.
+`maximumLen`
 
 #### --answer--
 
-It defines a single line text field by default.
+`maxlength`
 
 ### --question--
 
 #### --text--
 
-Which one of these uses `<input>` inside a form to properly submit data?
+Which of the following is used to specify that an input field is read-only?
 
 #### --distractors--
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username"></input>
-    <input type="submit" value="Submit"></input>
-</form>
-```
+`readInputOnly`
 
 ---
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username" type="submit" value="Submit">
-</form>
-```
+`read-only`
 
 ---
 
-All of the other choices are correct.
+`only-read`
 
 #### --answer--
 
-```html
-<form>
-    <input type="text" name="username" placeholder="Enter your username">
-    <input type="submit" value="Submit">
-</form>
-```
+`readonly`
 
 ### --question--
 
@@ -329,11 +305,11 @@ Which attribute specifies that an input must be filled out before submitting the
 
 ---
 
-`imp`
+`obligatory`
 
 ---
 
-It is not possible via HTML only.
+`essential`
 
 #### --answer--
 
@@ -343,153 +319,185 @@ It is not possible via HTML only.
 
 #### --text--
 
-How can you hide an input from the user?
+What are Devtools used for?
 
 #### --distractors--
 
-`<hidden></hidden>`
+These tools are built directly into the browser and they are used to spot any linting issues in your code.
 
 ---
 
-`<input type="text" hidden>`
+These tools are built directly into the browser and are used to automatically format your code.
 
 ---
 
-It is not possible via HTML.
+These tools are built directly into the browser and are used to help you ensure 100% test coverage for your code.
 
 #### --answer--
 
-`<input type="hidden" name="inputName" value="inputValue">`
+These tools are built directly into the browser and are used to help you debug, profile, and analyze web pages.
 
 ### --question--
 
 #### --text--
 
-What does the `target` attribute of a form do?
+Which of the following is the correct way to disable an input?
 
 #### --distractors--
 
-It specifies the variable we intend to change.
+```html
+<input type="checkbox" disabling /> 
+```
 
 ---
 
-It specifies different ways to store the response of the form.
+```html
+<input type="checkbox" inputDisabled /> 
+```
 
 ---
 
-It specifies different keyword searches.
+```html
+<input type="checkbox" disabledInput /> 
+```
 
 #### --answer--
 
-It indicates where to display the response after submitting the form.
+```html
+<input type="checkbox" disabled /> 
+```
 
 ### --question--
 
 #### --text--
 
-Which of the following `type` attributes for the `input` element is correct??
+Which of the following is a valid value for the `type` attribute?
 
 #### --distractors--
 
-`<input type="search">`
+```html
+<input type="time">
+```
 
 ---
 
-`<input type="range" min="" max="">`
+```html
+<input type="action">
+```
 
 ---
 
-`<input type="email">`
+```html
+<input type="capture">
+```
 
 #### --answer--
 
-All of the other choices.
+```html
+<input type="email">
+```
 
 ### --question--
 
 #### --text--
 
-What does the `action` attribute do?
+Which of the following is the correct use of the `size` attribute?
 
 #### --distractors--
 
-It works as the `submit` attribute.
+```html
+<input id="fullName" type="text" size=".001" />
+```
 
 ---
 
-It is used to collect data from the user.
+```html
+<input id="fullName" type="text" size="large" />
+```
 
 ---
 
-It defines the next steps to be taken.
+```html
+<input id="fullName" type="text" size="10vh" />
+```
 
 #### --answer--
 
-It defines where the form's response is sent.
+```html
+<input id="fullName" type="text" size="10" />
+```
 
 ### --question--
 
 #### --text--
 
-How can you define the length of an input?
+Which of the following attributes is used to specify the minimum number of characters required in an input field?
 
 #### --distractors--
 
-It is not possible.
+`minlen`
 
 ---
 
-`<input length="15">`
+`Mlength`
 
 ---
 
-`<input len="15">`
+`minimumLen`
 
 #### --answer--
 
-`<input minlength="3" maxlength="15">`
+`minlength`
 
 ### --question--
 
 #### --text--
 
-How can you remove form validation?
+Which of the following button examples does **NOT** use a correct value for the `type` attribute?
 
 #### --distractors--
 
-`<input type="button" formnovalidate>`
+```html
+<button type="submit">Submit</button>
+```
 
 ---
 
-`<button type="button" formnovalidate></button>`
+```html
+<button type="button">Example Button</button>
+```
 
 ---
 
-`<input type="text" formnovalidate>`
+```html
+<button type="reset">Reset</button>
+```
 
 #### --answer--
 
-`<button type="submit" formnovalidate></button>`
+```html
+<button type="btn">Example Btn</button>
+```
 
 ### --question--
 
 #### --text--
 
-Which attribute is used to associate a label with an input?
+Which attribute is used to specify the value for a button?
 
 #### --distractors--
 
-`des`
+`buttonValue`
 
 ---
 
-`to`
+`val`
 
 ---
 
-`describe`
+`btnVal`
 
 #### --answer--
 
-`for`
+`value`
 
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 9cfe16961e..0dfe06296f 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
@@ -460,7 +460,7 @@ The subclass cannot create new instances.
 
 #### --answer--
 
-The superclass’s constructor will be used by default.
+The superclass's constructor will be used by default.
 
 ### --question--
 
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 1f529807fd..04ccf94347 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
@@ -117,7 +117,7 @@ const person = {
 
 #### --text--
 
-Which of the following property key can only be used with a bracket notation as opposed to dot notation?
+Which of the following property keys can only be used with a bracket notation as opposed to dot notation?
 
 #### --distractors--
 
@@ -425,19 +425,19 @@ Which of the following is true for an object sealed with `Object.seal`?
 
 #### --distractors--
 
-Values of existing properties cannot be changed
+Values of existing properties cannot be changed.
 
 ---
 
-Values of existing properties can be changed but doing this will unseal the object
+Values of existing properties can be changed but doing this will unseal the object.
 
 ---
 
-New properties can be added but existing properties can not be removed
+New properties can be added but existing properties can not be removed.
 
 #### --answer--
 
-New properties cannot be added and existing properties cannot be removed
+New properties cannot be added and existing properties cannot be removed.
 
 ### --question--
 
@@ -447,19 +447,19 @@ Which of the following is true for an object frozen with `Object.freeze`?
 
 #### --distractors--
 
-New properties can be added but existing properties can not be removed
+New properties can be added but existing properties can not be removed.
 
 ---
 
-New properties can be added but doing this will unfreeze the object
+New properties can be added but doing this will unfreeze the object.
 
 ---
 
-Values of existing properties can be changed but doing this will unfreeze the object
+Values of existing properties can be changed but doing this will unfreeze the object.
 
 #### --answer--
 
-Values of existing properties cannot be changed
+Values of existing properties cannot be changed.
 
 ### --question--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
index 7128948cae..3ba595809d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-regular-expressions/66edd3011f18f4ee1bd9d28b.md
@@ -89,7 +89,7 @@ An object containing information about the (sub)string the regular expression ma
 
 ---
 
-Null, the method `test` only validates if the given regular expression is valid.
+`null`, the method `test` only validates if the given regular expression is valid.
 
 #### --answer--
 
@@ -305,7 +305,7 @@ The lookbehind should be placed to the left of the main pattern of the regular e
 
 #### --text--
 
-Which quantifier matches preceding element zero or one times?
+Which quantifier matches the preceding element zero or one times?
 
 #### --distractors--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
index f678caf28f..b8c343bfbe 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-javascript-strings/66edc31c44f1b9c1d5c5ebca.md
@@ -21,19 +21,19 @@ What is the return value for the `includes()` method?
 
 #### --distractors--
 
-If the substring is found within the string, the method returns the string otherwise, it returns `undefined`.
+If the substring is found within the string, the method returns the string. Otherwise, it returns `undefined`.
 
 ---
 
-If the substring is found within the string, the method returns `true` otherwise, it returns and empty string.
+If the substring is found within the string, the method returns `true`. Otherwise, it returns an empty string.
 
 ---
 
-If the substring is found within the string, the method returns the string otherwise, it returns `null`.
+If the substring is found within the string, the method returns the string. Otherwise, it returns `null`.
 
 #### --answer--
 
-If the substring is found within the string, the method returns `true` otherwise, it returns `false`.
+If the substring is found within the string, the method returns `true`. Otherwise, it returns `false`.
 
 ### --question--
 
@@ -165,7 +165,7 @@ It displays a confirmation box with a message.
 
 #### --answer--
 
-It displays a dialog box that prompts the user for input.
+It displays a dialog box that waits for the user input.
 
 ### --question--
 
@@ -205,7 +205,7 @@ developer[2];
 
 #### --text--
 
-How can you obtain the ASCII index of a character in a string?
+How can you obtain the ASCII value of a character in a string?
 
 #### --distractors--
 
@@ -309,23 +309,23 @@ How can you check if the string `"JavaScript"` contains a specific substring?
 
 #### --text--
 
-Which method extracts a substring from the string `"JavaScript"`?
+Which of the following extracts the substring `"Script"` from the string `"JavaScript"`?
 
 #### --distractors--
 
-`"JavaScript".remove()`
+`"JavaScript".remove(3)`
 
 ---
 
-`"JavaScript".extract()`
+`"JavaScript".extract(4)`
 
 ---
 
-`"JavaScript".cut()`
+`"JavaScript".cut(3)`
 
 #### --answer--
 
-`"JavaScript".slice()`
+`"JavaScript".slice(4)`
 
 ### --question--
 
@@ -463,7 +463,7 @@ How do you remove whitespace from the beginning and end of a string?
 
 #### --text--
 
-Which of the following is the correct syntax for escaping strings?
+Which of the following is the correct syntax for escaping quotes?
 
 #### --distractors--
 
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 9d37ab0df0..26f2f65df7 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
@@ -51,7 +51,7 @@ Which of the following is NOT a JavaScript data type?
 
 ---
 
-`bigint`
+`bigInt`
 
 #### --answer--
 
@@ -87,19 +87,19 @@ Which of the following is a conventional variable name in JavaScript?
 
 #### --distractors--
 
-`let my_var;`
+`my_var;`
 
 ---
 
-`let my-var;`
+`my-var;`
 
 ---
 
-`let MyVar;`
+`MyVar;`
 
 #### --answer--
 
-`let myVar;`
+`myVar;`
 
 ### --question--
 
@@ -109,11 +109,11 @@ What is the difference between `let` and `const` variable declarations in JavaSc
 
 #### --distractors--
 
-`let` is block scoped, `const` is not.
+`const` cannot be re-assigned nor re-declared. `let` can be re-assigned and re-declared.
 
 ---
 
-`const` is block scoped, `let` is not.
+`const` can be re-assigned and re-declared. `let` cannot be re-assigned nor re-declared.
 
 ---
 
@@ -127,23 +127,28 @@ What is the difference between `let` and `const` variable declarations in JavaSc
 
 #### --text--
 
-What is the difference between local and global scope in JavaScript?
+What would be the outcome of the following code?
+
+```js
+let name = "Andy";
+name[0] = "M";
+```
 
 #### --distractors--
 
-Variables declared in local scope can be accessed from anywhere in the program.
+The value of `name` would be `"MAndy"`.
 
 ---
 
-Variables declared in global scope can only be accessed from inside a function.
+The value of `name` would be `"Mndy"`.
 
 ---
 
-Variables declared in global scope cannot be re-declared.
+The value of `name` would still be `"Andy"`.
 
 #### --answer--
 
-Variables declared in global scope can be accessed from anywhere in the program.
+It would throw an error.
 
 ### --question--
 
@@ -193,7 +198,7 @@ Adds the string `world` to the variable `hello`, and prints it out in the consol
 
 #### --answer--
 
-Creates a third empty string, copies the values of both strings to it, and finally reassigns the `hello` variable to the third string and prints it out in the console.
+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.
 
 ### --question--
 
@@ -375,32 +380,23 @@ Which of the following declares a variable in JavaScript that cannot be changed?
 
 #### --text--
 
-In the code below, which variable is in the global scope in JavaScript:
-
-```js
-let a = 0;
-
-if (a < 10) {
-  let b = 1;
-  return a + b;
-}
-```
+Which of the following is a valid variable name in JavaScript?
 
 #### --distractors--
 
-Variable `b` is in the global scope.
+`tart@n`
 
 ---
 
-Both variables `a` and `b` are in the global scope.
+`4cats`
 
 ---
 
-None of the variables are in the global scope.
+`!!dogs`
 
 #### --answer--
 
-Variable `a` is in the global scope, and can be accessed from anywhere in the program.
+`$number`
 
 ### --question--
 
@@ -428,79 +424,65 @@ Which of the following is NOT a valid string concatenation method in JavaScript?
 
 #### --text--
 
-What will be the output of the following code:
-
-```js
-let hello = "hello";
-if (true) {
-  let world = "world";
-}
-console.log(hello + " " + world);
-```
+Which of the following variable names uses camelCase correctly?
 
 #### --distractors--
 
-`hello world`
+`a_long_variable_name`
 
 ---
 
-`helloworld`
+`alongvariableName`
 
 ---
 
-`hello`
+`ALongVariableName`
 
 #### --answer--
 
-`ReferenceError: world is not defined`
+`aLongVariableName`
 
 ### --question--
 
 #### --text--
 
-What will be the output of the code below:
-
-```js
-const x = 0;
-while (x < 10) x++;
-console.log(x);
-```
+Which chatacter JavaScript uses to mark the end of a statement?
 
 #### --distractors--
 
-`10`
+`:`
 
 ---
 
-`0`
+`,`
 
 ---
 
-`1 2 3 4 5 6 7 8 9 10`
+`.`
 
 #### --answer--
 
-`TypeError: Assignment to constant variable.`
+`;`
 
 ### --question--
 
 #### --text--
 
-Given the string `freeCodeLamp`, which JavaScript string method can be used to turn it into `freeCodeCamp`?
+Which of the following is NOT a JavaScript data type?
 
 #### --distractors--
 
-`"freeCodeLamp"[8] = "C";`
+`Symbol`
 
 ---
 
-`"freeCodeLamp".charAt(8) = "C";`
+`Boolean`
 
 ---
 
-`"freeCodeLamp".indexOf("L") = "C";`
+`Null`
 
 #### --answer--
 
-`"freeCodeLamp".replace("L", "C");`
+`Float`
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md b/curriculum/challenges/chinese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
index 7579004a67..9ea0ef0e53 100644
--- a/curriculum/challenges/chinese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
+++ b/curriculum/challenges/chinese/25-front-end-development/quiz-semantic-html/66ed903cf45ce3ece4053ebe.md
@@ -153,7 +153,7 @@ What is a typical use case of the `ruby` element?
 
 #### --distractors--
 
-It specifies the document’s character encoding.
+It specifies the document's character encoding.
 
 ---
 
@@ -201,7 +201,7 @@ It styles text with custom fonts.
 
 ---
 
-It specifies the document’s character encoding.
+It specifies the document's character encoding.
 
 ---
 
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 19470e6d1b..9e01e081b0 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
@@ -47,7 +47,7 @@ It makes the text input focusable with a keyboard.
 
 ---
 
-It hides the input’s placeholder text.
+It hides the input's placeholder text.
 
 ---
 
@@ -55,7 +55,7 @@ It removes the default browser styling for inputs.
 
 #### --answer--
 
-It ensures padding and borders are included in the element’s width and height.
+It ensures padding and borders are included in the element's width and height.
 
 ### --question--
 
@@ -77,7 +77,7 @@ It automatically adjusts the font size.
 
 #### --answer--
 
-It ensures the input doesn’t stretch too wide on larger screens.
+It ensures the input doesn't stretch too wide on larger screens.
 
 ### --question--
 
@@ -87,7 +87,7 @@ Why should you add `:focus` styles to text inputs?
 
 #### --distractors--
 
-It hides the input’s border.
+It hides the input's border.
 
 ---
 
@@ -289,7 +289,7 @@ When you want to fully customize the form control's style.
 
 ---
 
-When the browser’s default styles are hard to override.
+When the browser's default styles are hard to override.
 
 ---
 
@@ -417,7 +417,7 @@ What issue can arise when using `overflow: hidden;` on form elements?
 
 #### --distractors--
 
-It improves the form’s overall accessibility.
+It improves the form's overall accessibility.
 
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md b/curriculum/challenges/chinese/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
index 516dc86d30..e9e7d19999 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md
@@ -13,12 +13,28 @@ Review the concepts below to prepare for the upcoming quiz.
 
 - **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
 - **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector, or selectors.
+
+Here is the general syntax of a CSS rule:
+
+```css
+selector {
+    property: value;
+}
+```
+
 - **`meta name="viewport"` Element**: This `meta` element gives the browser instructions on how to control the page's dimensions and scaling on different devices, particularly on mobile phones and tablets.
 - **Default Browser Styles**: Each HTML element will have default browser styles applied to them. This usually includes items like default margins and paddings.
 
 ## Inline, Internal, and External CSS
 
 - **Inline CSS**: These styles are written directly within an HTML element using the `style` attribute. Most of the time you will not be using inline CSS due to separation of concerns.
+
+Here is an example of inline CSS:
+
+```html
+<p style="color: red;">This is a red paragraph.</p>
+```
+
 - **Internal CSS**: These styles are written within the `<style>` tags inside the `<head>` section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
 - **External CSS**: These styles are written in a separate CSS file and linked to the HTML document using the `<link>` element in the `<head>` section. For most projects, you will use an external CSS file over internal or inline CSS.
 
@@ -68,7 +84,7 @@ ul li {
 }
 ```
 
-- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follow the `h2` element.
+- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
 
 ```html
 <h2>I am a sub heading</h2>
@@ -113,6 +129,8 @@ ul ~ p {
 
 - **`margin` Property**: This property is used to apply space outside the element, between the element's border and the surrounding elements.
 - **`padding` Property**: This property is used to apply space inside the element, between the content and its border.
+- **`margin` Shorthand**: The `margin` property can be set using the shorthand syntax, which allows you to set the margin for all four sides of an element at once. The values are applied in the order `top`, `right`, `bottom`, `left`.
+- **`padding` Shorthand**: The `padding` property can also be set using the shorthand syntax, which allows you to set the padding for all four sides of an element at once. The values are applied in the order `top`, `right`, `bottom`, `left`.
 
 ## CSS Specificity
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md b/curriculum/challenges/chinese/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
index 07d30165b2..874ee70ae2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md
@@ -12,7 +12,9 @@ Review the concepts below to prepare for the upcoming quiz.
 ## HTML Basics
 
 - **Role of HTML**: Foundation of web structure.
-- **Block-level elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold over HTML elements.
+- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `<h1></h1>`, `<p></p>`).
+- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold over HTML elements.
+- **Void Elements**: Do not have a closing tag (e.g., `<img>`).
 - **Attributes**: Adding metadata and behavior to elements.
 
 ## Identifiers and Grouping
@@ -28,12 +30,12 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Boilerplate and Encoding
 
-- **HTML boilerplate**: Basic structure of a webpage.
+- **HTML boilerplate**: Basic structure of a webpage, which includes the `DOCTYPE`, `html`, `head`, and `body` elements. It should be used as the starting point for an HTML document.
 - **UTF-8 character encoding**: Ensuring universal character display.
 
 ## SEO and Social Sharing
 
-- **Meta tags (`description`)**: How it impacts SEO.
+- **Meta tags (`description`)**: Providing a short description for the web page and impacting SEO.
 - **Open Graph tags**: Enhancing social media sharing.
 
 ## Media Elements and Optimization
@@ -54,7 +56,6 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Absolute vs. relative paths**: Navigating directories.
 - **Path syntax**: Understanding `/`, `./`, `../` for file navigation.
 - **Link states**: Managing different link interactions (hover, active).
-- **Inline vs. block-level links**: Layout and behavior differences.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md b/curriculum/challenges/chinese/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
index a2beaedae0..6c425c284b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md
@@ -16,7 +16,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Best Practices With CSS and Accessibility
 
-- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
+- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won't be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
 - **`visibility: hidden;`**: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.
 - **`.sr-only` CSS class**: This is a common technique used to visually hide content while keeping it accessible to screen readers.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md b/curriculum/challenges/chinese/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
index 17aab21604..24c85a1f04 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md
@@ -1,6 +1,6 @@
 ---
 id: 671a88d636cebc5fbd407b78
-title: CSS Backgrounds and Borders Review
+title: Lists, Links, CSS Background and Borders Review
 challengeType: 24
 dashedName: review-css-backgrounds-and-borders
 ---
@@ -16,6 +16,12 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`list-style-position` Property**: This property is used to set the position for the list marker. The only two acceptable values are inside and outside.
 - **`list-style-image` Property**: This property is used to use an image for the list item marker. A common use case is to use the `url` function with a value set to a valid image location.
 
+## Spacing list items using `margin`
+
+- Apart from `line-height`, margins can also be used in CSS to enhance the spacing and readability of list items.
+- Margins create space outside each `<li>` element, allowing control over the gap between list items.
+- `margin-bottom` is used to create space below each list item. For example, `margin-bottom: 10px;` will create a 10-pixel gap below each list item.
+
 ## Styling Links
 
 - **`pseudo-class`**: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the `:hover`, `:visited` and `:focus` states.
@@ -27,10 +33,10 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Working with Backgrounds and Borders
 
-- **`background-size` Property**: This property is used to set the background size for an element.
-- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. You can also specify that there should be no repeat by using the `no-repeat` property.
-- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword value.
-- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place.
+- **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element.
+- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat` meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` property.
+- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword values like `top`, `bottom`, `left`, `right`, and `center`.
+- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are `scroll` (default), where the background image scrolls with the content, and `fixed`, where the background image stays in the same position on the screen.
 - **`background-image` Property**: This property is used to set the background image of an element. You can set multiple background images at the same time and use either the `url`, `radial-gradient` or `linear-gradient` functions as values.
 - **`background` Property**: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: `background: no-repeat url("example-url-goes-here");`
 - **Good Contrast for Background and Foreground Colors**: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
@@ -43,6 +49,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **`border-left` Property**: This property is used to set the styles for the left border of an element. `border-left: 4px dotted orange;` sets a 4-pixel-wide dotted orange border on the left side of the element.
 - **`border` Property**: This is the shorthand property for setting the width, style, and color of an element's border. `border: 1px solid black;` sets a 1-pixel-wide solid black border.
 - **`border-radius` Property**: This property is used to create rounded corners for an element's border.
+- **`border-style` Property**: This property is used to set the style of an element's border. Some accepted values include `solid`, `dashed`, `dotted`, and `double`.
 
 ## Gradients
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
index f96930b45c..a14acbae2c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
@@ -16,7 +16,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## The `flex-direction` Property
 
-- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser's default language (left to right or right to left).
 - **`flex-direction: row-reverse;`**: This reverses the items in the row.
 - **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
 - **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
@@ -24,7 +24,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## The `flex-wrap` Property
 
 - **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
-- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won't be wrapped onto a new line, even if their width exceed the container's width.
 - **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
 - **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
 - **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md b/curriculum/challenges/chinese/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
index 41467db42f..5fb9d6edf0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md
@@ -34,7 +34,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited.
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/chinese/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
index 3d30ed302e..ca255cbb7d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md
@@ -35,7 +35,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 - **Descendant Combinator**: This combinator is used to target elements that are descendants of a specified parent element. The following example will target all `li` items inside `ul` elements.
 - **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. The following example will target all `p` elements that are direct children of the `container` class.
-- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follow the `h2` element.
+- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
 
 - **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and share the same parent.
 
@@ -157,7 +157,7 @@ Review the concepts below to prepare for the upcoming exam.
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it’s visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited.
@@ -285,7 +285,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## The `flex-direction` Property
 
-- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser's default language (left to right or right to left).
 - **`flex-direction: row-reverse;`**: This reverses the items in the row.
 - **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
 - **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
@@ -293,7 +293,7 @@ Review the concepts below to prepare for the upcoming exam.
 ## The `flex-wrap` Property
 
 - **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
-- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won't be wrapped onto a new line, even if their width exceed the container's width.
 - **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
 - **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
 - **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
@@ -373,7 +373,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## Best Practices With CSS and Accessibility
 
-- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won’t be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
+- **`display: none;`**: Using `display: none;` means that screen readers and other assistive technologies won't be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.
 - **`visibility: hidden;`**: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree.
 - **`.sr-only` CSS class**: This is a common technique used to visually hide content while keeping it accessible to screen readers.
 - **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md b/curriculum/challenges/chinese/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
index d0820b9388..5bf0e7b4f4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-debugging-javascript/6723cd54fc196dbd053f9dfb.md
@@ -36,7 +36,7 @@ const developerObj = {
 developerObj.map()
 ```
 
-- **RangeError**: These errors happen when your code tries to use a value that’s outside the range of what JavaScript can handle.
+- **RangeError**: These errors happen when your code tries to use a value that's outside the range of what JavaScript can handle.
 
 ```js
 const arr = [];
@@ -58,7 +58,7 @@ function validateNumber(input) {
 
 ## `try...catch...finally`
 
-- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It’s commonly used for cleanup tasks, such as closing files or releasing resources.
+- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It's commonly used for cleanup tasks, such as closing files or releasing resources.
 
 ```js
 function processInput(input) {
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md b/curriculum/challenges/chinese/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
index 021d0ab750..bce084bcbb 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-dom-manipulation-and-click-events-with-javascript/6723cc7a8e7aa3b9befd4bac.md
@@ -15,7 +15,7 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
 - **Browser APIs**: These APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.
 - **Third-Party APIs**: These are not built into the browser by default. You have to retrieve their code in some way. Usually, they will have detailed documentation explaining how to use their services. An example is the Google Maps API, which you can use to display interactive maps on your website.
-- **DOM**: The DOM stands for Document Object Model. It’s a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It’s the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
+- **DOM**: The DOM stands for Document Object Model. It's a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It's the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
 - **`navigator` Interface**: This provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used.
 - **`window` Interface**: This represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md b/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
index 023f056019..9c220360ea 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md
@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Validating Forms with JavaScript
 
-- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user’s provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
+- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
 - **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
 
 ```js
@@ -63,7 +63,7 @@ button.addEventListener('click',(event) => {
 ## Submitting Forms
 
 - **Definition**: There are three ways a form can be submitted. The first is when the user clicks a button in the form which has the `type` attribute set to `submit`. The second is when the user presses the `Enter` key on any editable `input` field in the form. The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the `form` element.
-- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page’s URL.
+- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page's URL.
 
 ```js
 <form action="https://freecodecamp.org">
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md b/curriculum/challenges/chinese/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
index c8acd9c2f3..1d5d0cda92 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-html-accessibility/671a87a39b88245a579c2271.md
@@ -15,11 +15,11 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Assistive Technology for Accessibility
 
-- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
-- **Large text or braille keyboards**: used by people with visual impairments to access the web.
-- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
-- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
-- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
+- **Screen readers**: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
+- **Large text or braille keyboards**: Used by people with visual impairments to access the web.
+- **Screen magnifiers**: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
+- **Alternative pointing devices**: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
+- **Voice recognition**: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
 
 ## Accessibility Auditing Tools
 
@@ -27,26 +27,26 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Accessibility Best Practices
 
-- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using screen readers and other assistive technologies understand the content of your website.
-- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using screen readers and other assistive technologies understand the structure of the table.
-- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using screen readers and other assistive technologies understand the purpose of the input.
-- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using screen readers and other assistive technologies understand the content of the image.
-- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using screen readers and other assistive technologies understand the purpose of the link.
+- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using assistive technologies understand the content of your website.
+- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using assistive technologies understand the structure of the table.
+- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using assistive technologies understand the purpose of the input.
+- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using assistive technologies understand the content of the image.
+- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using assistive technologies understand the purpose of the link.
 - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
-- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
-- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
+- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
+- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
 
 ## WAI-ARIA, Roles, and Attributes
 
-- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
-- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps people using screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
+- **Aria roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps people using assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
 - **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
 - **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
-- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
-- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
-- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using screen readers and other assistive technologies understand the content of the website.
-- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps people using screen readers and other assistive technologies understand the relationship between the elements.
-- **`aria-describedby` attribute**: used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
+- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.
+- **`aria-live` attribute**: Used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
+- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using assistive technologies understand the content of the website.
+- **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps people using assistive technologies understand the relationship between the elements.
+- **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-html/671a883163d5ab5d47145880.md b/curriculum/challenges/chinese/25-front-end-development/review-html/671a883163d5ab5d47145880.md
index fac86631c6..441b546c86 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-html/671a883163d5ab5d47145880.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-html/671a883163d5ab5d47145880.md
@@ -11,8 +11,10 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## HTML Basics
 
-- **Role of HTML**: HTML represents the content and structure of a webpage.
-- **`div` Element**: The `div` element is a block-level element used for grouping content.
+- **Role of HTML**: Foundation of web structure.
+- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `<h1></h1>`, `<p></p>`).
+- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
+- **Void Elements**: Do not have a closing tag (e.g., `<img>`).
 - **Attributes**: Adding metadata and behavior to elements.
 
 ## Identifiers and Grouping
@@ -28,12 +30,12 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Boilerplate and Encoding
 
-- **HTML boilerplate**: This boilerplate includes the `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` elements. It should be used as the starting point for an HTML document.
+- **HTML boilerplate**: Basic structure of a webpage, which includes the `DOCTYPE`, `html`, `head`, and `body` elements. It should be used as the starting point for an HTML document.
 - **UTF-8 character encoding**: Ensuring universal character display.
 
 ## SEO and Social Sharing
 
-- **Meta tags (`description`)**: Describing page content.
+- **Meta tags (`description`)**: Providing a short description for the web page and impacting SEO.
 - **Open Graph tags**: Enhancing social media sharing.
 
 ## Media Elements and Optimization
@@ -45,8 +47,8 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Multimedia Integration
 
-- **HTML audio and video elements**: The `audio` element is used to embed audio content in a webpage, while the `video` element is used to embed video content.
-- **Embedding with `<iframe>`**: If you want to embed content from another site, like YouTube, you can use the `iframe` element.
+- **HTML audio and video elements**: Embedding multimedia.
+- **Embedding with `<iframe>`**: Integrating external video content.
 
 ## Paths and Link Behavior
 
@@ -54,7 +56,6 @@ Review the concepts below to prepare for the upcoming prep exam.
 - **Absolute vs. relative paths**: Navigating directories.
 - **Path syntax**: Understanding `/`, `./`, `../` for file navigation.
 - **Link states**: Managing different link interactions (hover, active).
-- **Inline vs. block-level links**: Links by default are inline elements. You can turn a link into a block-level link by placing it inside a block-level element like a paragraph element.
 
 ## Importance of Semantic HTML
 
@@ -64,62 +65,62 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Semantic HTML Elements
 
-- **Emphasis (`em`) element**: marks text that has stress emphasis.
-- **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
-- **Strong Importance (`strong`) element**: marks text that has strong importance.
-- **Bring Attention To (`b`) element**: used to bring attention to text that is not important for the meaning of the content.
-- **Description List (`dl`) element**: used to represent a list of term-description groupings.
-- **Description Term (`dt`) element**: used to represent the term being defined.
-- **Description Details (`dd`) element**: used to represent the description of the term.
-- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source.
-- **Inline Quotation (`q`) element**: used to represent a short inline quotation.
-- **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym.
-- **Contact Address (`address`) element**: used to represent the contact information.
-- **(Date) Time (`time`) element**: used to represent a date and/or time.
-- **Superscript (`sup`) element**: used to represent superscript text.
-- **Subscript (`sub`) element**: used to represent subscript text.
-- **Inline Code (`code`) element**: used to represent a fragment of computer code.
-- **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-- **Ruby Annotation (`ruby`) element**: used to represent the text of a ruby annotation.
-- **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
+- **Emphasis (`em`) element**: Marks text that has stress emphasis.
+- **Idiomatic Text (`i`) element**: Used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
+- **Strong Importance (`strong`) element**: Marks text that has strong importance.
+- **Bring Attention To (`b`) element**: Used to bring attention to text that is not important for the meaning of the content.
+- **Description List (`dl`) element**: Used to represent a list of term-description groupings.
+- **Description Term (`dt`) element**: Used to represent the term being defined.
+- **Description Details (`dd`) element**: Used to represent the description of the term.
+- **Block Quotation (`blockquote`) element**: Used to represent a section that is quoted from another source.
+- **Inline Quotation (`q`) element**: Used to represent a short inline quotation.
+- **Abbreviation (`abbr`) element**: Used to represent an abbreviation or acronym.
+- **Contact Address (`address`) element**: Used to represent the contact information.
+- **(Date) Time (`time`) element**: Used to represent a date and/or time.
+- **Superscript (`sup`) element**: Used to represent superscript text.
+- **Subscript (`sub`) element**: Used to represent subscript text.
+- **Inline Code (`code`) element**: Used to represent a fragment of computer code.
+- **Unarticulated Annotation (`u`) element**: Used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+- **Ruby Annotation (`ruby`) element**: Used to represent the text of a ruby annotation.
+- **Strikethrough (`s`) element**: Used to represent content that is no longer accurate or relevant.
 
 ## HTML form elements and attributes
 
-- **`form` element**: used to create an HTML form for user input.
-- **`action` attribute**: used to specify the URL where the form data should be sent.
-- **`input` element**: used to create an input field for user input.
-- **`type` attribute**: used to specify the type of input field. Ex. text, password, email, etc.
-- **`label` element**: used to create a label for an input field.
-- **`for` attribute**: used to specify which input field the label is for.
-- **Implicit form association**: inputs can be associated with labels by wrapping the input field inside the `label` element.
-- **Explicit form association**: inputs can be associated with labels by using the `for` attribute on the `label` element.
-- **`placeholder` attribute**: used to specify a short hint that describes the expected value of an input field.
-- **`button` element**: used to create a clickable button. Ex. submit, reset, button.
-- **`value` attribute**: used to specify the value of the button.
-- **`required` attribute**: used to specify that an input field must be filled out before submitting the form.
-- **`size` attribute**: used to specify the width of an input field.
-- **`minlength` attribute**: used to specify the minimum number of characters required in an input field.
-- **`maxlength` attribute**: used to specify the maximum number of characters allowed in an input field.
-- **`disabled` attribute**: used to specify that an input field should be disabled.
-- **`readonly` attribute**: used to specify that an input field is read-only.
-- **Focused state**: this is the state of an input field when it is selected by the user.
+- **`form` element**: Used to create an HTML form for user input.
+- **`action` attribute**: Used to specify the URL where the form data should be sent.
+- **`input` element**: Used to create an input field for user input.
+- **`type` attribute**: Used to specify the type of input field. Ex. text, password, email, etc.
+- **`label` element**: Used to create a label for an input field.
+- **`for` attribute**: Used to specify which input field the label is for.
+- **Implicit form association**: Inputs can be associated with labels by wrapping the input field inside the `label` element.
+- **Explicit form association**: Inputs can be associated with labels by using the `for` attribute on the `label` element.
+- **`placeholder` attribute**: Used to specify a short hint that describes the expected value of an input field.
+- **`button` element**: Used to create a clickable button. Ex. submit, reset, button.
+- **`value` attribute**: Used to specify the value of the button.
+- **`required` attribute**: Used to specify that an input field must be filled out before submitting the form.
+- **`size` attribute**: Used to specify the width of an input field.
+- **`minlength` attribute**: Used to specify the minimum number of characters required in an input field.
+- **`maxlength` attribute**: Used to specify the maximum number of characters allowed in an input field.
+- **`disabled` attribute**: Used to specify that an input field should be disabled.
+- **`readonly` attribute**: Used to specify that an input field is read-only.
+- **Focused state**: This is the state of an input field when it is selected by the user.
 
 ## HTML Table elements and attributes
 
-- **Table element**: used to create an HTML table.
-- **Table Head (`thead`) element**: used to group the header content in an HTML table.
-- **Table Row (`tr`) element**: used to create a row in an HTML table.
-- **Table Header (`th`) element**: used to create a header cell in an HTML table.
-- **`colspan` attribute**: used to specify the number of columns a header cell should span.
-- **Table body (`tbody`) element**: used to group the body content in an HTML table.
-- **Table Data Cell (`td`) element**: used to create a data cell in an HTML table.
-- **Table Foot (`tfoot`) element**: used to group the footer content in an HTML table.
+- **Table element**: Used to create an HTML table.
+- **Table Head (`thead`) element**: Used to group the header content in an HTML table.
+- **Table Row (`tr`) element**: Used to create a row in an HTML table.
+- **Table Header (`th`) element**: Used to create a header cell in an HTML table.
+- **`colspan` attribute**: Used to specify the number of columns a header cell should span.
+- **Table body (`tbody`) element**: Used to group the body content in an HTML table.
+- **Table Data Cell (`td`) element**: Used to create a data cell in an HTML table.
+- **Table Foot (`tfoot`) element**: Used to group the footer content in an HTML table.
 
 ## HTML Tools
 
-- **HTML validator**: a tool that checks the syntax of HTML code to ensure it is valid.
-- **DOM inspector**: a tool that allows you to inspect and modify the HTML structure of a web page.
-- **Devtools**: a set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
+- **HTML validator**: A tool that checks the syntax of HTML code to ensure it is valid.
+- **DOM inspector**: A tool that allows you to inspect and modify the HTML structure of a web page.
+- **Devtools**: A set of web developer tools built directly into the browser that helps you debug, profile, and analyze web pages.
 
 ## Introduction to Accessibility
 
@@ -127,11 +128,11 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Assistive Technology for Accessibility
 
-- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
-- **Large text or braille keyboards**: used by people with visual impairments to access the web.
-- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
-- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
-- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
+- **Screen readers**: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
+- **Large text or braille keyboards**: Used by people with visual impairments to access the web.
+- **Screen magnifiers**: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
+- **Alternative pointing devices**: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
+- **Voice recognition**: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
 
 ## Accessibility Auditing Tools
 
@@ -139,26 +140,26 @@ Review the concepts below to prepare for the upcoming prep exam.
 
 ## Accessibility Best Practices
 
-- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps screen readers and other assistive technologies understand the content of your website.
-- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps screen readers and other assistive technologies understand the structure of the table.
-- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps screen readers and other assistive technologies understand the purpose of the input.
-- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps screen readers and other assistive technologies understand the content of the image.
-- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps screen readers and other assistive technologies understand the content of the link.
+- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps assistive technologies understand the content of your website.
+- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps assistive technologies understand the structure of the table.
+- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps assistive technologies understand the purpose of the input.
+- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps assistive technologies understand the content of the image.
+- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps assistive technologies understand the purpose of the link.
 - **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
-- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
-- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
+- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
+- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
 
 ## WAI-ARIA, Roles, and Attributes
 
-- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
-- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
-- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
-- **`aria-hidden` attribute**: Used to hide an element from assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
-- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
-- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
-- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help screen readers and other assistive technologies understand the content of the website.
-- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps screen readers and other assistive technologies understand the relationship between the elements.
-- **`aria-describedby` attribute**: used to associate an element with another element that describes it. This helps screen readers and other assistive technologies understand the purpose of the element.
+- **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
+- **Aria roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
+- **`aria-hidden` attribute**: Used to hide an element from assistive technologies such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
+- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.
+- **`aria-live` attribute**: Used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
+- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help assistive technologies understand the content of the website.
+- **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps assistive technologies understand the relationship between the elements.
+- **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This helps assistive technologies understand the purpose of the element.
 
 # --assignment--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
index e84ae23c5c..8c3f6af11a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-arrays/6723c66f623701a3cdf72130.md
@@ -76,7 +76,7 @@ console.log(second); // "banana"
 console.log(third); // "orange"
 ```
 
-- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven’t been destructured into a new array.
+- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven't been destructured into a new array.
 
 ```js
 const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
index 425c938655..0ba5228a9d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-audio-and-video/6723cf27c6e9a0c3f3041385.md
@@ -36,9 +36,9 @@ function pauseAudio() {
 ## Different Audio and Video Formats
 
 - **MIME type**: A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type. The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
-- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user’s current environment.
+- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user's current environment.
 - **MP3**: This is a type of digital file format used to store music, audio, or sound. It's a compressed version of a sound recording that makes the file size smaller, so it's easier to store and share. An MP3 file has the MIME type audio/mp3
-- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it’s a video file or audio-only.
+- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it's a video file or audio-only.
 
 ## codecs
 
@@ -50,7 +50,7 @@ function pauseAudio() {
 
 ## Media Capture and Streams API
 
-- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user’s hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
+- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
 
 ```js
 window.navigator.mediaDevices.getUserMedia({
@@ -72,7 +72,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Screen Capture API
 
-- **Definition**: The Screen Capture API is used to record a user’s screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+- **Definition**: The Screen Capture API is used to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
 
 ## MediaStream Recording API
 
@@ -80,7 +80,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Media Source Extensions API
 
-- **topic**: The Media Source Extensions API is what allows you to directly pass a user’s webcam feed to a video element with the `srcObject` property.
+- **topic**: The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property.
 
 ## Web Audio API
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
index 497f523801..bac65e3eef 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-events/6723cc0ca05ce9b87a319ceb.md
@@ -38,7 +38,7 @@ selectEl.addEventListener("change", (e) => {
 
 ## Event Bubbling
 
-- **Definition**: Event bubbling, or propagation, refers to how an event “bubbles up” to parent objects when triggered.
+- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
 
 ## Event Delegation
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
index 6af2aefde7..2852de734d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-math/6723c463e51a2d9b747d7529.md
@@ -152,7 +152,7 @@ const num = 4;
 console.log(-num); // -4
 ```
 
-- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it’s `false`, it becomes `true`. 
+- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`. 
 
 ## Bitwise Operators
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
index 9b25149e70..d401947daf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md
@@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Regular Expressions and Common Methods
 
-- **Definition**: Regular Expressions, or Regex, are used to create a “pattern”, which you can then use to check against a string, extract text, and more.
+- **Definition**: Regular Expressions, or Regex, are used to create a "pattern", which you can then use to check against a string, extract text, and more.
 
 ```js
 const regex = /freeCodeCamp/;
@@ -65,7 +65,7 @@ for (let match of iterator) {
 
 ## Regular Expression Modifiers
 
-- **Definition**: Modifiers, often referred to as “flags”, modify the behavior of a regular expression.
+- **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression.
 - **`i` Flag**: This flag makes a regex ignore case.
 
 ```js
@@ -82,7 +82,7 @@ console.log(regex.test("freeCodeCamp")); // true
 console.log(regex.test("freeCodeCamp is great")); // false
 ```
 
-- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says “match the start of the string”. The `$` anchor, at the end of the regular expression, says “match the end of the string”.
+- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string".
 
 ```js
 const start = /^freeCodeCamp/i;
@@ -194,7 +194,7 @@ const regex = /^\d{4}$/;
 
 ## Capturing Groups and Backreferences
 
-- **Capturing Groups**: A capturing group allows you to “capture” a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+- **Capturing Groups**: A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
 
 ```js
 const regex = /free(code)camp/i;
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
index 562fab5a8f..b1519c457b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-strings/6723c1946e4cd7909a836bb4.md
@@ -62,7 +62,7 @@ console.log(char);  // A
 ## Other Common String Methods
 
 - **The `indexOf` Method**: This method is used to search for a substring within a string. If the substring is found, `indexOf` returns the index (or position) of the first occurrence of that substring. If the substring is not found, `indexOf` returns -1, which indicates that the search was unsuccessful.
-- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.
+- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true. Otherwise, it returns false.
 - **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
 - **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
 - **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
index a43eadb8af..27b76f9cce 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript-variables-and-data-types/6723be264695fb7e619fe1fa.md
@@ -15,7 +15,7 @@ While HTML and CSS provide website structure, JavaScript brings interactivity to
 
 ## Data Types in JavaScript
 
-Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else.
+Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
 
 - **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
 - **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
@@ -80,7 +80,7 @@ const cityName = 'New York';
 cityName = 'Los Angeles'; // TypeError: Assignment to constant variable.
 ```
 
-- Variables declared using `const` find uses in declaring constants, that are not allowed to change through out the code, such as `PI` or `MAX_SIZE`.
+- Variables declared using `const` find uses in declaring constants, that are not allowed to change throughout the code, such as `PI` or `MAX_SIZE`.
 
 ## Variable Naming Conventions
 
@@ -201,7 +201,7 @@ let isLoggedin = true;
 console.log(typeof isLoggedin); // boolean
 ```
 
-- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
+- However, there's a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
 
 ```js
 let user = null;
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md b/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
index a7e99d583a..3343a69ca7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-javascript/6723d3cfdd0717d3f1bf27e3.md
@@ -16,7 +16,7 @@ While HTML and CSS provide website structure, JavaScript brings interactivity to
 
 ## Data Types in JavaScript
 
-Data types help the program understand the kind of data it’s working with, whether it's a number, text, or something else.
+Data types help the program understand the kind of data it's working with, whether it's a number, text, or something else.
 
 - **Number**: A number represents both integers and floating-point values. Examples of integers include 7, 19, and 90.
 - **Floating point**: A floating point number is a number with a decimal point. Examples include 3.14, 0.5, and 0.0001.
@@ -202,7 +202,7 @@ let isLoggedin = true;
 console.log(typeof isLoggedin); // boolean
 ```
 
-- However, there’s a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
+- However, there's a well-known quirk in JavaScript when it comes to null. The `typeof` operator returns `object` for null values.
 
 ```js
 let user = null;
@@ -262,7 +262,7 @@ console.log(char);  // A
 ## Other Common String Methods
 
 - **The `indexOf` Method**: This method is used to search for a substring within a string. If the substring is found, `indexOf` returns the index (or position) of the first occurrence of that substring. If the substring is not found, `indexOf` returns -1, which indicates that the search was unsuccessful.
-- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true otherwise, it returns false.
+- **The `includes()` Method**: This method is used to check if a string contains a specific substring. If the substring is found within the string, the method returns true. Otherwise, it returns false.
 - **The `slice()` Method**: This method extracts a portion of a string and returns a new string, without modifying the original string. It takes two parameters: the starting index and the optional ending index.
 - **The `toUpperCase()` Method**: This method converts all the characters to uppercase letters and returns a new string with all uppercase characters.
 - **The `toLowerCase()` Method**: This method converts all characters in a string to lowercase.
@@ -416,7 +416,7 @@ const num = 4;
 console.log(-num); // -4
 ```
 
-- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it’s `false`, it becomes `true`. 
+- **Logical NOT (`!`) Operator**: This operator flips the boolean value of its operand. So, if the operand is `true`, it becomes `false`, and if it's `false`, it becomes `true`. 
 
 ## Bitwise Operators
 
@@ -669,7 +669,7 @@ console.log(second); // "banana"
 console.log(third); // "orange"
 ```
 
-- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven’t been destructured into a new array.
+- **Rest Syntax**: This allows you to capture the remaining elements of an array that haven't been destructured into a new array.
 
 ```js
 const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
@@ -1381,7 +1381,7 @@ console.log(hasSomeEvenNumbers); // true
 - **Web API**: Web APIs are specifically designed for web applications. These types of APIs are often divided into two main categories: browser APIs and third-party APIs.
 - **Browser APIs**: These APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.
 - **Third-Party APIs**: These are not built into the browser by default. You have to retrieve their code in some way. Usually, they will have detailed documentation explaining how to use their services. An example is the Google Maps API, which you can use to display interactive maps on your website.
-- **DOM**: The DOM stands for Document Object Model. It’s a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It’s the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
+- **DOM**: The DOM stands for Document Object Model. It's a programming interface that lets you interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. The root of the DOM tree is the `<html>` element. It's the top-level container for all the content of an HTML document. All other nodes are descendants of this root node. Then, below the root node, we find other nodes in the hierarchy. A parent node is an element that contains other elements. A child node is an element that is contained within another element.
 - **`navigator` Interface**: This provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used.
 - **`window` Interface**: This represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs.
 
@@ -1746,7 +1746,7 @@ selectEl.addEventListener("change", (e) => {
 
 ## Event Bubbling
 
-- **Definition**: Event bubbling, or propagation, refers to how an event “bubbles up” to parent objects when triggered.
+- **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered.
 
 ## Event Delegation
 
@@ -1779,7 +1779,7 @@ const developerObj = {
 developerObj.map()
 ```
 
-- **RangeError**: These errors happen when your code tries to use a value that’s outside the range of what JavaScript can handle.
+- **RangeError**: These errors happen when your code tries to use a value that's outside the range of what JavaScript can handle.
 
 ```js
 const arr = [];
@@ -1801,7 +1801,7 @@ function validateNumber(input) {
 
 ## `try...catch...finally`
 
-- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It’s commonly used for cleanup tasks, such as closing files or releasing resources.
+- **Definition**: The `try` block is used to wrap code that might throw an error. It acts as a safe space to try something that could fail. The `catch` block captures and handles errors that occur in the try block. You can use the error object inside catch to inspect what went wrong. The `finally` block runs after the try and catch blocks, regardless of whether an error occurred. It's commonly used for cleanup tasks, such as closing files or releasing resources.
 
 ```js
 function processInput(input) {
@@ -1848,7 +1848,7 @@ console.dir(document);
 
 ## Regular Expressions and Common Methods
 
-- **Definition**: Regular Expressions, or Regex, are used to create a “pattern”, which you can then use to check against a string, extract text, and more.
+- **Definition**: Regular Expressions, or Regex, are used to create a "pattern", which you can then use to check against a string, extract text, and more.
 
 ```js
 const regex = /freeCodeCamp/;
@@ -1902,7 +1902,7 @@ for (let match of iterator) {
 
 ## Regular Expression Modifiers
 
-- **Definition**: Modifiers, often referred to as “flags”, modify the behavior of a regular expression.
+- **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression.
 - **`i` Flag**: This flag makes a regex ignore case.
 
 ```js
@@ -1919,7 +1919,7 @@ console.log(regex.test("freeCodeCamp")); // true
 console.log(regex.test("freeCodeCamp is great")); // false
 ```
 
-- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says “match the start of the string”. The `$` anchor, at the end of the regular expression, says “match the end of the string”.
+- **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string".
 
 ```js
 const start = /^freeCodeCamp/i;
@@ -2031,7 +2031,7 @@ const regex = /^\d{4}$/;
 
 ## Capturing Groups and Backreferences
 
-- **Capturing Groups**: A capturing group allows you to “capture” a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
+- **Capturing Groups**: A capturing group allows you to "capture" a portion of the matched string to use however you might need. Capturing groups are defined by parentheses containing the pattern to capture, with no leading characters like a lookahead.
 
 ```js
 const regex = /free(code)camp/i;
@@ -2046,7 +2046,7 @@ console.log("freecoooooooodecamp".replace(regex, "paid$1world"));
 
 ## Validating Forms with JavaScript
 
-- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user’s provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
+- **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
 - **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
 
 ```js
@@ -2098,7 +2098,7 @@ button.addEventListener('click',(event) => {
 ## Submitting Forms
 
 - **Definition**: There are three ways a form can be submitted. The first is when the user clicks a button in the form which has the `type` attribute set to `submit`. The second is when the user presses the `Enter` key on any editable `input` field in the form. The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the `form` element.
-- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page’s URL.
+- **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page's URL.
 
 ```js
 <form action="https://freecodecamp.org">
@@ -2219,9 +2219,9 @@ function pauseAudio() {
 ## Different Audio and Video Formats
 
 - **MIME type**: A MIME type, standing for Multipurpose Internet Mail Extensions, is a standardized way to programmatically indicate a file type. The MIME type can tell an application, such as your browser, how to handle a specific file. In the case of audio and video, the MIME type indicates it is a multimedia format that can be embedded in the web page.
-- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user’s current environment.
+- **`source` Element**: This is used to specify a file type and source - and can include multiple different types by using multiple source elements. When you do this, the browser will determine the best format to use for the user's current environment.
 - **MP3**: This is a type of digital file format used to store music, audio, or sound. It's a compressed version of a sound recording that makes the file size smaller, so it's easier to store and share. An MP3 file has the MIME type audio/mp3
-- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it’s a video file or audio-only.
+- **MP4**: An MP4 is a type of digital file format used to store video and audio. It serves as a container that holds both the video (images) and the sound (music or speech) in one file. An MP4, can have the MIME type audio/mp4 OR video/mp4, depending on whether it's a video file or audio-only.
 
 ## codecs
 
@@ -2233,7 +2233,7 @@ function pauseAudio() {
 
 ## Media Capture and Streams API
 
-- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user’s hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
+- **Definition**: The Media Capture and Streams API, or the MediaStream API, is used to capture audio and video from your device. In order to use the API, you need to create the `MediaStream` object. You could do this with the constructor, but it would not be tied to the user's hardware. Instead, the `mediaDevices` property of the `global` navigator object has a `getUserMedia()` method for you to use.
 
 ```js
 window.navigator.mediaDevices.getUserMedia({
@@ -2255,7 +2255,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Screen Capture API
 
-- **Definition**: The Screen Capture API is used to record a user’s screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
+- **Definition**: The Screen Capture API is used to record a user's screen. This API is exposed by calling the `getDisplayMedia()` method of the `mediaDevices` object and consuming the returned media stream.
 
 ## MediaStream Recording API
 
@@ -2263,7 +2263,7 @@ window.navigator.mediaDevices.getUserMedia({
 
 ## Media Source Extensions API
 
-- **topic**: The Media Source Extensions API is what allows you to directly pass a user’s webcam feed to a video element with the `srcObject` property.
+- **topic**: The Media Source Extensions API is what allows you to directly pass a user's webcam feed to a video element with the `srcObject` property.
 
 ## Web Audio API
 
@@ -2335,9 +2335,9 @@ console.log(map); // Map(3) { 'flower' => 'rose', 'fruit' => 'apple', 'vegetable
 ## Create, Read, Update, Delete (CRUD)
 
 - **Create**: This refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
-- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you're performing a read operation to fetch and display data stored in the database.
 - **Update**: This involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
-- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you're performing a delete operation.
 
 ## HTTP Methods
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md b/curriculum/challenges/chinese/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
index b8d05c1f1f..57a3a0c8e2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-local-storage-and-crud/6723d0ac516099c902394e8b.md
@@ -16,9 +16,9 @@ Review the concepts below to prepare for the upcoming quiz.
 ## Create, Read, Update, Delete (CRUD)
 
 - **Create**: This refers to the process of creating new data. For example, in a web app, this could be when a user adds a new post to a blog.
-- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you’re performing a read operation to fetch and display data stored in the database.
+- **Read**: This is the operation where data is retrieved from a database. For instance, when you visit a blog post or view your profile on a website, you're performing a read operation to fetch and display data stored in the database.
 - **Update**: This involves modifying existing data in the database. An example would be editing a blog post or updating your profile information.
-- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you’re performing a delete operation.
+- **Delete**: This is the operation that removes data from a database. For instance, when you delete a blog post or account, you're performing a delete operation.
 
 ## HTTP Methods
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md b/curriculum/challenges/chinese/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
index 9b2c7e68ff..8ccd73190c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-react-basics/67487e141bb6a7140a352e12.md
@@ -138,7 +138,7 @@ function Child(props) {
 }
 ```
 
-You can pass multiple props using the spread operator `(...)`, after converting them to an object. Here’s an example:
+You can pass multiple props using the spread operator `(...)`, after converting them to an object. Here's an example:
 
 ```jsx
 // Parent component
diff --git a/curriculum/challenges/chinese/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md b/curriculum/challenges/chinese/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
index 8ee1918a05..22f275bcb5 100644
--- a/curriculum/challenges/chinese/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
+++ b/curriculum/challenges/chinese/25-front-end-development/review-semantic-html/671a83934b61f64cefe87a61.md
@@ -17,6 +17,10 @@ Review the concepts below to prepare for the upcoming quiz.
 
 ## Semantic HTML Elements
 
+- **Header element**: used to define the header of a document or section.
+- **Main element**: used to contain the main content of the web page.
+- **Navigation Section (`nav`) element**: represents a section with navigation links.
+- **Figure element**: used to contain illustrations and diagrams.
 - **Emphasis (`em`) element**: marks text that has stress emphasis.
 - **Idiomatic Text (`i`) element**: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
 - **Strong Importance (`strong`) element**: marks text that has strong importance.
@@ -24,16 +28,18 @@ Review the concepts below to prepare for the upcoming quiz.
 - **Description List (`dl`) element**: used to represent a list of term-description groupings.
 - **Description Term (`dt`) element**: used to represent the term being defined.
 - **Description Details (`dd`) element**: used to represent the description of the term.
-- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source.
+- **Block Quotation (`blockquote`) element**: used to represent a section that is quoted from another source. This element has a `cite` attribute. The value of the `cite` attribute is the URL of the source.
 - **Inline Quotation (`q`) element**: used to represent a short inline quotation.
 - **Abbreviation (`abbr`) element**: used to represent an abbreviation or acronym.
 - **Contact Address (`address`) element**: used to represent the contact information.
-- **(Date) Time (`time`) element**: used to represent a date and/or time.
+- **(Date) Time (`time`) element**: used to represent a date and/or time. The `datetime` attribute is used to translate dates and times into a machine-readable format.
+- **ISO 8601 Date (`datetime`) attribute**: used to represent dates and times in a machine-readable format. The standard format is `YYYY-MM-DDThh:mm:ss`.
 - **Superscript (`sup`) element**: used to represent superscript text.
 - **Subscript (`sub`) element**: used to represent subscript text.
 - **Inline Code (`code`) element**: used to represent a fragment of computer code.
+- **Preformatted Text (`pre`) element**: represents preformatted text
 - **Unarticulated Annotation (`u`) element**: used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
-- **Ruby Annotation (`ruby`) element**: used to represent the text of a ruby annotation.
+- **Ruby Annotation (`ruby`) element**: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography.
 - **Strikethrough (`s`) element**: used to represent content that is no longer accurate or relevant.
 
 # --assignment--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
index e9c88a8b05..7b43cf465e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -7,7 +7,7 @@ dashedName: step-29
 
 # --description--
 
-It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
+It's looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
index 65223d73bb..6ab42100a2 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63b61490e633a22b4593e62f.md
@@ -65,7 +65,7 @@ You should assign the `#output` element to `output`.
 ```js
 // assert.deepEqual(output, document.getElementById('output')); cannot be used,
 // as browser defines `output` variable on it own for `#output`.
-assert.match(code, /const\s+output\s*=\s*document.getElementById\(('|")output\1\)/);
+assert.match(code, /const\s+output\s*=\s*document\.getElementById\(('|")output\1\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
index e0db1f9357..b74f722f58 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
@@ -13,66 +13,205 @@ Using the same interpolation syntax, add a second `p` element with the text `con
 
 You should add a second `p` element to your template literal.
 
+
 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```
 
 Your second `p` element should be on a new line.
 
+
 ```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
 
-Your second `p` element should come after your existing `p` element.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
 ```
 
 Your second `p` element should have the text `${consumedCalories} Calories Consumed`.
 
 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```
 
 You should add a third `p` element to your template literal.
 
 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```
 
-Your third `p` element should be on a new line.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
 
-Your third `p` element should come after your second existing `p` element.
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
 
-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.lengthOf(output.children,5);
 ```
 
 Your third `p` element should have the text `${exerciseCalories} Calories Burned`.
 
 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
-```
 
-# --seed--
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
 
-## --after-user-code--
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
 
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
 ```
 
+# --seed--
+
 ## --seed-contents--
 
 ```html
@@ -270,7 +409,7 @@ function addEntry() {
   targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }
 
---fcc-editable-region--
+
 function calculateCalories(e) {
   e.preventDefault();
   isError = false;
@@ -292,6 +431,7 @@ function calculateCalories(e) {
     return;
   }
 
+--fcc-editable-region--
   const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
   const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
   const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
index 203947b61e..936462caf7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/660404511dbf1b90eb23b617.md
@@ -18,13 +18,13 @@ Open up the console to see the result. In the next step, you will learn more abo
 You should have a `console.log` below your `isInvalidInput` function.
 
 ```js
-assert.match(code, /console.log\(/);
+assert.match(code, /console\.log\(/);
 ```
 
 Your console statement should have the value of `isInvalidInput("1e3")`.
 
 ```js
-assert.match(code, /console.log\(isInvalidInput\(('|")1e3\s*\1\);?\)/);
+assert.match(code, /console\.log\(isInvalidInput\(('|")1e3\s*\1\);?\)/);
 
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
index b1f808ba93..08a71268db 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/6604080b66ff6e942d8225b1.md
@@ -31,13 +31,13 @@ Open up the console to see the result. You will learn more about what this resul
 You should have a `console.log` below your `isInvalidInput` function.
 
 ```js
-assert.match(code, /console.log\(/);
+assert.match(code, /console\.log\(/);
 ```
 
 Your console statement should have the value of `isInvalidInput("10")`.
 
 ```js
-assert.match(code, /console.log\(isInvalidInput\(('|")10\s*\1\);?\)/);
+assert.match(code, /console\.log\(isInvalidInput\(('|")10\s*\1\);?\)/);
 
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
index cc6ce6d01e..d9080dfe2d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-calorie-counter/66040ae710de0e96c26a0201.md
@@ -18,7 +18,7 @@ Now that you have finished testing your `isInvalidInput` function, you can remov
 You should remove your `console.log(isInvalidInput("10"));`.
 
 ```js
-assert.notMatch(code, /console.log\(isInvalidInput\("10"\)\);?/g)
+assert.notMatch(code, /console\.log\(isInvalidInput\("10"\)\);?/g)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
index a0ab3e1edc..f77a0e679a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646c48df8674cf2b91020ecc.md
@@ -12,7 +12,7 @@ You have been provided with a basic boilerplate. Begin by adding a `link` elemen
 
 # --hints--
 
-Your should have a `link` element.
+You should have a `link` element.
 
 ```js
 assert.exists(document.querySelector("head>link"));
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
index 28446c8578..910f201646 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646ceb843412c74edee27a79.md
@@ -14,49 +14,49 @@ Using a class selector, give the `.cat-right-ear` element `height` and `width` p
 You should have a `.cat-right-ear` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '100px')
 ```
 
 Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '100px')
 ```
 
 Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor, 'white')
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid blue')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid blue')
 ```
 
 Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid red')
 ```
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
index b37aa9386b..ef3f32fb5e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/646cf2249f02ca5233d9af7c.md
@@ -16,25 +16,25 @@ Using a class selector, give the `.cat-right-ear` element a left and right borde
 You should have a `.cat-right-ear` selector.
 
 ```js 
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '70px solid rgb(94, 94, 94)')
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
index 26922a2a3c..c71c0d6eda 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-painting/6676a8b01e56ec1a1e07c202.md
@@ -19,50 +19,50 @@ Remove the `background-color` property, and you should see a triangle.
 You should have a `.cat-right-ear` selector.
 
 ```js
-assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
+assert.exists(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
 ```
 
 Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height, '0px')
 ```
 
 Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width, '0px')
 ```
 
 Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight, '35px solid transparent')
 ```
 
 Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop, '35px solid transparent')
 ```
 
 
 Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom, '35px solid red')
 ```
 
 Your `.cat-right-ear` selector should not have a `background-color` property.
 
 ```js
-assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
index c1e8b49834..2d15027842 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -49,9 +49,11 @@ assert.equal(document.querySelector('h1').innerText.toLowerCase(), 'catphotoapp'
 You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions.
 
 ```js
-assert.isAtMost(document.querySelectorAll('script').length, 2);
-assert.equal(document.querySelectorAll('style').length, 1);
-assert.equal(document.querySelectorAll('link').length, 0);
+if(__checkForBrowserExtensions){
+  assert.isAtMost(document.querySelectorAll('script').length, 2);
+  assert.equal(document.querySelectorAll('style').length, 1);
+  assert.equal(document.querySelectorAll('link').length, 0);
+}
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index b8e42b9307..6751691733 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -15,7 +15,7 @@ Here is an example linking to `https://www.freecodecamp.org`:
 <a href="https://www.freecodecamp.org"></a>
 ```
 
-Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview.
+Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won't show up in the preview.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index b25a8cbdd9..e2018d6612 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -28,7 +28,8 @@ assert.match(code, /<\/ul>/);
 The `ul` element should be above the second `section` element's closing tag.
 
 ```js
-const secondSectionLastElemNode = $('main > section')[1].lastElementChild;
+const secondSectionLastElemNode =
+  document.querySelectorAll('main > section')[1].lastElementChild;
 assert.equal(secondSectionLastElemNode.nodeName, 'UL');
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
index fc6529131a..c13f28167a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61764c602bee6974e7790f35.md
@@ -7,7 +7,7 @@ dashedName: step-11
 
 # --description--
 
-To give the markers different colors, you’ll need to add a unique class to each one. You can add multiple classes to an element by listing them in the `class` attribute and separating them with a space. For example, the following code adds both the `animal` and `dog` classes to a `div` element:
+To give the markers different colors, you'll need to add a unique class to each one. You can add multiple classes to an element by listing them in the `class` attribute and separating them with a space. For example, the following code adds both the `animal` and `dog` classes to a `div` element:
 
 ```html
 <div class="animal dog">
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
index 75f886d201..fd00f7b450 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/617bbb6b97a83f6d1f7d6e38.md
@@ -7,7 +7,7 @@ dashedName: step-26
 
 # --description--
 
-Now that you've practiced with secondary colors, let’s review how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary color with a nearby secondary color.
+Now that you've practiced with secondary colors, let's review how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary color with a nearby secondary color.
 
 To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule by setting red to its maximum value (`255`) and green to `127`.
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
index c01ff418d3..b1b5000288 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-colored-markers/61a49d15bdbb5e57cc6fd280.md
@@ -7,7 +7,7 @@ dashedName: step-49
 
 # --description--
 
-Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function.
+Color-stops allow you to fine-tune where colors are placed along the gradient line. They are used in the `linear-gradient` function to specify where a color ends and the transition to the next color begins. Either a percentage or a length value can be used to define the color-stop position.
 
 For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space:
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
index 68c7140938..a3b21beb34 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/6733319f1d586b1923e029e3.md
@@ -7,13 +7,13 @@ dashedName: step-15
 
 # --description--
 
-Add a new selector that targets the pseudoelement `::before` of the `h1` element,
+You can add an emoji in front of the title using the pseudo-element `::before` of the `h1` element.
 
-Use the `content` property to put the emoji 🥳 in front of the title: give it a value of `"🥳 "` (note there is a space after the emoji).
+Create an `h1::before` selector, give it a `content` property and set its value to `"🥳 "` (note there is a space after the emoji).
 
 # --hints--
 
-You should have a `h1::before` selector.
+You should have an `h1::before` selector.
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle("h1::before"));
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
index d0d04e7815..62eb6a5184 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673332a6b63f9f1e1f81ba9b.md
@@ -7,11 +7,13 @@ dashedName: step-16
 
 # --description--
 
-Now you can do something similar to add the emoji also after the title: create a `h1::after` selector, give it a `content` property and set the value to `" 🥳"` (note there is a space before the emoji).
+Now you can do something similar to add the emoji also after the title.
+
+Create a selector that targets the pseudo-element `::after` of the `h1` element. Give it a `content` property and set its value to `" 🥳"` (note there is a space before the emoji).
 
 # --hints--
 
-You should have a `h1::after` selector.
+You should have an `h1::after` selector.
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle("h1::after"));
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
index eb5e116fdb..5ddd0eb989 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-greeting-card/673337337f794d3025ded433.md
@@ -24,7 +24,7 @@ You should have a `.card-links a` selector.
 assert.exists(new __helpers.CSSHelp(document).getStyle(".card-links a"));
 ```
 
-The `.card-links a` selector should have a `text-decoration` property set to `note`.
+The `.card-links a` selector should have a `text-decoration` property set to `none`.
 
 ```js
 assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".card-links a")?.getPropertyValue("text-decoration"), "none");
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
index d8f6880195..8b7bf973dc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-hotel-feedback-form/66a9401c9d660d6bb15993e2.md
@@ -27,7 +27,7 @@ Your `label` element should have a `for` attribute set to `"age"`.
 assert.isNotNull(document.querySelector('label[for="age"]'));
 ```
 
-You `label` element should have the text `Age (optional):`.
+Your `label` element should have the text `Age (optional):`.
 
 ```js
 assert.strictEqual(document.querySelector('label[for="age"]').textContent, "Age (optional):");
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
index 1dfbc1497d..3d446000e1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579bf.md
@@ -66,7 +66,7 @@ Your object should have a `pages` property.
 assert.property(library[0], "pages")
 ```
 
-The value of yoour `pages` property should be a number.
+The value of your `pages` property should be a number.
 
 ```js
 assert.isNumber(library[0]?.pages)
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
index ac6bae6794..cc598c8c5c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c1.md
@@ -11,7 +11,7 @@ The rest of the objects representing the books have been filled in for you. You
 
 Now, you should start working on getting several common parts of the books.
 
-Start by displaying all the books. Create a `displayBooks` function with a `catalog` parameter. The function should return a string that contains the `title`, `author`, and `pages` of all the books in the `library` array.
+Start by displaying all the books. Create a `displayBooks` function with a parameter accepting an array with book objects. The function should return a string that contains the `title`, `author`, and `pages` of all the books in the array passed to function.
 
 # --hints--
 
@@ -21,10 +21,10 @@ You should create a `displayBooks` function.
 assert.isFunction(displayBooks)
 ```
 
-Your `displayBooks` function should have a `catalog` parameter.
+Your `displayBooks` function should have one parameter.
 
 ```js
-assert.match(displayBooks.toString(), /catalog/)
+assert.lengthOf(displayBooks, 1)
 ```
 
 Your `displayBooks` function should use a higher order function. Ex. (`filter`, `map`, `reduce`)
@@ -39,24 +39,42 @@ Your `displayBooks` function should return a string.
 assert.isString(displayBooks(library))
 ```
 
-Your `displayBooks` function should have each book title, author and pages in it.
+Your `displayBooks` function should return each book title, author and number of pages, for all books in the array passed to it.
 
 ```js
+const libraryBooks = displayBooks(library);
 library.forEach((book) => {
-  assert.include(displayBooks(library), book.title);
-  assert.include(displayBooks(library), book.author);
-  assert.include(displayBooks(library), book.pages.toString());
+  assert.include(libraryBooks, book.title);
+  assert.include(libraryBooks, book.author);
+  assert.include(libraryBooks, book.pages.toString());
 });
-```
-
-Your `displayBooks` function should contain the total of `8` books avaialble in the library.
-
-```js
-function getNumOfBooks(catalog) {
-  return catalog.map(book => `${book.title} by ${book.author}`);
-}
 
-assert.lengthOf(getNumOfBooks(library), 8);
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+];
+const _differentBooks = displayBooks(_differentLibrary);
+_differentLibrary.forEach((book) => {
+  assert.include(_differentBooks, book.title);
+  assert.include(_differentBooks, book.author);
+  assert.include(_differentBooks, book.pages.toString());
+});
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
index 4c5530c6d5..29ead98bb3 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c2.md
@@ -9,7 +9,7 @@ dashedName: step-5
 
 To display the book summaries, you can use the `about` property of each book.
 
-Create a `getBookSummaries` function with a `catalog` parameter. The `getBookSummaries` function should return an array containing all the `about` property value of each book.
+Create a `getBookSummaries` function with a single parameter, accepting an array with book objects. The `getBookSummaries` function should return an array containing all the `about` property value of each book.
 
 # --hints--
 
@@ -19,10 +19,10 @@ You should create a `getBookSummaries` function.
 assert.isFunction(getBookSummaries)
 ```
 
-Your `getBookSummaries` function should have a `catalog` parameter.
+Your `getBookSummaries` function should have one parameter.
 
 ```js
-assert.match(getBookSummaries.toString(), /catalog/)
+assert.lengthOf(getBookSummaries, 1)
 ```
 
 Your `getBookSummaries` function should return an array.
@@ -37,17 +37,59 @@ Your `getBookSummaries` function should use a higher order function. Ex. (`filte
 assert.match(getBookSummaries.toString(), /filter|map|reduce|forEach/);
 ```
 
-Your `getBookSummaries` function should contain the total of `8` books avaialble in the library.
+Your `getBookSummaries` function should return an array with the same length as the array passed to it.
 
 ```js
 assert.lengthOf(getBookSummaries(library), 8);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+];
+assert.lengthOf(getBookSummaries(_differentLibrary), 3);
 ```
 
-Your `getBookSummaries` function should have the `about` property of each book in the library.
+Your `getBookSummaries` function should return an array with the `about` property of each book from the array passed to it.
 
 ```js
+const summaries = getBookSummaries(library);
 library.forEach((book) => {
-  assert.include(getBookSummaries(library), book.about);
+  assert.include(summaries, book.about);
+});
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+];
+const differentSummaries = getBookSummaries(_differentLibrary);
+_differentLibrary.forEach((book) => {
+  assert.include(differentSummaries, book.about);
 });
 ```
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
index 21f88904bf..da8f4aa2b4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c3.md
@@ -9,7 +9,7 @@ dashedName: step-6
 
 Another useful thing to do is to get the books by their author.
 
-Create a `getBooksByAuthor` function with a `catalog` and `author` parameters.
+Create a `getBooksByAuthor` function with two parameters - an array with book objects and a string with the author.
 
 The function must return an array that contains the books by a particular author.
 
@@ -21,10 +21,10 @@ You should create a `getBooksByAuthor` function.
 assert.isFunction(getBooksByAuthor)
 ```
 
-Your `getBooksByAuthor` function should have a `catalog` and `author` parameters.
+Your `getBooksByAuthor` function should have two parameters.
 
 ```js
-assert.match(getBooksByAuthor.toString(), /catalog,\s*author|author,\s*catalog/)
+assert.lengthOf(getBooksByAuthor, 2)
 ```
 
 Your `getBooksByAuthor` function should return an array.
@@ -57,6 +57,29 @@ assert.lengthOf(pbdBook, 1);
 assert.lengthOf(johnGordon, 1);
 assert.lengthOf(jamesClearBook, 1);
 assert.lengthOf(JDAndSDBook, 1);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author B',
+    about: 'About C',
+    pages: 304,
+  },
+];
+assert.lengthOf(getBooksByAuthor(_differentLibrary, 'Author B'), 2);
+assert.lengthOf(getBooksByAuthor(_differentLibrary, 'Author A'), 1);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
index 3b201fdda8..4825c1b615 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-library-manager/67116d7584d0b469b14579c4.md
@@ -7,7 +7,7 @@ dashedName: step-7
 
 # --description--
 
-Finally, create a `getTotalPages` function with a `catalog` parameter. The function should return the total number of all the pages of the books in the `library` array.
+Finally, create a `getTotalPages` function with a single parameter, accepting an array with book objects. The function should return the total number of pages in the books from the array passed to the function.
 
 # --hints--
 
@@ -18,10 +18,10 @@ You should create a `getTotalPages` function.
 assert.isFunction(getTotalPages)
 ```
 
-Your `getTotalPages` function should have a `catalog` parameter.
+Your `getTotalPages` function should have one parameter.
 
 ```js
-assert.match(getTotalPages.toString(), /catalog/)
+assert.lengthOf(getTotalPages, 1)
 ```
 
 Your `getTotalPages` function should return a number.
@@ -30,10 +30,32 @@ Your `getTotalPages` function should return a number.
 assert.isNumber(getTotalPages(library))
 ```
 
-Your `getTotalPages` function should return the number `2512`.
+Your `getTotalPages` function should return the total number of pages in the books from the array passed to it.
 
 ```js
-assert.equal(getTotalPages(library), 2512);
+assert.strictEqual(getTotalPages(library), 2512);
+
+const _differentLibrary = [
+  {
+    title: 'Title A',
+    author: 'Author A',
+    about: 'About A',
+    pages: 320,
+  },
+  {
+    title: 'Title B',
+    author: 'Author B',
+    about: 'About B',
+    pages: 320,
+  },
+  {
+    title: 'Title C',
+    author: 'Author C',
+    about: 'About C',
+    pages: 304,
+  },
+]
+assert.strictEqual(getTotalPages(_differentLibrary), 944);
 ```
 
 Your `getTotalPages` function should use a higher order function. Ex. (`filter`, `map`, `reduce`).
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md b/curriculum/challenges/chinese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
index 4ebc4bb977..9b07336f69 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-loan-qualification-checker/66c8ba975ee7230e29f6c4ad.md
@@ -9,9 +9,9 @@ dashedName: step-3
 
 To check which loan a user is qualified for based on the `annualIncome` and `creditScore`, you have to use `if/else if` statement or a ternary right inside the `getLoanMessage` function. You'll then return the appropriate message in the block of each condition.
 
-Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than `minCreditScoreForDuplex`.
+Starting with the duplex loan, check if `annualIncome` is greater than or equal to `minIncomeForDuplex` AND if `creditScore` is greater than or equal to `minCreditScoreForDuplex`.
 
-If that condition is true, then the applicant is eligible for a duplex loan and the other loans. So, inside the check, return the string `"You qualify for a car, duplex and Condo loan."`
+If that condition is true, then the applicant is eligible for a duplex loan and the other loans. So, inside the check, return the string `"You qualify for a duplex, condo, and car loan."`
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
new file mode 100644
index 0000000000..adb3c8b8cf
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67471d60ce8e6268fe9e12f6.md
@@ -0,0 +1,604 @@
+---
+id: 67471d60ce8e6268fe9e12f6
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop you will create a music player app capable of playing, pausing, and skipping songs from a playlist.
+
+The HTML and CSS of this project have been provided for you, so you can focus on the JavaScript.
+
+Start by accessing the `#playlist-songs`, `#play`, and `#pause` elements and assign them to the variables `playlistSongs`, `playButton` and `pauseButton`, respectively.
+
+
+# --hints--
+
+You should have a variable called `playlistSongs`.
+
+```js
+assert.isDefined(playlistSongs);
+```
+
+You should assign the `#playlist-songs` element to the variable `playlistSongs`.
+
+```js
+assert.equal(playlistSongs, document.getElementById('playlist-songs'));
+```
+
+You should have a variable called `playButton`.
+
+```js
+assert.isDefined(playButton);
+```
+
+You should assign the `#play` element to the variable `playButton`.
+
+```js
+assert.equal(playButton, document.getElementById('play'));
+```
+
+You should have a variable called `pauseButton`.
+
+```js
+assert.isDefined(pauseButton);
+```
+
+You should assign the `#pause` element to the variable `pauseButton`.
+
+```js
+assert.equal(pauseButton, document.getElementById('pause'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
new file mode 100644
index 0000000000..30f83c65df
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747237371f13173c9f6c27e.md
@@ -0,0 +1,591 @@
+---
+id: 6747237371f13173c9f6c27e
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Access the `#next` and `#previous` elements from the HTML file.
+
+Assign them to variables named `nextButton`, and `previousButton`, respectively.
+
+# --hints--
+
+You should have a variable called `nextButton`.
+
+```js
+assert.isDefined(nextButton);
+```
+
+You should assign the `#next` element to the variable `nextButton`.
+
+```js
+assert.equal(nextButton, document.getElementById('next'));
+```
+
+You should have a variable called `previousButton`.
+
+```js
+assert.isDefined(previousButton);
+```
+
+You should assign the `#previous` element to the variable `previousButton`.
+
+```js
+assert.equal(previousButton, document.getElementById('previous'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+--fcc-editable-region--
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
new file mode 100644
index 0000000000..94809445c6
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674724ff8af92f7733e6d980.md
@@ -0,0 +1,585 @@
+---
+id: 674724ff8af92f7733e6d980
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, create an ampty array named `allSongs` to store all the songs.
+
+# --hints--
+
+You should have a variable called `allSongs`.
+
+```js
+assert.isDefined(allSongs)
+```
+
+You should assign an array to your `allSongs` variable.
+
+```js
+assert.isArray(allSongs)
+```
+
+Your array should be empty.
+
+```js
+assert.isEmpty(allSongs)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
new file mode 100644
index 0000000000..03f55f6703
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747257cdf5412781e138bb2.md
@@ -0,0 +1,619 @@
+---
+id: 6747257cdf5412781e138bb2
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Inside the `allSongs` array, create an object with the following properties and values:
+
+```js
+id: 0,
+title: "Scratching The Surface",
+artist: "Quincy Larson",
+duration: "4:25",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have one value.
+
+```js
+assert.equal(allSongs.length, 1);
+```
+
+Your `allSongs` array should have an object as its first value.
+
+```js
+assert.isObject(allSongs[0]);
+```
+
+Your `allSongs` array should have an object with an `id` property set to the number `0`.
+
+```js
+assert.strictEqual(allSongs[0].id, 0);
+```
+
+Your `allSongs` array should have an object with a `title` property set to the string `"Scratching The Surface"`.
+
+```js
+assert.equal(allSongs[0].title, "Scratching The Surface");
+```
+
+Your `allSongs` array should have an object with an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[0].artist, "Quincy Larson");
+```
+
+Your `allSongs` array should have an object with a `duration` property set to the string `"4:25"`.
+
+```js
+assert.equal(allSongs[0].duration, "4:25");
+```
+
+Your `allSongs` array should have an object with a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"`.
+
+```js
+assert.equal(allSongs[0].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+const allSongs = [
+
+]
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
new file mode 100644
index 0000000000..5660a8dedd
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747274264e8a5799fb3e0b5.md
@@ -0,0 +1,626 @@
+---
+id: 6747274264e8a5799fb3e0b5
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Add a second object with the following keys and values:
+
+```js
+id: 1,
+title: "Can't Stay Down",
+artist: "Quincy Larson",
+duration: "4:15",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have two values.
+
+```js
+assert.equal(allSongs.length, 2);
+```
+
+Your `allSongs` array should have an object as its second value.
+
+```js
+assert.isObject(allSongs[1]);
+```
+
+The second object in your `allSongs` array should have an `id` property set to the number `1`.
+
+```js
+assert.strictEqual(allSongs[1].id, 1);
+```
+
+The second object in your `allSongs` array should have a `title` property set to the string `"Can't Stay Down"`.
+
+```js
+assert.equal(allSongs[1].title, "Can't Stay Down");
+```
+
+The second object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[1].artist, "Quincy Larson");
+```
+
+The second object in your `allSongs` array should have a `duration` property set to the string `"4:15"`.
+
+```js
+assert.equal(allSongs[1].duration, "4:15");
+```
+
+The second object in your `allSongs` array should have a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`.
+
+```js
+assert.equal(allSongs[1].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
new file mode 100644
index 0000000000..d4725a42a5
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674728eda5829d7b4c360643.md
@@ -0,0 +1,629 @@
+---
+id: 674728eda5829d7b4c360643
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add a third object with the following properties and values:
+
+```js
+id: 2,
+title: "Still Learning",
+artist: "Quincy Larson",
+duration: "3:51",
+src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+```
+
+# --hints--
+
+Your `allSongs` array should have an object as its third value.
+
+```js
+assert.isObject(allSongs[2]);
+```
+
+The third object in your `allSongs` array should have an `id` property set to the number `2`.
+
+```js
+assert.equal(allSongs[2].id, 2);
+```
+
+The third object in your `allSongs` array should have a `title` property set to the string `"Still Learning"`.
+
+```js
+assert.equal(allSongs[2].title, "Still Learning");
+```
+
+The third object in your `allSongs` array should have an `artist` property set to the string `"Quincy Larson"`.
+
+```js
+assert.equal(allSongs[2].artist, "Quincy Larson");
+```
+
+The third object in your `allSongs` array should have a `duration` property set to the string `"3:51"`.
+
+```js
+assert.equal(allSongs[2].duration, "3:51");
+```
+
+The third object in your `allSongs` array should have a `src` property set to the string `"https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3"`.
+
+```js
+assert.equal(allSongs[2].src, "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
new file mode 100644
index 0000000000..d2ac453312
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6747299cbed5107c6a00d64c.md
@@ -0,0 +1,656 @@
+---
+id: 6747299cbed5107c6a00d64c
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The rest of the songs has been added to the `allSongs` array for you.
+
+In the previous lecture video, you learned about the <dfn>Web Audio API</dfn> and how to use it to play songs. All modern browsers support the Web Audio API, which lets you generate and process audio in web applications.
+
+Create a variable named `audio` and set it equal to `new Audio()`. This will create a new HTML5 `audio` element.
+
+# --hints--
+
+You should have a variable named `audio`.
+
+```js
+assert.isDefined(audio);
+```
+
+You should assign a new instance of the `Audio` object to the variable named `audio`.
+
+```js
+assert.instanceOf(audio, Audio)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
new file mode 100644
index 0000000000..c2fa6984fa
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472ab9f570797dbb01568a.md
@@ -0,0 +1,656 @@
+---
+id: 67472ab9f570797dbb01568a
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Your music player should keep track of the songs, the current song playing, and the time of the current song. To do this, you will need to create an object to store this information.
+
+Start by declaring a new variable called `userData` and assign it an empty object.
+
+# --hints--
+
+You should have a variable named `userData`.
+
+```js
+assert.isDefined(userData);
+```
+
+You should assign an empty object to your `userData` variable.
+
+```js
+assert.deepEqual(userData, {});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
new file mode 100644
index 0000000000..11e4adee44
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67472eef7b4b7ba77b50929b.md
@@ -0,0 +1,664 @@
+---
+id: 67472eef7b4b7ba77b50929b
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+In your `userData` object, create a `songs` property and set its value to the `allSongs` array.
+
+Then, to handle the current song's information and track its playback time, create a `currentSong` and `songCurrentTime` properties. Set the values to `null` and `0`, respectively.
+
+# --hints--
+
+Your `userData` object should have a `songs` key set to the `allSongs` array.
+
+```js
+assert.propertyVal(userData, "songs", allSongs);
+```
+
+Your `userData` object should have a `currentSong` key set to `null`.
+
+```js
+assert.propertyVal(userData, "currentSong", null);
+```
+
+Your `userData` object should have a `songCurrentTime` key set to `0`.
+
+```js
+assert.propertyVal(userData, "songCurrentTime", 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+--fcc-editable-region--
+const userData = {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
new file mode 100644
index 0000000000..0cde6737d9
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67473042e8751eac62fafc82.md
@@ -0,0 +1,661 @@
+---
+id: 67473042e8751eac62fafc82
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+It's time to begin implementing the functionality for playing the displayed songs.
+
+Define a `playSong` function that takes an single parameter which will represent the unique identifier of the song you want to play.
+
+# --hints--
+
+You should have an empty function named `playSong`.
+
+```js
+assert.isFunction(playSong);
+```
+
+Your `playSong` function should take a single parameter.
+
+```js
+assert.lengthOf(playSong, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
new file mode 100644
index 0000000000..c2cb8ceec2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674735e3b28351b8b8f05807.md
@@ -0,0 +1,709 @@
+---
+id: 674735e3b28351b8b8f05807
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+The `find()` method retrieves the first element within an array that fulfills the conditions specified in the provided callback function. If no element satisfies the condition, the method returns `undefined`.
+
+In the example below, the `find()` method is used to find the first number greater than 25:
+
+```js
+const numbers = [10, 20, 30, 40, 50];
+
+// Find the first number greater than 25
+const foundNumber = numbers.find((number) => number > 25);
+console.log(foundNumber); // Output: 30
+```
+
+Within your `playSong` function, use the `find()` method on the `userData.songs` array to search for a song which has an `id` strictly equal to the `id` passed into the `playSong` function. Assign the `find` call to a variable named `song`.
+
+# --hints--
+
+Your `playSong` function should call the `find` method on `userData.songs`.
+
+```js
+let flag = false;
+const temp = userData.songs.find;
+userData.songs.find = foo => {flag = true};
+try {
+  playSong(0);
+  assert.isTrue(flag);
+} finally {
+  userData.songs.find = temp;
+}
+```
+
+Your `find` call should return a song whose `id` is strictly equal to the `id` passed into the `playSong` function.
+
+```js
+const testArr = [
+  {id: 0},
+  {id: 1},
+  {id: 2},
+]
+let callback;
+const testFind = id => testArr.find(callback);
+const temp = userData.songs.find;
+userData.songs.find = foo => {callback = foo};
+try {
+  playSong(0);
+  assert.deepEqual(testFind(0), {id: 0});
+  playSong(1);
+  assert.deepEqual(testFind(1), {id: 1});
+  playSong(2);
+  assert.deepEqual(testFind(2), {id: 2});
+  playSong(3);
+  assert.isUndefined(testFind(3));
+  playSong("0");
+  assert.isUndefined(testFind("0"));
+} finally {
+  userData.songs.find = temp;
+}
+```
+
+You should assign your `find` call to a variable named `song`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(const|let)\s+song\s*=\s*userData\s*\.\s*songs\s*\.\s*find\s*\(.+\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
new file mode 100644
index 0000000000..cd1ecd5530
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674757668684f9deaa6ac3c0.md
@@ -0,0 +1,676 @@
+---
+id: 674757668684f9deaa6ac3c0
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Still inside the `playSong` function, set the `audio.src` property equal to `song.src`. This tells the audio element where to find the audio data for the selected song.
+
+Also, set the `audio.title` property equal to `song.title`. This tells the audio element what to display as the title of the song.
+
+# --hints--
+
+You should set the `audio.src` property equal to `song.src` inside your `playSong` function.
+
+```js
+const temp = audio;
+try {
+  playSong(2);
+  assert.equal(audio.src, "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3");
+} finally {
+  audio = temp;
+}
+```
+
+You should set the `audio.title` property equal to `song.title` inside your `playSong` function.
+
+```js
+const temp = audio;
+try {
+  playSong(2);
+  assert.equal(audio.title, "Still Learning");
+} finally {
+  audio = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
new file mode 100644
index 0000000000..1a6d3945d3
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674836ba82e9057dfee1849c.md
@@ -0,0 +1,690 @@
+---
+id: 674836ba82e9057dfee1849c
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Next, use the `classList` property and the `add()` method to add the `playing` class to the `playButton` element. This will look for the class `playing` in the CSS file and add it to the `playButton` element.
+
+Then, set `userData.currentSong` to `song`, and to finally play the song, use the `play()` method on the `audio` variable. `play()` is a method from the web audio API for playing an mp3 file.
+
+# --hints--
+
+You should add the `playing` class to the `playButton` element within your `playSong` function.
+
+```js
+playButton.classList.remove("playing");
+playSong(0);
+assert.isTrue(playButton.classList.contains("playing"));
+```
+
+You should set `userData.currentSong` to `song` within your `playSong` function.
+
+```js
+userData.currentSong = null;
+playSong(0);
+assert.deepEqual(userData.currentSong, {id: 0, title: "Scratching The Surface", artist: "Quincy Larson", duration: "4:25", src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3"});
+```
+
+You should call the `play()` method on the `audio` variable within your `playSong` function.
+
+```js
+let flag = false;
+const temp = audio.play;
+audio.play = () => {flag = true};
+try {
+  playSong(0);
+  assert.isTrue(flag);
+} finally {
+  audio.play = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+--fcc-editable-region--
+
+--fcc-editable-region--  
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
new file mode 100644
index 0000000000..b473bbbd8c
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674850b437668dd08edddbe2.md
@@ -0,0 +1,687 @@
+---
+id: 674850b437668dd08edddbe2
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+In previous steps you built out the functionality for playing a song. Now you need to add the functionality to the play button.
+
+Use the `addEventListener()` method on `playButton` and pass in a `"click"` event for the first argument. For now, use a callback that calls `playSong(0)` as the second argument.
+
+Then, test it by clicking the play button.
+
+
+# --hints--
+
+You should add an event listener for the `click` event to the `playButton` and pass a callback function that calls `playSong(0)` as the second argument to the `addEventListener` method.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
new file mode 100644
index 0000000000..4c491a7de2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748567229cc8fe3f706de02.md
@@ -0,0 +1,698 @@
+---
+id: 6748567229cc8fe3f706de02
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Now you need to work on pausing the currently playing song.
+
+Define a `pauseSong` function that takes no parameters. Within your new function, to store the current time of the song when it is paused, set the `songCurrentTime` of the `userData` object to the `currentTime` of the `audio` variable.
+
+
+# --hints--
+
+You should have a `pauseSong` function.
+
+```js
+assert.isFunction(pauseSong);
+```
+
+Yor `pauseSong` function should set the `songCurrentTime` of the `userData` object to the `currentTime` of the `audio` variable.
+
+```js
+userData.songCurrentTime = 0;
+audio.currentTime = 10;
+pauseSong()
+assert.equal(userData.songCurrentTime, 10);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
new file mode 100644
index 0000000000..365b3f5e13
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6748bab9827a356c39559214.md
@@ -0,0 +1,707 @@
+---
+id: 6748bab9827a356c39559214
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Use `classList` and `remove()` method to remove the `playing` class from the `playButton`, since the song will be paused at this point.
+
+To finally pause the song, use the `pause()` method on the `audio` variable. `pause()` is a method of the Web Audio API for pausing music files.
+
+# --hints--
+
+Your `pauseSong` function should remove the `playing` class from the `playButton`.
+
+```js
+playButton.classList.add("playing");
+pauseSong();
+assert.isFalse(playButton.classList.contains("playing"));
+```
+
+Your `pauseSong` function should call the `pause()` method on `audio`.
+
+```js
+let flag;
+const temp = audio.pause;
+audio.pause = () => {flag = true};
+try {
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+  audio.pause = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
new file mode 100644
index 0000000000..9e2345c817
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674dda6c6ae8bb538678e125.md
@@ -0,0 +1,671 @@
+---
+id: 674dda6c6ae8bb538678e125
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Before playing the song, you need to make sure it starts from the beginning. This can be achieved by the use of the `currentTime` property on the `audio` object.
+
+Add an `if` statement to check if no current song is playing by verifying that `userData.currentSong` is falsy. Inside `if` block, set the `currentTime` property of the `audio` object to `0`.
+
+# --hints--
+
+Your `playSong` function should set the `currentTime` property of the `audio` object to `0` when no current song is playing.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+audio.currentTime = 10;
+userData.currentSong = null;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 0);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
new file mode 100644
index 0000000000..dc4ea3f5a2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674de4ee2039496c30a31b71.md
@@ -0,0 +1,693 @@
+---
+id: 674de4ee2039496c30a31b71
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused.
+
+Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData.songCurrentTime`.
+
+# --hints--
+
+Your `playSong` function should set the `currentTime` property of the `audio` object to the value stored in `userData.songCurrentTime` when there's a current song playing.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+const temp3 = userData.songCurrentTime;
+audio.currentTime = 10;
+userData.currentSong = allSongs[2];
+userData.songCurrentTime = 15;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 15);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+  userData.songCurrentTime = temp3;
+}
+```
+
+You should not modify the existing `if` statement and its content.
+
+```js
+const temp1 = audio.currentTime;
+const temp2 = userData.currentSong;
+audio.currentTime = 10;
+userData.currentSong = null;
+try {
+  playSong(0);
+  assert.strictEqual(audio.currentTime, 0);
+} finally {
+  audio.currentTime = temp1;
+  userData.currentSong =  temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } 
+
+--fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
new file mode 100644
index 0000000000..a0e5c54bd9
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e2e4e04eb381ccfe92e15.md
@@ -0,0 +1,708 @@
+---
+id: 674e2e4e04eb381ccfe92e15
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Now it is time to test out the pause button.
+
+Add a `"click"` event listener to the `pauseButton` element, then pass in `pauseSong` as the second argument of the event listener. This is the function the event listener will run.
+
+Test out your app by first clicking on the play button followed by the pause button. You should see that everything is working as expected.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `pauseButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `pauseSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /pauseButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*pauseSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
new file mode 100644
index 0000000000..5512907279
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e305b7bda7c1f4f37a930.md
@@ -0,0 +1,719 @@
+---
+id: 674e305b7bda7c1f4f37a930
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Before you start working on playing the next and previous song, you need to get the index of each song in the `songs` property of `userData`. To do that you can use the `indexOf()` array method, which returns the first index at which a given element can be found in the array, or `-1` if the element is not present.
+
+```js
+const animals = ["dog", "cat", "horse"];
+animals.indexOf("cat") // 1
+```
+
+Create a function named `getCurrentSongIndex` that returns the index at which `userData.currentSong` can be found in `userData.songs` and `-1` when the current song is `null`.
+
+# --hints--
+
+You should have a function named `getCurrentSongIndex`.
+
+```js
+assert.isFunction(getCurrentSongIndex);
+```
+
+Your `getCurrentSongIndex` function should return the index at which `userData.currentSong` can be found in `userData.songs`.
+
+```js
+userData.currentSong = allSongs[2]
+assert.strictEqual(getCurrentSongIndex(), 2);
+
+userData.currentSong = allSongs[4]
+assert.strictEqual(getCurrentSongIndex(), 4);
+```
+
+Your `getCurrentSongIndex` function should return `-1` when `userData.currentSong` is `null`.
+
+```js
+userData.currentSong = null
+assert.strictEqual(getCurrentSongIndex(), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
new file mode 100644
index 0000000000..f505ac3ea7
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e316e3892d32108ad2bb9.md
@@ -0,0 +1,692 @@
+---
+id: 674e316e3892d32108ad2bb9
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Anytime you click the play button, the first song of your playlist will always play. To fix this, within the arrow function of the event listener, replace `playSong(0)` with an `if` statement that checks if `userData.currentSong` is `null`.
+
+Inside the `if` block, call the `playSong` function with the `id` of the first song in the `userData.songs` array.
+
+# --hints--
+
+You should modify the callback of the event listener to call the `playSong` function with the `id` of the first song in the `userData.songs` array when `userData.currentSong` is `null`.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = allSongs[3];
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+
+  userData.currentSong = null;
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+playButton.addEventListener("click", () => {
+  playSong(0);
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
new file mode 100644
index 0000000000..f2d054e966
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674e34c42ee8f1237e4623cc.md
@@ -0,0 +1,712 @@
+---
+id: 674e34c42ee8f1237e4623cc
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Add an `else` block. Inside the `else` block, call the `playSong` function with the `id` of the currently playing song as an argument.
+
+This ensures that the currently playing song will continue to play when the play button is clicked.
+
+# --hints--
+
+When the `playButton` is clicked and `userData.currentSong` is not `null`, you should call the `playSong` function with the `id` of the currently playing song.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = allSongs[3];
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [3]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+You should still call the `playSong` function with the `id` of the first song in your playlist when the `playButton` is clicked and `userData.currentSong` is `null`,
+
+```js
+let flag;
+const testArr = [];
+const temp1 = playSong;
+const temp2 = userData.currentSong;
+userData.currentSong = null;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playButton.click();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp1;
+  userData.currentSong = temp2;
+}
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+--fcc-editable-region--
+playButton.addEventListener("click", () => {
+    if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  }
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
new file mode 100644
index 0000000000..ca606f0d40
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f489bf617af2bea9b92b5.md
@@ -0,0 +1,729 @@
+---
+id: 674f489bf617af2bea9b92b5
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Now, create a function named `getNextSong`. Make it return the song that can be found at `getCurrentSongIndex()` plus one in `userData.songs`, or `undefined` if the current song is the last one in the playlist.
+
+# --hints--
+
+You should have a function named `getNextSong`.
+
+```js
+assert.isFunction(getNextSong);
+```
+
+Your `getNextSong` function should call `getCurrentSongIndex`.
+
+```js
+let flag;
+const temp = getCurrentSongIndex;
+getCurrentSongIndex = () => {flag = true};
+try {
+  getNextSong();
+  assert.isTrue(flag);
+} finally {
+  getCurrentSongIndex = temp;
+}
+```
+
+Your `getNextSong` function should return the song next to the current song.
+
+```js
+userData.currentSong = allSongs[2]
+assert.equal(getNextSong(), allSongs[3]);
+
+userData.currentSong = allSongs[4]
+assert.equal(getNextSong(), allSongs[5]);
+```
+
+Your `getNextSong` function should return `undefined` when the current song is the last one in the playlist.
+
+```js
+userData.currentSong = allSongs[9]
+assert.isUndefined(getNextSong());
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
new file mode 100644
index 0000000000..73a63b1ce9
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f50cce486fb404751a29c.md
@@ -0,0 +1,729 @@
+---
+id: 674f50cce486fb404751a29c
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Now that you know how to find the next song to play, create a function named `playNextSong`. Inside the `playNextSong` function, create an `if` statement to check if the `currentSong` of `userData` is strictly equal to `null`. This will check if there's no current song playing in the `userData` object.
+
+If the condition is true, call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+# --hints--
+
+You should have a function named `playNextSong`.
+
+```js
+assert.isFunction(playNextSong);
+```
+
+When the `currentSong` of `userData` is strictly equal to `null`, your `playNextSong` function should call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  userData.currentSong = allSongs[2];
+  playNextSong();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  userData.currentSong = undefined;
+  playNextSong();
+  assert.isUndefined(flag);
+  assert.isEmpty(testArr);
+  userData.currentSong = null;
+  playNextSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
new file mode 100644
index 0000000000..4ea90ee238
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/674f534fa181f64a789ffcf9.md
@@ -0,0 +1,787 @@
+---
+id: 674f534fa181f64a789ffcf9
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+If `userData.currentSong` is not `null` you need to find the next song to play. Remember that you can use `getNextSong` for that.
+
+Complete your `playNextSong` function so that can play the next song in the playlist. If the current song is the last one, set `userData.currentSong` to `null`, `userData.songCurrentTime` to zero and call the `pauseSong` function.
+
+# --hints--
+
+When the `currentSong` of `userData` is truthy and not the last song of the playlist, the `playNextSong` function should play the song next to the current song.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[3];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+  userData.currentSong = allSongs[4];
+  playNextSong();
+  assert.deepEqual(testArr, [4, 5]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should set `userData.currentSong` to `null`.
+
+```js
+const temp = userData.currentSong;
+userData.currentSong = allSongs[9];
+try {  
+  playNextSong();
+  assert.isNull(userData.currentSong);
+} finally {
+  userData.currentSong = temp;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should set `userData.songCurrentTime` to `0`.
+
+```js
+const temp = userData.songCurrentTime;
+userData.songCurrentTime = 10;
+try {
+  userData.currentSong = allSongs[9];
+  playNextSong();
+  assert.strictEqual(userData.songCurrentTime, 0);
+} finally {
+  userData.songCurrentTime = temp;
+}
+```
+
+When the `currentSong` of `userData` is the last song of the playlist, the `playNextSong` function should call the `pauseSong` function.
+
+```js
+let flag;
+const temp = pauseSong;
+pauseSong = () => {flag = true};
+try {
+  userData.currentSong = allSongs[9];
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+  pauseSong = temp;
+}
+```
+
+When the `currentSong` of `userData` is equal to `null`, your `playNextSong` function should still call the `playSong` function with the `id` of the first song in the `userData.songs` array as an argument.
+
+```js
+let flag;
+const testArr = [];
+const temp = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  userData.currentSong = null;
+  playNextSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0]);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  }
+
+}
+--fcc-editable-region--
+
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
new file mode 100644
index 0000000000..ab71844ed4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67503cecd563135d4f27b38e.md
@@ -0,0 +1,729 @@
+---
+id: 67503cecd563135d4f27b38e
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Now it is time to test out the `playNextSong` function.
+
+Add a `"click"` event listener to the `nextButton` element, then pass in `playNextSong` as the second argument of your event listener. This is the function the event listener will run.
+
+Test out your app by first clicking on the play button followed by the next button. You should see that everything is working as expected.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `nextButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `playNextSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /nextButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*playNextSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
new file mode 100644
index 0000000000..c5a4503eb2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675057ce9acd418619127da4.md
@@ -0,0 +1,746 @@
+---
+id: 675057ce9acd418619127da4
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Now, create a function named `getPreviousSong`. Make it return the song that can be found at `getCurrentSongIndex()` minus one in `userData.songs`, or `undefined` if the current song is the first one in the playlist.
+
+# --hints--
+
+You should have a function named `getPreviousSong`.
+
+```js
+assert.isFunction(getPreviousSong);
+```
+
+Your `getPreviousSong` function should call `getCurrentSongIndex`.
+
+```js
+let flag;
+const temp = getCurrentSongIndex;
+getCurrentSongIndex = () => {flag = true};
+try {
+  getPreviousSong();
+  assert.isTrue(flag);
+} finally {
+  getCurrentSongIndex = temp;
+}
+```
+
+Your `getPreviousSong` function should return the song before the current song.
+
+```js
+userData.currentSong = allSongs[4]
+assert.equal(getPreviousSong(), allSongs[3]);
+
+userData.currentSong = allSongs[3]
+assert.equal(getPreviousSong(), allSongs[2]);
+```
+
+Your `getPreviousSong` function should return `undefined` when the current song is the first one in the playlist.
+
+```js
+userData.currentSong = allSongs[0]
+assert.isUndefined(getPreviousSong());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
new file mode 100644
index 0000000000..c787318a4e
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67505d3a32d45997d2af4c0f.md
@@ -0,0 +1,770 @@
+---
+id: 67505d3a32d45997d2af4c0f
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Create a function named `playPreviousSong`. Inside your new function, use the value returned by the `getPreviousSong` function to find the song to play. When `getPreviousSong()` is `undefined`, play the first song in your playlist. Otherwise, play the song before the current song playing.
+
+# --hints--
+
+You should have a function named `playPreviousSong`.
+
+```js
+assert.isFunction(playPreviousSong);
+```
+
+The `playPreviousSong` function should play the song before the current song playing in the playlist.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[4];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playPreviousSong();
+  assert.isTrue(flag);
+  userData.currentSong = allSongs[3];
+  flag = false;
+  playPreviousSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [3, 2]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+When `getPreviousSong()` is `undefined`, the `playPreviousSong` function should play the first song in the playlist.
+
+```js
+let flag;
+const testArr = [];
+const temp1 = userData.currentSong;
+userData.currentSong = allSongs[0];
+const temp2 = playSong;
+playSong = id => {
+  flag = true;
+  testArr.push(id);
+}
+try {
+  playPreviousSong();
+  assert.isTrue(flag);
+  userData.currentSong = null;
+  flag = false;
+  playPreviousSong();
+  assert.isTrue(flag);
+  assert.deepEqual(testArr, [0, 0]);
+} finally {
+  userData.currentSong = temp1;
+  playSong = temp2;
+}
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
new file mode 100644
index 0000000000..d6c824ef5f
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675069b67b8267b36fa550b3.md
@@ -0,0 +1,738 @@
+---
+id: 675069b67b8267b36fa550b3
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Add a `"click"` event listener to the `previousButton` element, then pass in `playPreviousSong` as the second argument.
+
+# --hints--
+
+You should call the `addEventListener()` method on your `previousButton` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(/)
+```
+
+Your event listener should listen for a `"click"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(\s*('|"|`)click\1/)
+```
+
+You should pass in `playPreviousSong` as the second argument of your `addEventListener` method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /previousButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*playPreviousSong\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
new file mode 100644
index 0000000000..a7da8200c2
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6750712ee950facad5edc203.md
@@ -0,0 +1,727 @@
+---
+id: 6750712ee950facad5edc203
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+If you play a bit with your player you'll notice a few bugs. First, when you play a song, pause it and then press either the previous button or next button, the song won't start from the beginning.
+
+To start fixing that, add second parameter named `start` to your `playSong` function. Give it the default value of `true`.
+
+# --hints--
+
+Your `playSong` function should have a second parameter named `start` with the default value of `true`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /const\s+playSong\s*=\s*\(\s*id\s*,\s*start\s*\=\s*true\s*\)\s*=>\s*\{/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+--fcc-editable-region--
+const playSong = id => {
+--fcc-editable-region--
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
new file mode 100644
index 0000000000..ab14226258
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516a431252ed30832fa7c6.md
@@ -0,0 +1,727 @@
+---
+id: 67516a431252ed30832fa7c6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Now, use the **OR** operator to add the `start` parameter as a second condition to the `if` statement after `userData.currentSong === null`.
+
+
+# --hints--
+
+You should use the **OR** operator to add the `start` parameter as a second condition to the `if` statement after `userData.currentSong === null`.
+
+```js
+assert.match(__helpers.removeJSComments(code), /if\s+\(\s*userData\s*\.\s*currentSong\s*===\s*null\s+\|\|\s+start(\s*\=\s*true\s*)?\)\s*\{/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+--fcc-editable-region--
+  if (userData.currentSong === null) {
+--fcc-editable-region--
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
new file mode 100644
index 0000000000..11d12b14ce
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516ca9b7fe6636208c5ab5.md
@@ -0,0 +1,726 @@
+---
+id: 67516ca9b7fe6636208c5ab5
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, pass `false` as the second argument to the `playSong(userData.currentSong.id)` function call. Then, test that everything works as expected by playing a song, pausing it and then pressing either the previous button or the next button.
+
+# --hints--
+
+You should pass `false` as the second argument to the `playSong(userData.currentSong.id)` function call.
+
+```js
+assert.match(__helpers.removeJSComments(code), /playSong\s*\(\s*userData\s*\.\s*currentSong\s*\.\s*id\s*,\s*false\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+--fcc-editable-region--
+    playSong(userData.currentSong.id);
+--fcc-editable-region--
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
new file mode 100644
index 0000000000..701d0ca5c9
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67516e888477083c31614dc7.md
@@ -0,0 +1,743 @@
+---
+id: 67516e888477083c31614dc7
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+If you check closely, you'd see the currently playing song is not highlighted in the playlist, so you don't really know which song is playing. You can fix this by creating a function to highlight any song that is being played.
+
+Create a function named `highlightCurrentSong`. Inside the function, check that a `.playlist-song` element with `aria-current="true"` exists. If so, use the `removeAttribute` method to remove the `aria-current` attribute from it.
+
+# --hints--
+
+You should have a function named `highlightCurrentSong`.
+
+```js
+assert.isFunction(highlightCurrentSong)
+```
+
+Your `highlightCurrentSong` function should use the `removeAttribute` method to remove the `aria-current` attribute from the `.playlist-song` element with `aria-current="true"` if that element exists.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+assert.doesNotThrow(highlightCurrentSong);
+songs[3].setAttribute("aria-current", "true");
+highlightCurrentSong();
+songs.forEach(song => {assert.isNull(song.getAttribute("aria-current"))});
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
new file mode 100644
index 0000000000..30824527a3
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67517ef2fae05b65108212db.md
@@ -0,0 +1,754 @@
+---
+id: 67517ef2fae05b65108212db
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+You need to get the `id` of the currently playing song. For this, you can use `userData.currentSong?.id`.
+
+Use `getElementById()` to select the currently playing song: pass a template literal to prefix the `id` with `song-`. Assign it to a variable named `songToHighlight`.
+
+# --hints--
+
+You should not modify the existing `highlightCurrentSong` function and its content.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+assert.doesNotThrow(highlightCurrentSong);
+songs[3].setAttribute("aria-current", "true");
+highlightCurrentSong();
+songs.forEach(song => {assert.isNull(song.getAttribute("aria-current"))});
+```
+
+You should use `document.getElementById()` and pass in `` `song-${userData.currentSong?.id}` ``.
+
+```js
+assert.match(__helpers.removeJSComments(code), /document\.getElementById\(\s*`song-\$\{userData\.currentSong\?\.id\}`\s*\)\s*;?\s*\}\s*;?/)
+```
+
+You should assign your `getElementById()` to a `songToHighlight` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /(const|let)\s+songToHighlight\s*=\s*document\.getElementById\(\s*`song-\$\{userData\.currentSong\?\.id\}`\s*\)\s*;?\s*\}\s*;?/)
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+--fcc-editable-region--
+
+--fcc-editable-region--  
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
new file mode 100644
index 0000000000..64a2fda8d9
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751d5d32e58d065652e26a5.md
@@ -0,0 +1,747 @@
+---
+id: 6751d5d32e58d065652e26a5
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now, you need to add the `aria-current` attribute to the currently playing song.
+
+Check if `songToHighlight` exists. If so, use the `setAttribute` method on `songToHighlight` and pass in `"aria-current"` and `"true"` as the first and second arguments.
+
+# --hints--
+
+`highlightCurrentSong` should add the `aria-current` attribute to the currently playing song and remove the attribute from the previously played song.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+userData.currentSong = null;
+assert.doesNotThrow(highlightCurrentSong);
+userData.currentSong = allSongs[9];
+highlightCurrentSong();
+for (let i = 0; i < 9; i++) {
+  assert.isNull(Array.from(songs)[i].getAttribute("aria-current"));
+}
+assert.strictEqual(songs[9].getAttribute("aria-current"), "true");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+--fcc-editable-region--
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+--fcc-editable-region--
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
new file mode 100644
index 0000000000..72d1b2f02f
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6751e1c117350b7d3f356e1b.md
@@ -0,0 +1,749 @@
+---
+id: 6751e1c117350b7d3f356e1b
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Inside the `playSong` function, call the `highlightCurrentSong` function.
+
+After that, play around with the control buttons to see how the `highlightCurrentSong` function works.
+
+# --hints--
+
+You should call `highlightCurrentSong` inside the `playSong` function.
+
+```js
+const songs = document.querySelectorAll(".playlist-song");
+songs.forEach(song => {song.removeAttribute("aria-current")});
+userData.currentSong = allSongs[9];
+playSong(9);
+pauseSong();
+for (let i = 0; i < 9; i++) {
+  assert.isNull(Array.from(songs)[i].getAttribute("aria-current"));
+}
+assert.strictEqual(songs[9].getAttribute("aria-current"), "true");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+--fcc-editable-region--
+
+--fcc-editable-region--
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
new file mode 100644
index 0000000000..b5f61b7194
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752c62efa90554c01415e7b.md
@@ -0,0 +1,768 @@
+---
+id: 6752c62efa90554c01415e7b
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Create a function named `setPlayerDisplay`. Inside the function, set the `textContent` of `playingSong` to the current song's title, if defined. Otherwise, set it to an empty string.
+
+Below that, set the `textContent` of `songArtist` to the current song's artist, if defined. Otherwise, set it to empty string.
+
+
+# --hints--
+
+You should have a function named `setPlayerDisplay`.
+
+```js
+assert.isFunction(setPlayerDisplay);
+```
+
+Your `setPlayerDisplay` function should set the `textContent` of `playingSong` to the current song's title, if defined, or to an empty string.
+
+```js
+userData.currentSong = null;
+setPlayerDisplay();
+assert.isEmpty(document.querySelector("#player-song-title").textContent);
+userData.currentSong = allSongs[3];
+setPlayerDisplay();
+assert.equal(document.querySelector("#player-song-title").textContent, "Cruising for a Musing");
+```
+
+Your `setPlayerDisplay` function should set the `textContent` of `songArtist` to the current song's artist, if defined, or to an empty string.
+
+```js
+userData.currentSong = null;
+setPlayerDisplay();
+assert.isEmpty(document.querySelector("#player-song-artist").textContent);
+userData.currentSong = allSongs[3];
+setPlayerDisplay();
+assert.equal(document.querySelector("#player-song-artist").textContent, "Quincy Larson");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
new file mode 100644
index 0000000000..05a1c97013
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752ecd811c96d5dc33ae853.md
@@ -0,0 +1,760 @@
+---
+id: 6752ecd811c96d5dc33ae853
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+To ensure the player's display updates whenever a new song begins playing, call the `setPlayerDisplay()` function within the `playSong()` function.
+
+Now you should see the song title and the artist show up in the display.
+
+# --hints--
+
+You should call `setPlayerDisplay` within your `playSong` function.
+
+```js
+let flag;
+const temp = setPlayerDisplay;
+setPlayerDisplay = () => {flag = true}
+try {
+  playSong(3);
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayerDisplay = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+--fcc-editable-region--
+
+--fcc-editable-region--
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
new file mode 100644
index 0000000000..3feaeff1a8
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6752edba757ff96404faf9e9.md
@@ -0,0 +1,769 @@
+---
+id: 6752edba757ff96404faf9e9
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+To make the application more accessible, it is important that the play button describes the current song or the first song in the playlist.
+
+Create a function named `setPlayButtonAccessibleText`. Inside the function, set the `aria-label` attribute of the play button to `Play` followed by a space and the current song's title. If `userData.currentSong` is `null`, set it to `Play`.
+
+# --hints--
+
+You should have a function named `setPlayButtonAccessibleText`.
+
+```js
+assert.isFunction(setPlayButtonAccessibleText);
+```
+
+Your `setPlayButtonAccessibleText` function should set the `aria-label` attribute of the play button to `Play` followed by a space and the current song's title.
+
+```js
+userData.currentSong = allSongs[3];
+setPlayButtonAccessibleText();
+assert.equal(playButton.getAttribute("aria-label"), "Play Cruising for a Musing");
+```
+
+ When `userData.currentSong` is `null`, `setPlayButtonAccessibleText` should set the `aria-label` attribute of the play button to `Play` followed by a space and title of the first song in your playlist.
+
+ ```js
+userData.currentSong = null;
+setPlayButtonAccessibleText();
+assert.equal(playButton.getAttribute("aria-label"), "Play");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
new file mode 100644
index 0000000000..3605b56ff4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675304e7937e62902e08a3ab.md
@@ -0,0 +1,764 @@
+---
+id: 675304e7937e62902e08a3ab
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Now, call the `setPlayButtonAccessibleText` function inside the `playSong` function.
+
+# --hints--
+
+You should call the `setPlayButtonAccessibleText` function inside the `playSong` function.
+
+```js
+let flag;
+const temp = setPlayButtonAccessibleText;
+setPlayButtonAccessibleText = () => {flag = true}
+try {
+  playSong(3);
+  pauseSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayButtonAccessibleText = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+--fcc-editable-region--
+
+--fcc-editable-region--
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
new file mode 100644
index 0000000000..323329e819
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675309b2795c2a9ae03b8812.md
@@ -0,0 +1,1442 @@
+---
+id: 675309b2795c2a9ae03b8812
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Notice that the album art in the HTML and songs in the `userData.songs` array have changed. We've swapped out the original songs for shorter ones that you can use to test your app.
+
+All the core functionalities are now in place. The only issue now is that the next song does not automatically play when the currently playing song ends.
+
+To fix that, you can set up an event listener which will detect when the currently playing song ends. The `"ended"` event listener is appropriate for this. It is fired when the playback of a media reaches the end.
+
+Add an event listener to the `audio` element which listens for the `"ended"` event and pass in a a reference to the `playNextSong` function. With that the music player project is complete!
+
+# --hints--
+
+You should chain the `addEventListener()` method to your `audio` variable.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(/)
+```
+
+The event listener you used on on your `audio` variable should listen for an `"ended"` event.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(\s*('|")ended\1/)
+```
+
+You should pass in a reference to `playNextSong` to your `"ended"` event listener.
+
+```js
+assert.match(__helpers.removeJSComments(code), /audio\.addEventListener\(\s*('|")ended\1\s*,\s*playNextSong\s*\)\s*;?/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/digital-drift.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Hello World</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:23</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">In the Zone</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:11</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Camper Cat</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:21</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Electronic</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:15</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Sailing Away</span>
+            <span class="playlist-song-artist">Rafael</span>
+            <span class="playlist-song-duration">0:22</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Hello World",
+    artist: "Rafael",
+    duration: "0:23",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/hello-world.mp3",
+  },
+  {
+    id: 1,
+    title: "In the Zone",
+    artist: "Rafael",
+    duration: "0:11",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/in-the-zone.mp3",
+  },
+  {
+    id: 2,
+    title: "Camper Cat",
+    artist: "Rafael",
+    duration: "0:21",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/camper-cat.mp3",
+  },
+  {
+    id: 3,
+    title: "Electronic",
+    artist: "Rafael",
+    duration: "0:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/electronic.mp3",
+  },
+  {
+    id: 4,
+    title: "Sailing Away",
+    artist: "Rafael",
+    duration: "0:22",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    setPlayerDisplay();
+    highlightCurrentSong();
+    setPlayButtonAccessibleText();
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  } 
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  }
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    setPlayerDisplay();
+    highlightCurrentSong();
+    setPlayButtonAccessibleText();
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+
+audio.addEventListener("ended", playNextSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
new file mode 100644
index 0000000000..9632fefd63
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67532282ab9b95d7083617ee.md
@@ -0,0 +1,795 @@
+---
+id: 67532282ab9b95d7083617ee
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Inside the `playNextSong` function, call the `setPlayerDisplay`, `highlightCurrentSong`, and `setPlayButtonAccessibleText` functions to correctly update the player when the playlist ends.
+
+# --hints--
+
+You should call `setPlayerDisplay` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = setPlayerDisplay;
+setPlayerDisplay = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayerDisplay = temp;
+}
+```
+
+You should call `highlightCurrentSong` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = highlightCurrentSong;
+highlightCurrentSong = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ highlightCurrentSong = temp;
+}
+```
+
+You should call `setPlayButtonAccessibleText` within the `else` statement of your `playNextSong` function.
+
+```js
+let flag;
+userData.currentSong = allSongs[9];
+const temp = setPlayButtonAccessibleText;
+setPlayButtonAccessibleText = () => {flag = true}
+try {
+  playNextSong();
+  assert.isTrue(flag);
+} finally {
+ setPlayButtonAccessibleText = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const playingSong = document.getElementById("player-song-title");
+const songArtist = document.getElementById("player-song-artist");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  setPlayerDisplay();
+  highlightCurrentSong();
+  setPlayButtonAccessibleText();
+  audio.play();
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+--fcc-editable-region--
+
+--fcc-editable-region--
+    pauseSong();
+  }
+}
+
+const setPlayerDisplay = () => {
+  const currentTitle = userData.currentSong?.title;
+  const currentArtist = userData.currentSong?.artist;
+
+  playingSong.textContent = currentTitle ? currentTitle : "";
+  songArtist.textContent = currentArtist ? currentArtist : "";
+};
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+const setPlayButtonAccessibleText = () => {
+  const song = userData.currentSong;
+  playButton.setAttribute("aria-label", userData.currentSong ? `Play ${song.title}` : "Play");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
new file mode 100644
index 0000000000..e9772447ea
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/675340b809683f45cae96539.md
@@ -0,0 +1,736 @@
+---
+id: 675340b809683f45cae96539
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+If you press the previous button when no song is playing, the first song will play. To fix this, add an `if` statement at the beginning of the `playPreviousSong` function. Check if the current song is `null` and stop the function execution with a `return` statement.
+
+# --hints--
+
+You should add an `if` statement that checks if `userData.currentSong === null` and stops the function execution with a `return` statement inside your `playPreviousSong` function.
+
+```js
+let flag;
+userData.currentSong = null;
+const temp = playSong;
+playSong = id => {flag = true};
+try {
+  playPreviousSong();
+  assert.isUndefined(flag);
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
new file mode 100644
index 0000000000..e0ac27e084
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6757f2b25418da4f73e29eb6.md
@@ -0,0 +1,760 @@
+---
+id: 6757f2b25418da4f73e29eb6
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Next, you need to display the current song title and artist in the player display.
+
+As a first step, access the `#player-song-title` and `#player-song-artist` elements, responsible for displaying the song title and artist, and store them into the variables `playingSong` and `songArtist`, respectively.
+
+# --hints--
+
+You should have a variable named `playingSong`.
+
+```js
+assert.isDefined(playingSong);
+```
+
+Your `playingSong` variable should have the value of the `#player-song-title` element.
+
+```js
+assert.equal(playingSong, document.getElementById("player-song-title"));
+```
+
+You should have a variable named `songArtist`.
+
+```js
+assert.isDefined(songArtist);
+```
+
+
+Your `songArtist` variable should have the value of the `#player-song-artist` element.
+
+```js
+assert.equal(songArtist, document.getElementById("player-song-artist"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+--fcc-editable-region--
+
+--fcc-editable-region--
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = (id, start=true) => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null || start) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing");
+  highlightCurrentSong();
+  audio.play()
+}
+
+const pauseSong = () => {
+  userData.songCurrentTime = audio.currentTime;
+  playButton.classList.remove("playing");
+  audio.pause();
+}
+
+const getCurrentSongIndex = () => userData.songs.indexOf(userData.currentSong);
+
+const getNextSong = () => userData.songs[getCurrentSongIndex() + 1];
+
+const getPreviousSong = () => userData.songs[getCurrentSongIndex() - 1];
+
+const playPreviousSong = () => {
+  if (userData.currentSong === null) return;
+  const previousSong = getPreviousSong();
+  if (previousSong) {
+    playSong(previousSong.id);
+  } else {
+    playSong(userData.songs[0].id);
+  }
+};
+
+const playNextSong = () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+    return
+  }
+  const nextSong = getNextSong();
+  if (nextSong) {
+    playSong(nextSong.id);
+  } else {
+    userData.currentSong = null;
+    userData.songCurrentTime = 0;
+    pauseSong();
+  }
+}
+
+const highlightCurrentSong = () => {
+  const previousCurrentSong = document.querySelector('.playlist-song[aria-current="true"]');
+  previousCurrentSong?.removeAttribute("aria-current");
+  const songToHighlight = document.getElementById(
+    `song-${userData.currentSong?.id}`
+  );
+
+  songToHighlight?.setAttribute("aria-current", "true");
+};
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id, false);
+  }
+});
+
+const songs = document.querySelectorAll(".playlist-song");
+
+songs.forEach((song) => {
+  const id = song.getAttribute("id").slice(5);
+  const songBtn = song.querySelector("button");
+  songBtn.addEventListener("click", () => {
+      playSong(Number(id));
+  })
+})
+
+pauseButton.addEventListener("click", pauseSong);
+
+nextButton.addEventListener("click", playNextSong);
+
+previousButton.addEventListener("click", playPreviousSong);
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
new file mode 100644
index 0000000000..a01f4515e4
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/6758a61fc7e949923716ec41.md
@@ -0,0 +1,690 @@
+---
+id: 6758a61fc7e949923716ec41
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Now, use the `querySelectorAll` method to target the `.playlist-song` elements and store them in a variable named `songs`.
+
+Then, call the `forEach` method on `songs`. Pass in a callback function that uses `song` as the parameter to the method. Leave the curly braces empty for now.
+
+# --hints--
+
+You should have a variable named `songs`.
+
+```js
+assert.isDefined(songs);
+```
+
+You should assign the collection of all `.playlist-song` elements to your `songs` variable.
+
+```js
+assert.deepEqual(songs, document.querySelectorAll(".playlist-song"));
+```
+
+You should call the `forEach` method on `songs` and pass in a callback that uses `song` as the parameter to the method.
+
+```js
+assert.match(__helpers.removeJSComments(code), /songs\s*\.\s*forEach\s*\(\s*(\(\s*song\s*\)|song)\s*=>\s*\{\s*\}\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
new file mode 100644
index 0000000000..3043f819af
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-music-player/67594f37fa0c684835f1b064.md
@@ -0,0 +1,696 @@
+---
+id: 67594f37fa0c684835f1b064
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+When you click a song of your playlist you want to play that song. For that you'll need to add an event listener for the `click` event on each `button` element which is a child of a `song` element.
+
+Complete the callback of your `forEach` to do that. Inside the `addEventListener` callback, call `playSong(n)`, where `n` is the song id that you can get from the `id` attribute of `song`.
+
+Note that each `song` has an `id` attribute of `song-n`: you'll need to get the `n` part and convert it into a number before passing it to `playSong()`.
+
+
+# --hints--
+
+You should add an event listener for the `click` event on each `button` element which is a child of a `.playlist-song` element and call `playSong` with the `id` of the corresponding song.
+
+```js
+const testArr = [];
+const temp = playSong;
+playSong = id => {testArr.push(id)};
+const buttons = document.querySelectorAll(".playlist-song-info");
+try {
+  buttons.forEach((btn, i) => {
+    btn.dispatchEvent(new Event("click"));
+    assert.strictEqual(testArr[i], i);
+  })
+} finally {
+  playSong = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>
+    Build a Music Player App
+  </title>
+</head>
+
+<body>
+  <div class="container">
+    <div class="player">
+      <div class="player-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h1 class="fcc-title">freeCodeCamp</h1>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <div class="player-content">
+        <div id="player-album-art">
+          <img src="https://cdn.freecodecamp.org/curriculum/js-music-player/quincy-larson-album-art.jpg"
+            alt="song cover art" />
+        </div>
+        <div class="player-display">
+          <div class="player-display-song-artist">
+            <p id="player-song-title"></p>
+            <p id="player-song-artist"></p>
+          </div>
+          <div class="player-buttons">
+            <button id="previous" class="previous" aria-label="Previous">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M23.2248 0L7.03964 9.5L23.2248 19L23.2248 0Z" />
+                <rect width="4.63633" height="18.5453" transform="matrix(-1 0 0 1 4.63633 0)" />
+              </svg>
+            </button>
+            <button id="play" class="play" aria-label="Play">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+              </svg>
+            </button>
+            <button id="pause" class="pause" aria-label="Pause">
+              <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 6.54013e-07H4.75V19H0V6.54013e-07Z" />
+                <path d="M11.4 0H16.15V19H11.4V0Z" />
+              </svg>
+            </button>
+            <button id="next" class="next" aria-label="Next">
+              <svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0L16.1852 9.5L1.88952e-07 19L0 0Z" />
+                <rect x="18.5885" width="4.63633" height="18.5453" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="playlist">
+      <div class="playlist-bar">
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+        <h2 class="playlist-title" id="playlist">Playlist</h2>
+        <div class="parallel-lines">
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+      <ul id="playlist-songs">
+        <li id="song-0" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Scratching The Surface</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:25</span>
+          </button>
+        </li>
+
+        <li id="song-1" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stay Down</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">4:15</span>
+          </button>
+        </li>
+
+        <li id="song-2" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Still Learning</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:51</span>
+          </button>
+        </li>
+
+        <li id="song-3" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Cruising for a Musing</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:34</span>
+          </button>
+        </li>
+
+        <li id="song-4" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Never Not Favored</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:35</span>
+          </button>
+        </li>
+
+        <li id="song-5" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">From the Ground Up</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:12</span>
+          </button>
+        </li>
+
+        <li id="song-6" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Walking on Air</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:25</span>
+          </button>
+        </li>
+
+        <li id="song-7" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Can't Stop Me. Can't Even Slow Me Down.</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:52</span>
+          </button>
+        </li>
+
+        <li id="song-8" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">The Surest Way Out is Through</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">3:10</span>
+          </button>
+        </li>
+
+        <li id="song-9" class="playlist-song">
+          <button class="playlist-song-info" >
+            <span class="playlist-song-title">Chasing That Feeling</span>
+            <span class="playlist-song-artist">Quincy Larson</span>
+            <span class="playlist-song-duration">2:43</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
+```
+
+```css
+:root {
+    /* colors */
+    --primary-color: #dfdfe2;
+    --secondary-color: #ffffff;
+    --app-background-color: #4d4d62;
+    --background-color: #1b1b32;
+    --foreground-color: #3b3b4f;
+    --highlight-color: #f1be32;
+
+    /* font sizes */
+    --root-font-size: 16px;
+    font-size: var(--root-font-size);
+
+    /* font-families */
+    --font-headline: "Roboto Mono", monospace;
+    --font-family: "Lato", sans-serif;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--app-background-color);
+    color: var(--primary-color);
+    font-family: var(--font-family);
+  }
+
+  h1 {
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  h2 {
+    font-size: var(--root-font-size);
+  }
+
+  ul {
+    margin: 0;
+  }
+
+  .container {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    row-gap: 5px;
+  }
+
+  .player,
+  .playlist {
+    width: 450px;
+    background-color: var(--background-color);
+    border: 3px solid var(--foreground-color);
+  }
+
+  .player {
+    height: 260px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  .player-bar,
+  .playlist-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    width: 100%;
+    height: 30px;
+    background-color: var(--foreground-color);
+  }
+
+  .parallel-lines {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 6px;
+    padding: 0 5px;
+  }
+
+  .parallel-lines > div {
+    height: 2px;
+    width: 100%;
+    min-width: 75px;
+    background-color: var(--highlight-color);
+  }
+
+  .fcc-title,
+  .playlist-title {
+    color: var(--secondary-color);
+    margin: 0 10px;
+    font-family: var(--font-headline);
+  }
+
+  .player-content {
+    display: flex;
+    background-color: var(--foreground-color);
+    width: 430px;
+    height: 200px;
+    column-gap: 13px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #player-album-art {
+    background-color: var(--secondary-color);
+    border: 6px solid var(--background-color);
+  }
+
+  #player-album-art img {
+    width: 150px;
+    display: block;
+  }
+
+  .player-display {
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    padding: 14px;
+    background-color: var(--background-color);
+    height: 153px;
+    width: 226px;
+  }
+
+  .player-display-song-artist {
+    height: 80px;
+  }
+
+  .player-buttons svg {
+    fill: var(--primary-color);
+  }
+
+  .playing > svg {
+    fill: var(--highlight-color);
+  }
+
+  .player-buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: var(--root-font-size);
+    outline-color: var(--highlight-color);
+    text-align: center;
+  }
+
+  .playlist-song {
+    outline-color: var(--highlight-color);
+  }
+
+  .playlist li:not(:last-child) {
+    border-bottom: 1px solid var(--background-color);
+  }
+
+  button:focus,
+  .playlist-song:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
+
+  /* Playlist */
+  .playlist {
+    height: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+  }
+
+  #playlist-songs {
+    width: 430px;
+    height: 100%;
+    background-color: var(--foreground-color);
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    padding: 8px 9px;
+    visibility: visible;
+    justify-content: start;
+    list-style: none;
+  }
+
+  .playlist-song {
+    display: flex;
+    height: 55px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  [aria-current="true"] {
+    background-color: var(--background-color);
+  }
+
+  [aria-current="true"] p {
+    color: var(--highlight-color);
+  }
+
+  .playlist-song-info {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    column-gap: 7px;
+    padding: 5px 0;
+    font-family: var(--font-family);
+  }
+
+  #player-song-title,
+  #player-song-artist {
+    margin: 0;
+  }
+
+  #player-song-artist {
+    color: var(--highlight-color);
+    font-size: 0.75rem;
+  }
+
+  #player-song-title {
+    font-size: 1.125rem;
+  }
+
+  .playlist-song-title {
+    font-size: 0.85rem;
+    width: 241px;
+    text-align: left;
+  }
+
+  .playlist-song-artist {
+    font-size: 0.725rem;
+    width: 80px;
+  }
+
+  .playlist-song-duration {
+    font-size: 0.725rem;
+    margin: auto;
+    font-family: var(--font-headline);
+    width: 30px;
+  }
+
+  .playlist-song-delete {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .playlist-song-delete,
+  .playlist-song-delete {
+    fill: var(--foreground-color);
+  }
+
+  .playlist-song-delete:hover circle,
+  .playlist-song-delete:focus circle {
+    fill: #ff0000;
+  }
+
+  @media (max-width: 700px) {
+    .player,
+    .playlist {
+      width: 300px;
+    }
+
+    .player {
+      height: 340px;
+    }
+
+    #playlist-songs {
+      height: 280px;
+      padding: 5px 6px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-color: var(--background-color) var(--secondary-color);
+      scrollbar-width: thin;
+    }
+
+    #playlist-songs::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    #playlist-songs::-webkit-scrollbar-track {
+      background: var(--background-color);
+    }
+
+    #playlist-songs::-webkit-scrollbar-thumb {
+      background: var(--secondary-color);
+    }
+
+    h1 {
+      font-size: 0.813rem;
+    }
+
+    h2 {
+      font-size: 0.75rem;
+    }
+
+    .player-bar,
+    .playlist-bar,
+    .player-content,
+    #playlist-songs {
+      width: 280px;
+    }
+
+    .playlist-song {
+      justify-content: space-between;
+    }
+
+    .playlist-song-title {
+      width: 140px;
+    }
+
+    .playlist-song-artist {
+      width: 40px;
+    }
+
+    .playlist-song-duration > button {
+      padding: 0;
+    }
+
+    .player-content {
+      display: inline;
+      position: relative;
+      justify-items: center;
+      height: 100%;
+    }
+
+    #player-album-art {
+      z-index: -100;
+      height: 280px;
+      box-shadow: none;
+      background: #000;
+    }
+
+    #player-album-art img {
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    .player-display-song-artist {
+      padding: 0 10px;
+    }
+
+    .player-display-song-artist > p {
+      white-space: pre-wrap;
+    }
+
+    .player-display {
+      position: absolute;
+      width: 100%;
+      z-index: 1000;
+      background-color: transparent;
+      top: 0;
+      height: 280px;
+      justify-content: space-between;
+      text-align: center;
+    }
+  }
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const allSongs = [
+  {
+    id: 0,
+    title: "Scratching The Surface",
+    artist: "Quincy Larson",
+    duration: "4:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3",
+  },
+  {
+    id: 1,
+    title: "Can't Stay Down",
+    artist: "Quincy Larson",
+    duration: "4:15",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3",
+  },
+  {
+    id: 2,
+    title: "Still Learning",
+    artist: "Quincy Larson",
+    duration: "3:51",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/still-learning.mp3",
+  },
+  {
+    id: 3,
+    title: "Cruising for a Musing",
+    artist: "Quincy Larson",
+    duration: "3:34",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3",
+  },
+  {
+    id: 4,
+    title: "Never Not Favored",
+    artist: "Quincy Larson",
+    duration: "3:35",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3",
+  },
+  {
+    id: 5,
+    title: "From the Ground Up",
+    artist: "Quincy Larson",
+    duration: "3:12",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/from-the-ground-up.mp3",
+  },
+  {
+    id: 6,
+    title: "Walking on Air",
+    artist: "Quincy Larson",
+    duration: "3:25",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/walking-on-air.mp3",
+  },
+  {
+    id: 7,
+    title: "Can't Stop Me. Can't Even Slow Me Down.",
+    artist: "Quincy Larson",
+    duration: "3:52",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/cant-stop-me-cant-even-slow-me-down.mp3",
+  },
+  {
+    id: 8,
+    title: "The Surest Way Out is Through",
+    artist: "Quincy Larson",
+    duration: "3:10",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/the-surest-way-out-is-through.mp3",
+  },
+  {
+    id: 9,
+    title: "Chasing That Feeling",
+    artist: "Quincy Larson",
+    duration: "2:43",
+    src: "https://cdn.freecodecamp.org/curriculum/js-music-player/chasing-that-feeling.mp3",
+  },
+];
+
+const audio = new Audio();
+
+const userData = {
+  songs: allSongs,
+  currentSong: null,
+  songCurrentTime: 0,
+}
+
+const playSong = id => {
+  const song = userData.songs.find((song) => song.id === id);
+  audio.src = song.src;
+  audio.title = song.title;
+  if (userData.currentSong === null) {
+    audio.currentTime = 0
+  } else {
+    audio.currentTime = userData.songCurrentTime;
+  }
+  userData.currentSong = song;
+  playButton.classList.add("playing")
+  audio.play()
+}
+
+playButton.addEventListener("click", () => {
+  if (userData.currentSong === null) {
+    playSong(userData.songs[0].id);
+  } else {
+    playSong(userData.currentSong.id);
+  }
+});
+
+
+const songs = document.querySelectorAll(".playlist-song");
+--fcc-editable-region--
+songs.forEach((song) => {
+
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
index d4471a3172..63a7d506ec 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673339d96c56d36e963e888e.md
@@ -1,7 +1,7 @@
 ---
 id: 673339d96c56d36e963e888e
 title: Step 1
-challengeType: 0
+challengeType: 1
 dashedName: step-1
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
index 434eb4d4ac..421376dfb1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5632fb854bc6c58dc0d.md
@@ -1,7 +1,7 @@
 ---
 id: 6733b5632fb854bc6c58dc0d
 title: Step 2
-challengeType: 0
+challengeType: 1
 dashedName: step-2
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
index e05e5e890d..202f4abcdc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6733b5e6f210c1bd1afdf8b3.md
@@ -1,7 +1,7 @@
 ---
 id: 6733b5e6f210c1bd1afdf8b3
 title: Step 3
-challengeType: 0
+challengeType: 1
 dashedName: step-3
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
index 6a4c5cdab3..9231de5784 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349ba230cff237c0f2bdf2.md
@@ -1,7 +1,7 @@
 ---
 id: 67349ba230cff237c0f2bdf2
 title: Step 4
-challengeType: 0
+challengeType: 1
 dashedName: step-4
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
index c95db6fd0a..b791a99086 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67349d6e726b2c3c7f7301e8.md
@@ -1,7 +1,7 @@
 ---
 id: 67349d6e726b2c3c7f7301e8
 title: Step 5
-challengeType: 0
+challengeType: 1
 dashedName: step-5
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
index 8374f8dbda..b5bef1024f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a13a29acdf47f2b8e161.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a13a29acdf47f2b8e161
 title: Step 6
-challengeType: 0
+challengeType: 1
 dashedName: step-6
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
index 9ae42c3995..70c34de803 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a2385c52c54d916a8b86.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a2385c52c54d916a8b86
 title: Step 7
-challengeType: 0
+challengeType: 1
 dashedName: step-7
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
index 31b5014cb3..ec4acf3588 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a606e5968a5a19b77171.md
@@ -1,13 +1,13 @@
 ---
 id: 6734a606e5968a5a19b77171
 title: Step 8
-challengeType: 0
+challengeType: 1
 dashedName: step-8
 ---
 
 # --description--
 
-Keep adding the remaing plants to your catalog as you did in the previous steps.
+Keep adding the remaining plants to your catalog as you did in the previous steps.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
index 3ca78bd85c..590a19f03e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734a772196245601e4b80e0.md
@@ -1,7 +1,7 @@
 ---
 id: 6734a772196245601e4b80e0
 title: Step 10
-challengeType: 0
+challengeType: 1
 dashedName: step-10
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
index a28eea531d..951b5ed0a9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734ab61e916486c80c490d1.md
@@ -1,7 +1,7 @@
 ---
 id: 6734ab61e916486c80c490d1
 title: Step 11
-challengeType: 0
+challengeType: 1
 dashedName: step-11
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
index a8e29611ed..3ae74029f7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734b36f1a3ce17e73327f24.md
@@ -1,7 +1,7 @@
 ---
 id: 6734b36f1a3ce17e73327f24
 title: Step 9
-challengeType: 0
+challengeType: 1
 dashedName: step-9
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
index 04ab006c27..72caca69d1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734bbc0bd741598f942352e.md
@@ -1,7 +1,7 @@
 ---
 id: 6734bbc0bd741598f942352e
 title: Step 12
-challengeType: 0
+challengeType: 1
 dashedName: step-12
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
index 60de74541c..fa9878a4c0 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734c10a327760a665b7d5b9.md
@@ -1,7 +1,7 @@
 ---
 id: 6734c10a327760a665b7d5b9
 title: Step 13
-challengeType: 0
+challengeType: 1
 dashedName: step-13
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
index bab1d29709..847b8ad457 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734eee1f9498cd90f9ae340.md
@@ -1,7 +1,7 @@
 ---
 id: 6734eee1f9498cd90f9ae340
 title: Step 14
-challengeType: 0
+challengeType: 1
 dashedName: step-14
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
index 9c43b5c453..c321dc91c5 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f0ae9d1cf4dfd43a7805.md
@@ -1,7 +1,7 @@
 ---
 id: 6734f0ae9d1cf4dfd43a7805
 title: Step 15
-challengeType: 0
+challengeType: 1
 dashedName: step-15
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
index 02b3040660..8c8ebf9735 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734f6290ebd5cfbc75996af.md
@@ -1,7 +1,7 @@
 ---
 id: 6734f6290ebd5cfbc75996af
 title: Step 16
-challengeType: 0
+challengeType: 1
 dashedName: step-16
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
index 73474702eb..36fe62960b 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6734fa225c6667121e589f7e.md
@@ -1,7 +1,7 @@
 ---
 id: 6734fa225c6667121e589f7e
 title: Step 17
-challengeType: 0
+challengeType: 1
 dashedName: step-17
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
index ef11dfe9c6..1c8ca35ee1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67350acfd2006f2777295b96.md
@@ -1,7 +1,7 @@
 ---
 id: 67350acfd2006f2777295b96
 title: Step 19
-challengeType: 0
+challengeType: 1
 dashedName: step-19
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
index e0ae1e9d5b..a80c1888f4 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/67351225403acd3d6f70ed6d.md
@@ -1,7 +1,7 @@
 ---
 id: 67351225403acd3d6f70ed6d
 title: Step 20
-challengeType: 0
+challengeType: 1
 dashedName: step-20
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
index 3afd6675cd..ec01519893 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6735145b0ee741461bdbaa49.md
@@ -1,7 +1,7 @@
 ---
 id: 6735145b0ee741461bdbaa49
 title: Step 21
-challengeType: 0
+challengeType: 1
 dashedName: step-21
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
index ac6b1bad8c..06fb99e146 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673521668be7905059b2d555.md
@@ -1,7 +1,7 @@
 ---
 id: 673521668be7905059b2d555
 title: Step 22
-challengeType: 0
+challengeType: 1
 dashedName: step-22
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
index 1b6c653301..b36412fab1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673529d08c0d9c5a4193a465.md
@@ -1,7 +1,7 @@
 ---
 id: 673529d08c0d9c5a4193a465
 title: Step 23
-challengeType: 0
+challengeType: 1
 dashedName: step-23
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
index 55cac8955c..8af02f8bdc 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673762590f4bc1771c3a1e97.md
@@ -1,7 +1,7 @@
 ---
 id: 673762590f4bc1771c3a1e97
 title: Step 18
-challengeType: 0
+challengeType: 1
 dashedName: step-18
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
index 4e4aa92217..59dd010829 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/673788448f390305b34aa814.md
@@ -1,7 +1,7 @@
 ---
 id: 673788448f390305b34aa814
 title: Step 24
-challengeType: 0
+challengeType: 1
 dashedName: step-24
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
index 1a0f5add4d..98a969fec1 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a1a073a0d14c6544d301.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a1a073a0d14c6544d301
 title: Step 25
-challengeType: 0
+challengeType: 1
 dashedName: step-25
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
index 555ac8c0bb..872d85d4cd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a5058ff3015829ce3265.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a5058ff3015829ce3265
 title: Step 26
-challengeType: 0
+challengeType: 1
 dashedName: step-26
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
index acf2553d9d..87f60c941a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737a95d5b431860f96ca7bb.md
@@ -1,7 +1,7 @@
 ---
 id: 6737a95d5b431860f96ca7bb
 title: Step 27
-challengeType: 0
+challengeType: 1
 dashedName: step-27
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
index 5535ddc2b4..86d4e1cf56 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737ac8e4fe7ae6b91c806bd.md
@@ -1,7 +1,7 @@
 ---
 id: 6737ac8e4fe7ae6b91c806bd
 title: Step 28
-challengeType: 0
+challengeType: 1
 dashedName: step-28
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
index f870b317ad..56f100039e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6737c6d5d66b5cc3dac09c7b.md
@@ -1,7 +1,7 @@
 ---
 id: 6737c6d5d66b5cc3dac09c7b
 title: Step 29
-challengeType: 0
+challengeType: 1
 dashedName: step-29
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
index 5667eed1f6..22eb31e16d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a5c704680355e29e077c.md
@@ -1,7 +1,7 @@
 ---
 id: 6738a5c704680355e29e077c
 title: Step 30
-challengeType: 0
+challengeType: 1
 dashedName: step-30
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
index e197b25a68..6a4d9b1d21 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738a8035efec45acd8fdbf9.md
@@ -1,7 +1,7 @@
 ---
 id: 6738a8035efec45acd8fdbf9
 title: Step 31
-challengeType: 0
+challengeType: 1
 dashedName: step-31
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
index 5d86143a24..d98957698a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-plant-nursery-catalog/6738ad2fd11775752d23ddc2.md
@@ -1,7 +1,7 @@
 ---
 id: 6738ad2fd11775752d23ddc2
 title: Step 32
-challengeType: 0
+challengeType: 1
 dashedName: step-32
 ---
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
index aea603952c..4d432e095c 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/67353fb237ffbd01af3be1cc.md
@@ -7,58 +7,56 @@ dashedName: step-14
 
 # --description--
 
-You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign each to a variable name that matches the ID.
-
-Remember to use camelCase!
+You can finally start hooking your logic into the user interface. You'll need to query the DOM to get a few elements by ID. Get the elements with the `ingredient`, `quantity`, `unit`, `servings`, `recipe-form`, and `result-list` IDs, and assign them to the variables `ingredientName`, `ingredientQuantity`, `unitToConvert`, `numberOfServings`, `recipeForm`, and `resultList`, respectively.
 
 # --hints--
 
-You should define an `ingredient` variable.
+You should define an `ingredientName` variable.
 
 ```js
-assert.isDefined(ingredient);
+assert.isDefined(ingredientName);
 ```
 
-Your `ingredient` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
+Your `ingredientName` variable should be the element returned from `.getElementById()` with the `ingredient` ID.
 
 ```js
-assert.strictEqual(ingredient, document.getElementById("ingredient"));
+assert.strictEqual(ingredientName, document.getElementById('ingredient'));
 ```
 
-You should define a `quantity` variable.
+You should define a `ingredientQuantity` variable.
 
 ```js
-assert.isDefined(quantity);
+assert.isDefined(ingredientQuantity);
 ```
 
-Your `quantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
+Your `ingredientQuantity` variable should be the element returned from `.getElementById()` with the `quantity` ID.
 
 ```js
-assert.strictEqual(quantity, document.getElementById("quantity"));
+assert.strictEqual(ingredientQuantity, document.getElementById('quantity'));
 ```
 
-You should define a `unit` variable.
+You should define a `unitToConvert` variable.
 
 ```js
-assert.isDefined(unit);
+assert.isDefined(unitToConvert);
 ```
 
-Your `unit` variable should be the element returned from `.getElementById()` with the `unit` ID.
+Your `unitToConvert` variable should be the element returned from `.getElementById()` with the `unit` ID.
 
 ```js
-assert.strictEqual(unit, document.getElementById("unit"));
+assert.strictEqual(unitToConvert, document.getElementById('unit'));
 ```
 
-You should define a `servings` variable.
+You should define a `numberOfServings` variable.
 
 ```js
-assert.isDefined(servings);
+assert.isDefined(numberOfServings);
 ```
 
-Your `servings` variable should be the element returned from `.getElementById()` with the `servings` ID.
+Your `numberOfServings` variable should be the element returned from `.getElementById()` with the `servings` ID.
 
 ```js
-assert.strictEqual(servings, document.getElementById("servings"));
+assert.strictEqual(numberOfServings, document.getElementById('servings'));
 ```
 
 You should define a `recipeForm` variable.
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
index 1e10d076ad..58b5cc772d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673540f6e49ae33d6a235c20.md
@@ -218,10 +218,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
index 3f30a8427b..4094f64a66 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673542088e459b6def5d6e56.md
@@ -191,10 +191,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
index 80e0fd7f68..9f06d4a43e 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/6735424ecfeb557d81dcc9d1.md
@@ -7,7 +7,7 @@ dashedName: step-17
 
 # --description--
 
-Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unit.value`).
+Now you need to iterate through your `units` array. With each value in that array, check if the current value is **not** equal to the current unit (found in `unitToConvert.value`).
 
 If so, you will need to convert the existing unit to your current unit, and append a list item to `resultList` with the following format:
 
@@ -20,10 +20,10 @@ For example, a conversion result of five grams for flour should look like `Flour
 Your `updateResultsList` function should properly update the DOM.
 
 ```js
-ingredient.value = "Flour";
-quantity.value = 5;
-servings.value = 5;
-unit.value = "gram";
+ingredientName.value = "Flour";
+ingredientQuantity.value = 5;
+numberOfServings.value = 5;
+unitToConvert.value = "gram";
 updateResultsList();
 assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
 assert.include(resultList.innerHTML, "<li>Flour: 0.88 ounce</li>");
@@ -193,10 +193,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
index be34a7dd13..233026de48 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-recipe-ingredient-converter/673543d867b44ac7580610a2.md
@@ -18,10 +18,10 @@ Once that's done, take some time to experiment with different values in the form
 Your `recipeForm` should call `updateResultsList` when submitted.
 
 ```js
-ingredient.value = "Flour";
-quantity.value = 5;
-servings.value = 5;
-unit.value = "gram";
+ingredientName.value = "Flour";
+ingredientQuantity.value = 5;
+numberOfServings.value = 5;
+unitToConvert.value = "gram";
 const submit = new Event("submit");
 recipeForm.dispatchEvent(submit);
 assert.include(resultList.innerHTML, "<li>Flour: 0.10 cup</li>");
@@ -192,10 +192,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
@@ -205,15 +205,15 @@ const updateResultsList = () => {
   resultList.innerHTML = "";
 
   units.forEach((newUnit) => {
-    if (newUnit !== unit.value) {
+    if (newUnit !== unitToConvert.value) {
       const convertedQuantity = processIngredient(
-        parseFloat(quantity.value),
-        unit.value,
+        parseFloat(ingredientQuantity.value),
+        unitToConvert.value,
         newUnit,
-        parseFloat(servings.value)
+        parseFloat(numberOfServings.value)
       );
 
-      resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
+      resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
     }
   });
 }
@@ -384,10 +384,10 @@ const processIngredient = (baseQuantity, baseUnit, newUnit, newServings) => {
   return convertedQuantity.toFixed(2);
 };
 
-const ingredient = document.getElementById("ingredient");
-const quantity = document.getElementById("quantity");
-const unit = document.getElementById("unit");
-const servings = document.getElementById("servings");
+const ingredientName = document.getElementById("ingredient");
+const ingredientQuantity = document.getElementById("quantity");
+const unitToConvert = document.getElementById("unit");
+const numberOfServings = document.getElementById("servings");
 const recipeForm = document.getElementById("recipe-form");
 const resultList = document.getElementById("result-list");
 
@@ -397,15 +397,15 @@ const updateResultsList = () => {
   resultList.innerHTML = "";
 
   units.forEach((newUnit) => {
-    if (newUnit !== unit.value) {
+    if (newUnit !== unitToConvert.value) {
       const convertedQuantity = processIngredient(
-        parseFloat(quantity.value),
-        unit.value,
+        parseFloat(ingredientQuantity.value),
+        unitToConvert.value,
         newUnit,
-        parseFloat(servings.value)
+        parseFloat(numberOfServings.value)
       );
 
-      resultList.innerHTML += `<li>${ingredient.value}: ${convertedQuantity} ${newUnit}</li>`;
+      resultList.innerHTML += `<li>${ingredientName.value}: ${convertedQuantity} ${newUnit}</li>`;
     }
   });
 }
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
index 82e8993d59..2e0e0fd742 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6740495ba48aa94e5667b436.md
@@ -3,6 +3,7 @@ id: 6740495ba48aa94e5667b436
 title: Step 1
 challengeType: 0
 dashedName: step-1
+demoType: onLoad
 ---
 
 # --description--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
index 9f8abb48f9..70bb00037a 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-mega-navbar/6745d9df333efe2543a1f457.md
@@ -17,13 +17,13 @@ You should create a `ul` element inside your third `li` element.
 assert(document.querySelector('li ul'));
 ```
 
-Your should set the `className` attribute of your `ul` element to `sub-menu`.
+You should set the `className` attribute of your `ul` element to `sub-menu`.
 
 ```js
 assert.equal(document.querySelector('li ul')?.getAttribute('class'), 'sub-menu');
 ```
 
-Your should set the `aria-label` attribute of your `ul` element to `Apps`.
+You should set the `aria-label` attribute of your `ul` element to `Apps`.
 
 ```js
 assert.equal(document.querySelector('li ul')?.getAttribute('aria-label'), 'Apps');
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
new file mode 100644
index 0000000000..274e512a79
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md
@@ -0,0 +1,125 @@
+---
+id: 674ef11f75254548672d998c
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this project, you will learn how to work with props by building a reusable profile card component.
+
+Start by using the `export` keyword to create a `Card` functional component with `name`, `title`, and `bio` as the props. Don't forget to make sure they're all wrapped in a curly brace. That way, you destructure them instead of accessing them from `props`.
+
+Also, return a pair of parentheses with an empty string inside of them for now.
+
+# --hints--
+
+You should create and export a `Card` functional component. Don't forget to return an empty string inside it.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+assert.lengthOf(mockedComponent.find('Card'), 1);
+```
+
+Your `Card` component should have a `name`, `title`, and `bio` props.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const componentFunction = mockedComponent.type();
+const propsSource = componentFunction.toString();
+
+assert.match(propsSource, /\bname\b/);
+assert.match(propsSource, /\btitle\b/);
+assert.match(propsSource, /\bbio\b/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
new file mode 100644
index 0000000000..cd896b45aa
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691658.md
@@ -0,0 +1,116 @@
+---
+id: 674ef2d357676e50e4691658
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Inside the return, remove the empty string, then create a `div` element with a `className` of `card`.
+
+# --hints--
+
+You should not have an empty string in your Card component.
+
+```js
+assert.notMatch(code, /""/)
+```
+
+You should create a `div` element with the `className` `card` at the top level of your `Card` component.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+assert.equal(mockedComponent.childAt(0).type(), 'div');
+assert.isTrue(mockedComponent.childAt(0).hasClass('card'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+  --fcc-editable-region--
+  ""
+  --fcc-editable-region--
+  )
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
new file mode 100644
index 0000000000..cc5141ec81
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e4691659.md
@@ -0,0 +1,166 @@
+---
+id: 674ef2d357676e50e4691659
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Inside the `div` element, create an `h2` element and interpolate the `name` prop as its text.
+
+Also, inside the `div`, create a paragraph with the `className` of `card-title` to interpolate the `title` prop, and another paragraph to interpolate the `bio` prop.
+
+# --hints--
+
+You should create an `h2` element inside your `div` element.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const h2Elem = mockedComponent.find('h2');
+
+assert.equal(h2Elem.parent().type(), 'div');
+```
+
+Your `h2` element should have `{name}` as its text content.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { name: 'nameVal' })
+);
+
+const h2Elem = mockedComponent.find('h2');
+
+assert.equal(h2Elem.text(), 'nameVal'); 
+```
+
+You should create a `p` tag with the `className` of `card-title` inside your `div` element.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card)
+);
+
+const pElem = mockedComponent.find('p.card-title');
+
+assert.equal(pElem.parent().type(), 'div');
+```
+
+Your `p` element with `className` of `card-title` should have `{title}` as its text content.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { title: 'titleVal' })
+);
+
+const pElem = mockedComponent.find('p.card-title');
+
+assert.equal(pElem.text(), 'titleVal');
+assert.equal(pElem.parent().type(), 'div');
+```
+
+You should create another `p` element with `{bio}` as its text.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.Card, { bio: 'bioVal' })
+);
+
+const secondPElem = mockedComponent.children().childAt(2)
+
+assert.equal(secondPElem.type(), 'p')
+assert.equal(secondPElem.text(), 'bioVal');
+assert.equal(secondPElem.parent().type(), 'div');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    --fcc-editable-region--
+    <div className="card">
+
+    </div>
+    --fcc-editable-region--
+  )
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
new file mode 100644
index 0000000000..7e92584a83
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165a.md
@@ -0,0 +1,117 @@
+---
+id: 674ef2d357676e50e469165a
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+To start using the `Card` component, use the `export` keyword to create an `App` functional component.
+
+Inside the `App` component, return a pair of parentheses containing an empty string.
+
+# --hints--
+
+You should export an `App` functional component.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.App)
+);
+
+assert.lengthOf(mockedComponent.find('App'), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
new file mode 100644
index 0000000000..db3fbd1070
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
@@ -0,0 +1,126 @@
+---
+id: 674ef2d357676e50e469165b
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Inside your return statement, replace the empty string with a `div` element with a `className` property of `flex-container`.
+
+# --hints--
+
+You should not have an empty string in your Card component.
+
+```js
+assert.notMatch(code, /""/)
+```
+
+You should create a `div` element with the class `flex-container`.
+
+```js
+const mockedComponent = Enzyme.mount(
+  React.createElement(window.index.App)
+);
+
+assert.equal(mockedComponent.childAt(0).type(), 'div');
+assert.isTrue(mockedComponent.childAt(0).hasClass('flex-container'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+  --fcc-editable-region--
+    ""
+  --fcc-editable-region--
+  );
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
new file mode 100644
index 0000000000..d6d3cddd97
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
@@ -0,0 +1,144 @@
+---
+id: 674ef2d357676e50e469165c
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, use the `Card` component with the `name` prop set to `"Mark"`, the `title` prop set to `"Frontend developer"`, and the `bio` set to `"I like to work with different frontend technologies and play video games."`
+
+# --hints--
+
+You should use the `Card` component as an element with a `name` prop set to `"Mark"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().name, "Mark")
+```
+
+You should use the `Card` component as an element with a `title` prop set to `"Frontend developer"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().title, "Frontend developer")
+```
+
+You should use the `Card` component as an element with a `bio` prop set to `"I like to work with different frontend technologies and play video games."`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().bio, "I like to work with different frontend technologies and play video games.")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+    </div>
+  );
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
new file mode 100644
index 0000000000..d882a9c526
--- /dev/null
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
@@ -0,0 +1,265 @@
+---
+id: 674ef2d357676e50e469165d
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Again, use the `Card` component two more times with the following:
+
+| Props   | First Card Values                                                                     | Second Card Values                                                                          |
+| ------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `name`  | `"Tiffany"`                                                                           | `"Doug"`                                                                                    |
+| `title` | `"Engineering manager"`                                                               | `"Backend developer"`                                                                       |
+| `bio`   | `"I have worked in tech for 15 years and love to help people grow in this industry."` | `"I have been a software developer for over 20 years and I love working with Go and Rust."` |
+
+With that, your reusable profile card component project is complete!
+
+# --hints--
+
+You should use the `Card` component as an element with the appropriate props and first card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[1], {
+  name: 'Tiffany',
+  title: 'Engineering manager',
+  bio: 'I have worked in tech for 15 years and love to help people grow in this industry.'
+});
+```
+
+You should use the `Card` component as an element with the appropriate props and second card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[2], {
+  name: 'Doug',
+  title: 'Backend developer',
+  bio: 'I have been a software developer for over 20 years and I love working with Go and Rust.'
+});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+      <Card
+        name="Mark"
+        title="Frontend developer"
+        bio="I like to work with different frontend technologies and play video games."
+      />
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  );
+}
+```
+
+# --solutions--
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      src="index.jsx"
+    ></script>
+     <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      data-plugins="transform-modules-umd"
+      type="text/babel"
+      data-presets="react"
+      data-type="module"
+    >
+      import { App } from './index.jsx';
+      ReactDOM.createRoot(document.getElementById('root')).render(
+        <App />
+      );
+    </script>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --dark-grey: #1b1b32;
+  --light-grey: #f5f6f7;
+  --dark-orange: #f89808;
+}
+
+body {
+  background-color: var(--dark-grey);
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.card {
+  border: 5px solid var(--dark-orange);
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  margin: 10px 0;
+  background-color: var(--light-grey);
+}
+
+.card-title {
+  border-bottom: 4px solid var(--dark-orange);
+  width: fit-content;
+}
+
+@media (min-width: 768px) {
+  .card {
+    width: 300px;
+  }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+  return (
+    <div className="card">
+      <h2>{name}</h2>
+      <p className="card-title">{title}</p>
+      <p>{bio}</p>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div className="flex-container">
+      <Card
+        name="Mark"
+        title="Frontend developer"
+        bio="I like to work with different frontend technologies and play video games."
+      />
+
+      <Card
+        name="Tiffany"
+        title="Engineering manager"
+        bio="I have worked in tech for 15 years and love to help people grow in this industry."
+      />
+
+      <Card
+        name="Doug"
+        title="Backend developer"
+        bio="I have been a software developer for over 20 years and I love working with Go and Rust."
+      />
+    </div>
+  );
+}
+```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md b/curriculum/challenges/chinese/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
index a714503014..fa8a5ed8e7 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-rps-game/66cf33305293e1b35c1aef7f.md
@@ -7,7 +7,7 @@ dashedName: step-6
 
 # --description--
 
-Now it’s time to get the results of the round. 完成 `getRoundResults` 函数。
+Now it's time to get the results of the round. 完成 `getRoundResults` 函数。
 
 如果玩家赢了这一局，将 `playerScore` 增加 `1`，并返回消息 `"Player wins! [player's choice] beats [computer's choice]"`。
 
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
index 9cb737cba1..3c97f26795 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2d680e129e1423116a541.md
@@ -19,7 +19,7 @@ You should create a `getVowelCount` function.
 assert.isFunction(getVowelCount);
 ```
 
-You `getVowelCount` function should have a `sentence` parameter.
+Your `getVowelCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getVowelCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
index 3dcade66c6..504252f3dd 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2e5d890ac8a54c9d703bd.md
@@ -21,7 +21,7 @@ You should create a `getConsonantCount` function.
 assert.isFunction(getConsonantCount);
 ```
 
-You `getConsonantCount` function should have a `sentence` parameter.
+Your `getConsonantCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getConsonantCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
index 20d016aa97..7077c01e40 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2eab8a5638f57b637b7cc.md
@@ -23,7 +23,7 @@ You should create a `getPunctuationCount` function.
 assert.isFunction(getPunctuationCount);
 ```
 
-You `getPunctuationCount` function should have a `sentence` parameter.
+Your `getPunctuationCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getPunctuationCount.toString(), /sentence/);
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
index 404edd9030..54377af1cf 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-sentence-analyzer/66e2f06b191e305c00574e4d.md
@@ -17,7 +17,7 @@ You should create a `getWordCount` function.
 assert.isFunction(getWordCount);
 ```
 
-You `getWordCount` function should have a `sentence` parameter.
+Your `getWordCount` function should have a `sentence` parameter.
 
 ```js
 assert.match(getWordCount.toString(), /sentence/);
@@ -48,13 +48,19 @@ assert.strictEqual(getWordCount("freeCodeCamp offers free coding tutorials onlin
 assert.strictEqual(getWordCount("You can learn HTML, CSS, JavaScript, and more on freeCodeCamp"), 10);
 ```
 
-Your `getWordCount` function should return the correct punctuation count for any sentence.
+Your `getWordCount` function should return the correct word count for any sentence.
 
 ```js
 assert.strictEqual(getWordCount("freeCodeCamp has a great community of kind people"), 8);
 assert.strictEqual(getWordCount("The freeCodeCamp curriculum is constantly updated"), 6);
 assert.strictEqual(getWordCount("freeCodeCamp teaches both frontend and backend development"), 7);
+```
+
+Your `getWordCount` function should return the correct word count for an empty string, or a string only with spaces.
+
+```js
 assert.strictEqual(getWordCount(""), 0);
+assert.strictEqual(getWordCount("   "), 0);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
index c7eab77f17..bfee71cc1d 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md
@@ -29,6 +29,7 @@ You should update the first item in the `shoppingList` array to be `"Canola Oil"
 
 ```js
 assert.equal(shoppingList[0], "Canola Oil");
+assert.notEqual(shoppingList[1], "Vegetable Oil");
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
index 65dcffa31c..a26e86a49f 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md
@@ -13,10 +13,10 @@ And with this last step your grocery list is complete!
 
 # --hints--
 
-You should log the `shoppingList` array to the console.
+You should call the `getShoppingListMsg` function inside of the `console.log`.
 
 ```js
-assert.match(code, /console\.log\(\s*shoppingList\s*\)/);
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 7);
 ```
 
 # --seed--
@@ -112,5 +112,5 @@ console.log("On second thought, maybe we should be more health conscious.");
 shoppingList.shift();
 shoppingList[0] = "Canola Oil";
 
-console.log(shoppingList);
+console.log(getShoppingListMsg());
 ```
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md b/curriculum/challenges/chinese/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
index be85118bbc..21843201a9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-storytelling-app/671fafbae959c048d82bac8d.md
@@ -13,7 +13,7 @@ With this, you have successfully completed the workshop.
 
 # --hints--
 
-When you cick the `scaryStoryBtn`, the `result` paragraph should display the scary story `"In the dark woods, a group of friends stumbled upon an old, abandoned cabin. They enter the cabin and awaken something malevolent that had been dormant for centuries."` with a border color of `#ee4b2b`.
+When you click the `scaryStoryBtn`, the `result` paragraph should display the scary story `"In the dark woods, a group of friends stumbled upon an old, abandoned cabin. They enter the cabin and awaken something malevolent that had been dormant for centuries."` with a border color of `#ee4b2b`.
 
 ```js
 scaryStoryBtn.click();
@@ -36,7 +36,7 @@ assert.equal(hexColor.toLowerCase(), "#ee4b2b");
 assert.equal(result.textContent.replace(/\s+/g, ' '), expectedStory);
 ```
 
-When you cick the `funnyStoryBtn`, the `result` paragraph should display the funny story with a border color of `#f1be32`.
+When you click the `funnyStoryBtn`, the `result` paragraph should display the funny story with a border color of `#f1be32`.
 
 ```js
 funnyStoryBtn.click();
@@ -59,7 +59,7 @@ assert.equal(hexColor.toLowerCase(), "#f1be32");
 assert.equal(result.textContent.replace(/\s+/g, ' '), expectedFunnyStory);
 ```
 
-When you cick the `adventureStoryBtn`, the `result` paragraph should display the adventure story with a border color of `#acd157`.
+When you click the `adventureStoryBtn`, the `result` paragraph should display the adventure story with a border color of `#acd157`.
 
 ```js
 adventureStoryBtn.click();
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md b/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
index f17cd3df37..440d632b22 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64fad9cd2eeb1e7ca2ca8c8b.md
@@ -7,7 +7,7 @@ dashedName: step-37
 
 # --description--
 
-Use arrow syntax to create an `updateTaskContainer` function. Then move the `taskData.forEach()` and its content into it.
+Use arrow syntax to create an `updateTaskContainer` function. Then move the `taskData.forEach()` and its content from the `taskForm`'s `submit` event listener into the newly created function.
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{/)
 You should move `taskData.forEach()` and its content into the `updateTaskContainer()` function.
 
 ```js
-assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`\s*}\s*\)\s*;?\s*\}\s*;?/)
+assert.match(code, /const\s+updateTaskContainer\s*=\s*\(\s*\)\s*=>\s*\{\s*taskData\.forEach\(\s*\(\s*\{\s*id\s*,\s*title\s*,\s*date\s*,\s*description\s*\}\s*\)\s*=>\s*{\s*tasksContainer\.innerHTML\s*\+=\s*`\s*<div\s+class\s*=\s*('|")task\1\s*id\s*=\s*('|")\$\{id\}\2>\s*<p><strong>Title:<\/strong>\s*\$\{title\}<\/p>\s*<p><strong>Date:<\/strong>\s*\$\{date\}<\/p>\s*<p><strong>Description:<\/strong>\s*\$\{description\}<\/p>\s*<button\s+type\s*=\s*('|")button\3\s*class\s*=\s*('|")btn\4>Edit<\/button>\s*<button\s+type\s*=\s*('|")button\5\s*class\s*=\s*('|")btn\6>Delete<\/button>\s*<\/div>\s*`;?\s*}\s*\)\s*;?\s*\}\s*;?/)
 ```
 
 # --seed--
diff --git a/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md b/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
index 24502aad09..154d38bdc9 100644
--- a/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
+++ b/curriculum/challenges/chinese/25-front-end-development/workshop-todo-app/64ff04cc33779427a6412449.md
@@ -11,7 +11,7 @@ The item you retrieve is a string, as you saved it with `JSON.stringify()`. To v
 
 Use `getItem()` to retrieve the `myTaskArr` array again. This time, wrap it inside `JSON.parse()`, assign it to the variable `getTaskArrObj` and log the `getTaskArrObj` to the console.
 
-Check the console to see the difference between `getTaskArr` and `getTaskObj`.
+Check the console to see the difference between `getTaskArr` and `getTaskArrObj`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
index cea19f6c62..509a4604d4 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
@@ -63,7 +63,7 @@ These are the characteristics or functions of something.
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -81,12 +81,12 @@ These are the characteristics or functions of something.
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -95,7 +95,7 @@ These are the characteristics or functions of something.
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
index 0cee3fb8e2..85df51bc7a 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
@@ -61,7 +61,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -79,12 +79,12 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -93,7 +93,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
index f22293a790..54b5208ecd 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
@@ -88,7 +88,7 @@ Linda's statement indicates that the action of testing started at the time of th
       "startTime": 1,
       "finishTime": 3.62,
       "dialogue": {
-        "text": "Yes, I've been testing them since the latest software update",
+        "text": "Yes, I've been testing them since the latest software update.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
index 7b84b48b65..bd675d3239 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
@@ -78,7 +78,7 @@ This term refers to errors in software that need to be resolved. It's plural for
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
index 5fbd193766..4b90d7d733 100644
--- a/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
+++ b/curriculum/challenges/espanol/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
@@ -88,7 +88,7 @@ Linda's statement highlights that although they have received good responses fro
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/espanol/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index a9c9d5bf74..6992cb5d2f 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tab-index` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index 86d7d06ece..fa84659077 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -142,7 +142,7 @@ assert.strictEqual(
 You should have two items in your unordered list.
 
 ```js
-assert.lengthOf(document.querySelectorAll('li'), 2);
+assert.lengthOf(document.querySelectorAll('p + ul li'), 2);
 ```
 
 Both your list items should contain an anchor element.
@@ -205,17 +205,25 @@ Each `figure` element should contain a `figcaption` element as its second child.
 const figures = document.querySelectorAll('figure');
 assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
+  assert.equal(figure.children[1]?.tagName, 'FIGCAPTION');
 }
 ```
 
+Each `figcaption` should contain some text.
+
+```js
+const figcaptionEls = document.querySelectorAll('figcaption');
+assert.isNotEmpty(figcaptionEls);
+figcaptionEls.forEach((figcaption => assert.isNotEmpty(figcaption.innerText)));
+```
+
 Each of the `a` elements that are children of your `figure` elements should contain an image.
 
 ```js
 const anchors = document.querySelectorAll('figure > a');
 assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-  assert.equal(anchor.children[0].tagName, 'IMG');
+  assert.equal(anchor.children[0]?.tagName, 'IMG');
 }
 ```
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index 73b6ac4a69..ac62d4f199 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -22,7 +22,7 @@ The `div` element represents a container for introductory content or a set of na
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -30,7 +30,7 @@ The `div` element defines a footer for a document or section.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -38,7 +38,7 @@ The `div` specifies the main page content and should be unique.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -94,57 +94,35 @@ Review the beginning of the video for the correct syntax.
 
 ## --text--
 
-What is the correct syntax for using a `div` to group elements together?
+Which of the following HTML elements is commonly used to group content into distinct sections?
 
 ## --answers--
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-</div>
-```
+`section`
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-<div>
-```
+`aside`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-</div>
-<div>
-  <p>I'm another paragraph</p>
-</div>
-```
+`nav`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-/>
-```
+`h1`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
index 3fb860e6fd..2d33343871 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -22,7 +22,7 @@ Use a `class` when you want a unique identifier that should only apply to one el
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -34,7 +34,7 @@ Use an `id` when you want to style multiple elements consistently across differe
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -42,7 +42,7 @@ Use an `id` when you want to apply styles that can be easily overridden by other
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Remember that an `id` is unique and can only be used once per HTML document.
 
 ## --text--
 
-What happens if you try to use duplicate an `id` in your HTML?
+What happens if you use the same `id` more than once in your HTML?
 
 ## --answers--
 
@@ -62,7 +62,7 @@ The program will crash.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -70,7 +70,7 @@ Nothing will happen.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -78,7 +78,7 @@ There will be a popup alert message in the browser window.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
index a8bb5e2f88..fe94f2bb13 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -94,7 +94,7 @@ Inside the `figure` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -102,7 +102,7 @@ Inside the `footer` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -114,7 +114,7 @@ In a popup alert message.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index 3e836638ed..73a3bc175d 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
index e86ed9318d..9d0fab401d 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -50,15 +50,15 @@ All of the above
 
 ## --text--
 
-What element must an `h3` element come after?
+Which heading element must precede an `h3` element?
 
 ## --answers--
 
-`h1`
+`h5`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -66,11 +66,11 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ---
 
-`h3`
+`h6`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -78,7 +78,7 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
index 92fd187d64..516dfb03e3 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -62,7 +62,7 @@ What is the correct format for the `datetime` attribute value according to ISO 8
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -70,7 +70,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -78,7 +78,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/espanol/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..715cff09bf
--- /dev/null
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: zUCIsEDCIMU
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is an example of a boolean attribute?
+
+## --answers--
+
+`src`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`href`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`disabled`
+
+---
+
+`alt`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the role of an attribute in HTML?
+
+## --answers--
+
+Attributes provide additional information and help define the behavior for HTML elements.
+
+---
+
+Attributes change the background color of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes change the font size of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes add JavaScript functionality to an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is the correct syntax for a boolean attribute?
+
+## --answers--
+
+`<input type="checkbox" checked>`
+
+---
+
+`<input type="checkbox" checked="on">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="off">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="isChecked">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
index ca5d07c2a3..9327a2725c 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
@@ -26,7 +26,7 @@ Which option is an absolute path?
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -34,7 +34,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -42,7 +42,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
index 68a1cf656d..c2d2741e7a 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
@@ -94,7 +94,7 @@ In what order should you style your links?
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -102,7 +102,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -110,7 +110,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
index ee6bf2b9f0..86d44f1b1d 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
@@ -50,11 +50,11 @@ Using a mismatched size can create loading or display issues.
 
 ## --text--
 
-Which file type should you prefer?
+Which of the following is NOT a valid image file type?
 
 ## --answers--
 
-WEBP
+TS
 
 ---
 
@@ -62,7 +62,7 @@ PNG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
@@ -70,15 +70,15 @@ JPG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
-GIF
+WEBP
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
index 0c1cf5df63..1e02cee3fe 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
@@ -26,7 +26,7 @@ Permissive license
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -34,7 +34,7 @@ Public Domain
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Creative Commons
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ## --video-solution--
 
@@ -90,32 +90,32 @@ How can you find images that you are allowed to use?
 
 ## --answers--
 
-Search engine filters.
+Search for images on Google and use them freely.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-Dedicated websites like Pixabay.
-
-### --feedback--
-
-There are multiple options.
+Use websites like Pixabay or Unsplash.
 
 ---
 
-Creating your own image.
+Use any image from social media as long as you give credit.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-All of the above.
+You can use any image as long as it's not watermarked.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
 
 ## --video-solution--
 
-4
+2
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
index 5afb78dfe8..116fb99d96 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
@@ -22,7 +22,7 @@ An image which stores paths, lines, points, and curves.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -34,7 +34,7 @@ All images are raster images.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -42,7 +42,7 @@ An image which is easily scalable.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ## --video-solution--
 
@@ -62,7 +62,7 @@ An image which stores color data for each pixel.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -70,7 +70,7 @@ All images are vector images.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -78,7 +78,7 @@ An image which is not easily scalable.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ## --video-solution--
 
@@ -94,7 +94,7 @@ As pixels.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -102,7 +102,7 @@ As binary.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -110,7 +110,7 @@ As hexadecimal.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
index 04535ddc16..678424a3aa 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
@@ -22,7 +22,7 @@ What attribute allows the audio to start in a muted state?
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -30,7 +30,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -38,7 +38,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/espanol/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/espanol/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/espanol/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/espanol/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/espanol/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/espanol/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--
 
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
index 19da26b7f3..f34642a00f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Verwandle den Text `cute cats` in ein Ankerelement, das auf `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg` verweist.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
index cea19f6c62..509a4604d4 100644
--- a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
+++ b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
@@ -63,7 +63,7 @@ These are the characteristics or functions of something.
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -81,12 +81,12 @@ These are the characteristics or functions of something.
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -95,7 +95,7 @@ These are the characteristics or functions of something.
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
index 0cee3fb8e2..85df51bc7a 100644
--- a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
+++ b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
@@ -61,7 +61,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -79,12 +79,12 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -93,7 +93,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
index f22293a790..54b5208ecd 100644
--- a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
+++ b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
@@ -88,7 +88,7 @@ Linda's statement indicates that the action of testing started at the time of th
       "startTime": 1,
       "finishTime": 3.62,
       "dialogue": {
-        "text": "Yes, I've been testing them since the latest software update",
+        "text": "Yes, I've been testing them since the latest software update.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
index 7b84b48b65..bd675d3239 100644
--- a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
+++ b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
@@ -78,7 +78,7 @@ This term refers to errors in software that need to be resolved. It's plural for
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
index 5fbd193766..4b90d7d733 100644
--- a/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
+++ b/curriculum/challenges/german/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
@@ -88,7 +88,7 @@ Linda's statement highlights that although they have received good responses fro
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/german/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/german/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index f91093eb70..330546390c 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tab-index` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index b32e505ea5..0abba395c0 100644
--- a/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/german/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -142,7 +142,7 @@ assert.strictEqual(
 You should have two items in your unordered list.
 
 ```js
-assert.lengthOf(document.querySelectorAll('li'), 2);
+assert.lengthOf(document.querySelectorAll('p + ul li'), 2);
 ```
 
 Both your list items should contain an anchor element.
@@ -205,17 +205,25 @@ Each `figure` element should contain a `figcaption` element as its second child.
 const figures = document.querySelectorAll('figure');
 assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
+  assert.equal(figure.children[1]?.tagName, 'FIGCAPTION');
 }
 ```
 
+Each `figcaption` should contain some text.
+
+```js
+const figcaptionEls = document.querySelectorAll('figcaption');
+assert.isNotEmpty(figcaptionEls);
+figcaptionEls.forEach((figcaption => assert.isNotEmpty(figcaption.innerText)));
+```
+
 Each of the `a` elements that are children of your `figure` elements should contain an image.
 
 ```js
 const anchors = document.querySelectorAll('figure > a');
 assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-  assert.equal(anchor.children[0].tagName, 'IMG');
+  assert.equal(anchor.children[0]?.tagName, 'IMG');
 }
 ```
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index 73b6ac4a69..ac62d4f199 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -22,7 +22,7 @@ The `div` element represents a container for introductory content or a set of na
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -30,7 +30,7 @@ The `div` element defines a footer for a document or section.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -38,7 +38,7 @@ The `div` specifies the main page content and should be unique.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -94,57 +94,35 @@ Review the beginning of the video for the correct syntax.
 
 ## --text--
 
-What is the correct syntax for using a `div` to group elements together?
+Which of the following HTML elements is commonly used to group content into distinct sections?
 
 ## --answers--
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-</div>
-```
+`section`
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-<div>
-```
+`aside`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-</div>
-<div>
-  <p>I'm another paragraph</p>
-</div>
-```
+`nav`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-/>
-```
+`h1`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
index 3fb860e6fd..2d33343871 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -22,7 +22,7 @@ Use a `class` when you want a unique identifier that should only apply to one el
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -34,7 +34,7 @@ Use an `id` when you want to style multiple elements consistently across differe
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -42,7 +42,7 @@ Use an `id` when you want to apply styles that can be easily overridden by other
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Remember that an `id` is unique and can only be used once per HTML document.
 
 ## --text--
 
-What happens if you try to use duplicate an `id` in your HTML?
+What happens if you use the same `id` more than once in your HTML?
 
 ## --answers--
 
@@ -62,7 +62,7 @@ The program will crash.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -70,7 +70,7 @@ Nothing will happen.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -78,7 +78,7 @@ There will be a popup alert message in the browser window.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
index a8bb5e2f88..fe94f2bb13 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -94,7 +94,7 @@ Inside the `figure` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -102,7 +102,7 @@ Inside the `footer` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -114,7 +114,7 @@ In a popup alert message.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index 3e836638ed..73a3bc175d 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
index e86ed9318d..9d0fab401d 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -50,15 +50,15 @@ All of the above
 
 ## --text--
 
-What element must an `h3` element come after?
+Which heading element must precede an `h3` element?
 
 ## --answers--
 
-`h1`
+`h5`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -66,11 +66,11 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ---
 
-`h3`
+`h6`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -78,7 +78,7 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
index 92fd187d64..516dfb03e3 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -62,7 +62,7 @@ What is the correct format for the `datetime` attribute value according to ISO 8
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -70,7 +70,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -78,7 +78,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/german/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..715cff09bf
--- /dev/null
+++ b/curriculum/challenges/german/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: zUCIsEDCIMU
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is an example of a boolean attribute?
+
+## --answers--
+
+`src`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`href`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`disabled`
+
+---
+
+`alt`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the role of an attribute in HTML?
+
+## --answers--
+
+Attributes provide additional information and help define the behavior for HTML elements.
+
+---
+
+Attributes change the background color of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes change the font size of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes add JavaScript functionality to an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is the correct syntax for a boolean attribute?
+
+## --answers--
+
+`<input type="checkbox" checked>`
+
+---
+
+`<input type="checkbox" checked="on">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="off">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="isChecked">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
index ca5d07c2a3..9327a2725c 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
@@ -26,7 +26,7 @@ Which option is an absolute path?
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -34,7 +34,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -42,7 +42,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
index 68a1cf656d..c2d2741e7a 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
@@ -94,7 +94,7 @@ In what order should you style your links?
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -102,7 +102,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -110,7 +110,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
index ee6bf2b9f0..86d44f1b1d 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
@@ -50,11 +50,11 @@ Using a mismatched size can create loading or display issues.
 
 ## --text--
 
-Which file type should you prefer?
+Which of the following is NOT a valid image file type?
 
 ## --answers--
 
-WEBP
+TS
 
 ---
 
@@ -62,7 +62,7 @@ PNG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
@@ -70,15 +70,15 @@ JPG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
-GIF
+WEBP
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
index 0c1cf5df63..1e02cee3fe 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
@@ -26,7 +26,7 @@ Permissive license
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -34,7 +34,7 @@ Public Domain
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Creative Commons
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ## --video-solution--
 
@@ -90,32 +90,32 @@ How can you find images that you are allowed to use?
 
 ## --answers--
 
-Search engine filters.
+Search for images on Google and use them freely.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-Dedicated websites like Pixabay.
-
-### --feedback--
-
-There are multiple options.
+Use websites like Pixabay or Unsplash.
 
 ---
 
-Creating your own image.
+Use any image from social media as long as you give credit.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-All of the above.
+You can use any image as long as it's not watermarked.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
 
 ## --video-solution--
 
-4
+2
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
index 5afb78dfe8..116fb99d96 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
@@ -22,7 +22,7 @@ An image which stores paths, lines, points, and curves.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -34,7 +34,7 @@ All images are raster images.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -42,7 +42,7 @@ An image which is easily scalable.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ## --video-solution--
 
@@ -62,7 +62,7 @@ An image which stores color data for each pixel.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -70,7 +70,7 @@ All images are vector images.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -78,7 +78,7 @@ An image which is not easily scalable.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ## --video-solution--
 
@@ -94,7 +94,7 @@ As pixels.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -102,7 +102,7 @@ As binary.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -110,7 +110,7 @@ As hexadecimal.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
index 04535ddc16..678424a3aa 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
@@ -22,7 +22,7 @@ What attribute allows the audio to start in a muted state?
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -30,7 +30,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -38,7 +38,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
diff --git a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/german/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/german/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/german/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/german/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/german/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/german/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/german/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/german/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/japanese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index f269eb232f..6c31dcf041 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tabindex` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index 3e836638ed..73a3bc175d 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/japanese/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/japanese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/japanese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/japanese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/japanese/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
index baabeaa701..1ca257b109 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
index cea19f6c62..509a4604d4 100644
--- a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
+++ b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278e07d5544c1a93f7f113.md
@@ -63,7 +63,7 @@ These are the characteristics or functions of something.
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -81,12 +81,12 @@ These are the characteristics or functions of something.
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -95,7 +95,7 @@ These are the characteristics or functions of something.
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
index 0cee3fb8e2..85df51bc7a 100644
--- a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
+++ b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67278fa39133d120afee631c.md
@@ -61,7 +61,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
     "background": "company2-boardroom.png",
     "characters": [
       {
-        "character": "James",
+        "character": "Bob",
         "position": {
           "x": 50,
           "y": 15,
@@ -79,12 +79,12 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
   },
   "commands": [
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 1,
       "startTime": 0
     },
     {
-      "character": "James",
+      "character": "Bob",
       "startTime": 1,
       "finishTime": 4.3,
       "dialogue": {
@@ -93,7 +93,7 @@ The `Present Perfect Continuous` tense (`have been working`) indicates an action
       }
     },
     {
-      "character": "James",
+      "character": "Bob",
       "opacity": 0,
       "startTime": 4.8
     }
diff --git a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
index f22293a790..54b5208ecd 100644
--- a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
+++ b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/672836d6ec0ae23f4724ccb1.md
@@ -88,7 +88,7 @@ Linda's statement indicates that the action of testing started at the time of th
       "startTime": 1,
       "finishTime": 3.62,
       "dialogue": {
-        "text": "Yes, I've been testing them since the latest software update",
+        "text": "Yes, I've been testing them since the latest software update.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
index 7b84b48b65..bd675d3239 100644
--- a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
+++ b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/6728378c94eaf541fce8f334.md
@@ -78,7 +78,7 @@ This term refers to errors in software that need to be resolved. It's plural for
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
index 5fbd193766..4b90d7d733 100644
--- a/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
+++ b/curriculum/challenges/ukrainian/24-b1-english-for-developers/learn-present-perfect-while-talking-about-accessibility/67289c4908f407948ef08a55.md
@@ -88,7 +88,7 @@ Linda's statement highlights that although they have received good responses fro
       "startTime": 1,
       "finishTime": 4.36,
       "dialogue": {
-        "text": "We've had some positive feedback, but there are still a few bugs to fix",
+        "text": "We've had some positive feedback, but there are still a few bugs to fix.",
         "align": "center"
       }
     },
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
index 06941418a6..905b507fae 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-checkout-page/66da326c02141df538f29ba5.md
@@ -21,7 +21,6 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 1. You should have an input with an `id` and `name` of `card-name` within your form and a `label` associated with it.
 1. You should have an input with an `id` and `name` of `card-number` within your form and a `label` associated with it.
 1. At least two of your input elements should be required and have an `aria-required` attribute set to `true`.
-1. You should use `tab-index` at least once.
 
 # --hints--
 
@@ -107,12 +106,6 @@ const requiredInputs = Array.from(inputs).filter(input => input.required && inpu
 assert.isAtLeast(requiredInputs?.length, 2)
 ```
 
-You should use `tabindex` at least once.
-
-```js
-const els = document.querySelectorAll('[tabindex]');
-assert.isAtLeast(els.length, 1);
-```
 
 # --seed--
 
@@ -160,7 +153,7 @@ assert.isAtLeast(els.length, 1);
             <form action="/submit-payment" method="POST">
                 <div>
                     <label for="card-name">Cardholder Name</label>
-                    <input type="text" id="card-name" name="card-name" required aria-required="true" tabindex="0">
+                    <input type="text" id="card-name" name="card-name" required aria-required="true">
                 </div>
                 <div>
                     <label for="card-number">Card Number</label>
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md b/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
index ae8e794689..cad58cc3bc 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lab-travel-agency-page/669e2f60e83c011754f711f9.md
@@ -142,7 +142,7 @@ assert.strictEqual(
 У невпорядкованому списку мають бути два елементи.
 
 ```js
-assert.lengthOf(document.querySelectorAll('li'), 2);
+assert.lengthOf(document.querySelectorAll('p + ul li'), 2);
 ```
 
 Обидва елементи списку повинні містити елемент посиланння.
@@ -205,17 +205,25 @@ for (let figure of figures) {
 const figures = document.querySelectorAll('figure');
 assert.isNotEmpty(figures);
 for (let figure of figures) {
-  assert.equal(figure.children[1].tagName, 'FIGCAPTION');
+  assert.equal(figure.children[1]?.tagName, 'FIGCAPTION');
 }
 ```
 
+Each `figcaption` should contain some text.
+
+```js
+const figcaptionEls = document.querySelectorAll('figcaption');
+assert.isNotEmpty(figcaptionEls);
+figcaptionEls.forEach((figcaption => assert.isNotEmpty(figcaption.innerText)));
+```
+
 Кожен з елементів `a`, які є дітьми елементів `figure`, повинен містити зображення.
 
 ```js
 const anchors = document.querySelectorAll('figure > a');
 assert.isNotEmpty(anchors);
 for (let anchor of anchors) {
-  assert.equal(anchor.children[0].tagName, 'IMG');
+  assert.equal(anchor.children[0]?.tagName, 'IMG');
 }
 ```
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
index 73b6ac4a69..ac62d4f199 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/670803abcb3e980233da4768.md
@@ -22,7 +22,7 @@ The `div` element represents a container for introductory content or a set of na
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -30,7 +30,7 @@ The `div` element defines a footer for a document or section.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -38,7 +38,7 @@ The `div` specifies the main page content and should be unique.
 
 ### --feedback--
 
-Think about why it is a ghost.
+Review the last 10 seconds of the video for the answer.
 
 ---
 
@@ -94,57 +94,35 @@ Review the beginning of the video for the correct syntax.
 
 ## --text--
 
-What is the correct syntax for using a `div` to group elements together?
+Which of the following HTML elements is commonly used to group content into distinct sections?
 
 ## --answers--
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-</div>
-```
+`section`
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-<div>
-```
+`aside`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div>
-  <p>I'm a paragraph</p>
-</div>
-<div>
-  <p>I'm another paragraph</p>
-</div>
-```
+`nav`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ---
 
-```html
-<div
-  <p>I'm a paragraph</p>
-  <p>I'm another paragraph</p>
-/>
-```
+`h1`
 
 ### --feedback--
 
-Review the middle part of the video for the correct syntax.
+Review the video starting at the 45 second mark for the answer.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
index 3fb860e6fd..2d33343871 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708382cf088b216580a9ff1.md
@@ -22,7 +22,7 @@ Use a `class` when you want a unique identifier that should only apply to one el
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -34,7 +34,7 @@ Use an `id` when you want to style multiple elements consistently across differe
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ---
 
@@ -42,7 +42,7 @@ Use an `id` when you want to apply styles that can be easily overridden by other
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Remember that an `id` name is unique and should only be used once per HTML document.
 
 ## --video-solution--
 
@@ -50,7 +50,7 @@ Remember that an `id` is unique and can only be used once per HTML document.
 
 ## --text--
 
-What happens if you try to use duplicate an `id` in your HTML?
+What happens if you use the same `id` more than once in your HTML?
 
 ## --answers--
 
@@ -62,7 +62,7 @@ The program will crash.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -70,7 +70,7 @@ Nothing will happen.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ---
 
@@ -78,7 +78,7 @@ There will be a popup alert message in the browser window.
 
 ### --feedback--
 
-Remember that an `id` is unique and can only be used once per HTML document.
+Think about how using duplicate `id` names in your HTML can affect your CSS and JavaScript.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
index a8bb5e2f88..fe94f2bb13 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/67083952f800051a8a21fcfd.md
@@ -94,7 +94,7 @@ Inside the `figure` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -102,7 +102,7 @@ Inside the `footer` element.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ---
 
@@ -114,7 +114,7 @@ In a popup alert message.
 
 ### --feedback--
 
-Refer back to the middle of the video where there are examples showing where the page's descriptions typically shows up.
+Refer back to the middle of the video where there are examples showing where the page's descriptions typically show up.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
index 3e836638ed..73a3bc175d 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-html-fundamentals/6708396caa00e11b597b3365.md
@@ -50,7 +50,7 @@ Refer back to the beginning of the video, where open graph properties were intro
 
 ## --text--
 
-What does the `name="og:title"` do in the `meta` element?
+What does the `property="og:title"` do in the `meta` element?
 
 ## --answers--
 
@@ -58,7 +58,7 @@ It automatically adjusts the font size and style of the webpage title based on u
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -66,7 +66,7 @@ It directs the browser to display a specific emoticon or emoji as the title of t
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -74,7 +74,7 @@ It causes the webpage to play a specific audio file when the title is displayed
 
 ### --feedback--
 
-Pay close attention to the value of the name attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -94,7 +94,7 @@ It selects the page's default font style.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -102,7 +102,7 @@ It triggers a pop-up advertisement when the webpage is loaded.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ---
 
@@ -114,7 +114,7 @@ It changes the webpage's background color based on the user's time zone.
 
 ### --feedback--
 
-Pay close attention to the value of the `name` attribute here because it heavily implies what that value does.
+Pay close attention to the value of the `property` attribute here because it heavily implies what that value does.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
index e86ed9318d..9d0fab401d 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md
@@ -50,15 +50,15 @@ All of the above
 
 ## --text--
 
-What element must an `h3` element come after?
+Which heading element must precede an `h3` element?
 
 ## --answers--
 
-`h1`
+`h5`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -66,11 +66,11 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ---
 
-`h3`
+`h6`
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ---
 
@@ -78,7 +78,7 @@ Think about the order of headings. If heading level 2 comes after heading level
 
 ### --feedback--
 
-Think about the order of headings. If heading level 2 comes after heading level 1.
+Think about the order of headings. For example, an `h2` should come after an `h1`.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
index 92fd187d64..516dfb03e3 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-importance-of-semantic-html/672995f16ed97837b365a9f6.md
@@ -62,7 +62,7 @@ What is the correct format for the `datetime` attribute value according to ISO 8
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -70,7 +70,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ---
 
@@ -78,7 +78,7 @@ ISO 8601 is an international standard format for representing dates and times.
 
 ### --feedback--
 
-ISO 8601 is an international standard format for representing dates and times.
+Review the video starting at the 45 second mark where ISO 8601 was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
new file mode 100644
index 0000000000..715cff09bf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-what-is-html/6708143cab2b583ecd3324f5.md
@@ -0,0 +1,121 @@
+---
+id: 6708143cab2b583ecd3324f5
+title: What Are Attributes, and How Do They Work?
+challengeType: 11
+videoId: zUCIsEDCIMU
+dashedName: what-are-attributes
+---
+
+# --description--
+
+Watch the video and answer the questions below.
+
+# --questions--
+
+## --text--
+
+Which of the following is an example of a boolean attribute?
+
+## --answers--
+
+`src`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`href`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+---
+
+`disabled`
+
+---
+
+`alt`
+
+### --feedback--
+
+Watch the last part of the video where common boolean attributes were discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What is the role of an attribute in HTML?
+
+## --answers--
+
+Attributes provide additional information and help define the behavior for HTML elements.
+
+---
+
+Attributes change the background color of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes change the font size of an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+---
+
+Attributes add JavaScript functionality to an element.
+
+### --feedback--
+
+Review the beginning of the video where the definition for attributes was discussed.
+
+## --video-solution--
+
+1
+
+## --text--
+
+Which of the following is the correct syntax for a boolean attribute?
+
+## --answers--
+
+`<input type="checkbox" checked>`
+
+---
+
+`<input type="checkbox" checked="on">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="off">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+---
+
+`<input type="checkbox" checked="isChecked">`
+
+### --feedback--
+
+Review the last part of the video where the `checked` attribute was discussed.
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
index 0ef8e6f280..c31ea105ce 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-forms/6729974ec29be33cb00eb54d.md
@@ -58,7 +58,7 @@ Which of the following is a correct value for the `type` attribute used inside i
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -66,7 +66,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -74,7 +74,7 @@ Refer back to the beginning of the video where the first example show a valid ty
 
 ### --feedback--
 
-Refer back to the beginning of the video where the first example show a valid type.
+Refer back to the beginning of the video where the example shows a valid value for the `type` attribute.
 
 ---
 
@@ -98,7 +98,7 @@ It specifies the type of input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -106,7 +106,7 @@ It defines the initial value displayed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ---
 
@@ -114,7 +114,7 @@ It indicates the maximum length of characters allowed in the input field.
 
 ### --feedback--
 
-Review the end of the video see example of the `placeholder` attribute.
+Review the end of the video where the `placeholder` attribute was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
index ca5d07c2a3..9327a2725c 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/6716830dbaf95da9564f2e3b.md
@@ -26,7 +26,7 @@ Which option is an absolute path?
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -34,7 +34,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ---
 
@@ -42,7 +42,7 @@ An absolute path starts with a backslash.
 
 ### --feedback--
 
-An absolute path starts with a backslash.
+An absolute path starts with a slash.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
index 68a1cf656d..c2d2741e7a 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-links/67168323932391a9ee0d3a9e.md
@@ -94,7 +94,7 @@ In what order should you style your links?
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -102,7 +102,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
@@ -110,7 +110,7 @@ Clicking a link activates it.
 
 ### --feedback--
 
-Clicking a link activates it.
+Review the last part of the video, starting at the `1:32` mark for the answer.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
index c7d5f79d8f..9589f178f9 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716743531fc9a797351c21e.md
@@ -94,7 +94,7 @@ Which of these is a replaced element?
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -102,7 +102,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ---
 
@@ -114,7 +114,7 @@ A separate website is an external object.
 
 ### --feedback--
 
-A separate website is an external object.
+Review the first minute of the video where examples of replaced elements were discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
index ee6bf2b9f0..86d44f1b1d 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67167835def3588873f339c6.md
@@ -50,11 +50,11 @@ Using a mismatched size can create loading or display issues.
 
 ## --text--
 
-Which file type should you prefer?
+Which of the following is NOT a valid image file type?
 
 ## --answers--
 
-WEBP
+TS
 
 ---
 
@@ -62,7 +62,7 @@ PNG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
@@ -70,15 +70,15 @@ JPG
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ---
 
-GIF
+WEBP
 
 ### --feedback--
 
-This is considered the modern format.
+Review the video starting at the 53 second mark to see which of these options was not mentioned.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
index 0c1cf5df63..1e02cee3fe 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716823876aa22a68ba3e2ec.md
@@ -26,7 +26,7 @@ Permissive license
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -34,7 +34,7 @@ Public Domain
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Creative Commons
 
 ### --feedback--
 
-Metadata is behind-the-scenes information.
+Review the video starting at the 12 second mark where the answer was discussed.
 
 ## --video-solution--
 
@@ -90,32 +90,32 @@ How can you find images that you are allowed to use?
 
 ## --answers--
 
-Search engine filters.
+Search for images on Google and use them freely.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-Dedicated websites like Pixabay.
-
-### --feedback--
-
-There are multiple options.
+Use websites like Pixabay or Unsplash.
 
 ---
 
-Creating your own image.
+Use any image from social media as long as you give credit.
 
 ### --feedback--
 
-There are multiple options.
+Review the end of the video where this was discussed.
 
 ---
 
-All of the above.
+You can use any image as long as it's not watermarked.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
 
 ## --video-solution--
 
-4
+2
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
index 5afb78dfe8..116fb99d96 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/6716825aff3434a71fdc3e99.md
@@ -22,7 +22,7 @@ An image which stores paths, lines, points, and curves.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -34,7 +34,7 @@ All images are raster images.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ---
 
@@ -42,7 +42,7 @@ An image which is easily scalable.
 
 ### --feedback--
 
-Scaling a raster image will make it appear pixelated.
+Review the video starting at the 14 second mark.
 
 ## --video-solution--
 
@@ -62,7 +62,7 @@ An image which stores color data for each pixel.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -70,7 +70,7 @@ All images are vector images.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ---
 
@@ -78,7 +78,7 @@ An image which is not easily scalable.
 
 ### --feedback--
 
-SVG stands for "Scalable Vector Image".
+Review the video starting at the 38 second mark.
 
 ## --video-solution--
 
@@ -94,7 +94,7 @@ As pixels.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -102,7 +102,7 @@ As binary.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
@@ -110,7 +110,7 @@ As hexadecimal.
 
 ### --feedback--
 
-SVGs can be used and edited directly in your HTML.
+Review the video starting at the 53 second mark.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
index 04535ddc16..678424a3aa 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/67168278ac6df6a799555db5.md
@@ -22,7 +22,7 @@ What attribute allows the audio to start in a muted state?
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -30,7 +30,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
@@ -38,7 +38,7 @@ Remember the attribute that specifically controls the sound state when the audio
 
 ### --feedback--
 
-Remember the attribute that specifically controls the sound state when the audio starts?
+Remember the attribute that specifically controls the sound state when the audio starts.
 
 ---
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
index dd83f18a6a..9f0bae8c4c 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/lecture-working-with-media/671682b3983489a819507553.md
@@ -22,7 +22,7 @@ International frame.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -30,7 +30,7 @@ Inline form.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ---
 
@@ -42,7 +42,7 @@ Inline form element.
 
 ### --feedback--
 
-Look out for the element for the full meaning of the element for embedding other HTML content on a web page.
+Review the first 15 seconds of the video where this was discussed.
 
 ## --video-solution--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
index 2798781dc8..99714aec9b 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-cat-photo-app/671141feba228a35cefba82d.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-Turn the existing text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+Turn the existing text `cute cats` into an anchor element that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md b/curriculum/challenges/ukrainian/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
index 56d8af2d0e..9b49210e43 100644
--- a/curriculum/challenges/ukrainian/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
+++ b/curriculum/challenges/ukrainian/25-front-end-development/workshop-greeting-card/672b4434dd6d6a1edc405419.md
@@ -11,7 +11,7 @@ Add two `a` elements inside the `.card-links` element.
 
 The first one should have a text of `Send Card`, a `class` of `send-link` and an `href` of `#send`.
 
-The first one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
+The second one should have a text of `Share on Social Media`, a `class` of `share-link` and an `href` of `#share`.
 
 # --hints--